How I Made my Website
Since launching my site, one of the most common questions I’ve gotten is how I made it. I’ve outlined my entire process in this post.
In past attempts to build a website or blogs, I would get hung up on a domain or blog title. And inevitably, when I couldn’t make that one simple decision, I ended up without anything. No title, no blog, no website. This time, I was determined to follow through.
My first step actually took place back in April, when I solicited twitter for advice creating a personal website. To my pleasant surprise, there were plentiful recommendations. If you were one of those contributors, thank you!
While options like Squarespace were mentioned, I wanted to be more involved at the development level. That being said, I wasn’t quite ready to build it from the ground up and host it myself.
Not being familiar with most of the tools that were mentioned, I identified consistently mentioned tools that would support my goals and ended up settling on the following:
- DNS Registrar: Namecheap
- Static Site Generator: Hugo
- Hosting, SSL, & CI: Netlify
- Version control & CI: Github
My initial inquery was followed by a few months of brainstorming available domains. Come mid-July, I finally went ahead and started building a website. It was time to actually follow through, and I put out into the twitterverse my decision to make it happen.
I started with Hugo. I wanted to get familiar with the process of making a website that I could get up and running on localhost. In order to install Hugo, I went the route of installing and using Homebrew to do so. I followed the instructions here.
I’ll mention here that some Hugo themes require the extended version of Hugo, which is included in the method by which I installed Hugo. If you aren’t using a Mac, your respective instructions for doing so are noted in the link above.
Installing a Hugo Theme#
After installing Hugo, you’ll get to choose a Hugo theme. You can do so here. I chose this one.
Then I followed this guide. In actuality, I tried to follow about three other guides before this one, but kept having failed deployment on Netlify. This is the one that finally lead me to success.
- When you make your netlify.toml file, be sure to change the version to whatever Hugo version you have. Otherwise, you may run into an error saying your Hugo version isn’t recent enough (guess how I know this).
- Make sure you have a config.toml file in your site’s home directory. Your theme should have an examplesite directory where you can copy a pre-written config file.
- Make sure to read your theme’s GitHub page (or README). Most of the information you need should be here.
- If you are still missing information, google it. Hugo has many support pages with questions and answers from other Hugo users. These are your best resources for learning and understanding Hugo taxonomies and additional customization information.
Deploying with Netlify#
Once you have your website ready to go (aka you like what you see on your locally running version on localhost), it’s time to deploy your site! This information is also included in the previous link.
If you don’t already have a GitHub account, you’ll need to make one. This is where you will upload your code, not only for version control but also, in this case, for CI (Continuous Integration). Once your website is deployed, CI (which is supported by Netlify) will automatically deploy changes from your master branch. This means that once you commit to master and push to origin, Netlify will update your site automatically.
I like to use the GitHub desktop application. I would recommend using it if you like a more visual manner of keeping up with your repo updates.
Using a Custom Domain#
Remember when I said I took a different approach to making my website this time around? I started with building my site instead of starting with choosing a domain. Only once I was already in the process of making the website, and had proved to myself that I was committed, did I purchase a domain.
Buying an Icelandic domain was a small process in itself. While anyone can buy an .is domain, there are a few steps involved in registering it. I won’t go into detail about those here, considering I doubt many (if any) of you are buying one.
Purchasing a domain on Namecheap is straightforward. Note that if you don’t want your personal information associated with your Namecheap account publicly available on WhoIs, you should make sure that your domain is elgiable to work with WhoIsGuard, which Namecheap provides for free. If it’s not, you can also check if your domain already has WhoIs protections in place under the GDPR (for EU domains).
Once I bought casey.is, there was a bit of a waiting period. It is normal to have some amount of a wait time each time you take an action related to the domain. The same went for adding my domain to Netlify.
This process is really simple with Netlify. Once you successfully deploy your website, it provides the option to set up a custom domain.
You’ll be told to change your nameservers to those provided by Netlify. You can do that under your domain settings on NameCheap. This link shows where to go to make these changes. Something to note here is that if your nameservers won’t save, there’s a chance that the ttl (time to live) provided by your domain does not fit Namecheap’s requirements (again, guess how I know this). If this is the case, simply start a chat session with Namecheap and someone will be able to help you out. I have found their customer service extremely satisfactory.
After you add your custom domain, you’ll be able to get HTTPS set up, and voila! Your website is running and secure.
You have a website!#
Congratulations, you now have your own website up and running! If you find this post helpful when making your website, let me know; I’d love to check it out!
If you notice problems with any of the steps I’ve included, please reach out to me. I understand the pain of incomplete tutorials and want to help where I can.