If it’s not on the internet, it doesn’t exist.

- Austin Kleon, Show Your Work!

For a few years, I wanted to build a personal website for creative projects and blog posts. When I decided to build this site about a year ago, I wanted to try the crazier—but more affordable—route. Instead of just building a website with Squarespace, I wanted to extensively research the best and most cost-effective tools to make a website, and learn how to use them.

Part of the difficulty was that there were very few guides for making a website using certain tools, and many of them aren’t written for laypeople—so I had to do a lot of research online. I’m not very familiar with web development, and I’m quite new to coding, so I had to learn lots of new jargon, tools, and terms as well.

So here’s what I learned during my research on building a website, and how I made this website with Hugo and Netlify:

What I Needed to Make a Website

I found that these are the three main things one needs to make a website:

1. A custom domain name
2. A website building tool
3. A hosting service

1. A Custom Domain Name

Domain names are the addresses used to access websites: like sarahmakmq.com for this website. A website doesn’t technically need a custom domain name—when you get a hosting service, the hosting service can provide domain names with their top-level domain. For example, Netlify’s top-level domain is netlify.io, and they provide domains like yourname.netlify.io for free. But it looks ugly and unprofessional, so I still wanted my own custom domain.

To get a custom domain name, I needed to buy it from a domain name registrar such as GoDaddy or Cloudflare.¹

From what I read, the registrars people often recommend are Cloudflare, Porkbun, and Gandi. I opted for Cloudflare as they were among the cheapest options (they offer domain names at cost), and they had a few additional conveniences.

They have an email routing service, which can forward emails sent to my custom domain’s email accounts (like [email protected]) to my personal email account. Since I also use Gmail’s “send mail as” setting,² I could also send emails as [email protected]. Hence, I didn’t need to buy an email account for my custom domain to use it as an email!

Furthermore, Cloudflare has one of the best DNS services at the moment, and purchasing a custom domain through Cloudflare meant that Cloudflare automatically configured my DNS to use their services, saving me a little time.

I also read that I shouldn’t buy a domain name from GoDaddy, as they have a history of overcharging customers and poor customer service. Many do not recommend buying domain names from registrars owned by Newfold Digital (formerly known as EIG) either. EIG had a history of security issues and poor customer service too. The company owns many popular registrars, such as Bluehost and Hostgator, among others—here is a list of them.

2. A Website Building Tool

Vanilla HTML, CSS, and JavaScript

It’s possible to code a website with raw HTML, CSS, and JavaScript, and/or use a framework like Bootstrap. But I’m not familiar with these languages, and I think learning to use them well would take months. Even then, the final website could look ugly—I think one also needs strong graphic design skills to make a website look good, and felt that it would be more effective and efficient for me to learn from existing themes.

Thus, I wanted to use a website building tool that would be easier to use, and one that had good-looking themes.

WYSIWYG Editors

I think when a lot of people think of a website building tools, something like this comes to mind:

This is a WYSIWYG (What You See Is What You Get) editor, which allows users to drag and drop visual elements without writing any code. For example, Squarespace, Wix, Weebly, WordPress.com, and Webflow have WYSIWYG editors. WordPress.org (which is different from WordPress.com)³ also has WYSIWYG website building plugins such as Elementor and Oxygen Builder.

But having tried Wix and Weebly during school projects before, I always felt that I was fighting against their WYSIWYG editors, instead of working with them. I’m used to working with Adobe Illustrator, and WYSIWYG editors didn’t have the shortcuts and precision that Adobe Illustrator had, so it was difficult to position elements precisely. To add to that, the website elements often broke, turning the final website into a mess of lines and shapes. WYSIWYG editors also tend to produce bloated and slow websites, so I didn’t want to use them in the long term.

Static Site Generators (SSGs)

An alternative was to use a static site generator (SSG), like Jekyll, Hugo, Gatsby, Eleventy, Astro, Nuxt, or Next.js. They require some digging into code, but they are still easier than building a website from scratch. Plus, the popular SSGs are free and open source, while many WYSIWYG editors require a subscription to use.

Plus, static sites have lots of advantages over dynamic sites. They tend to be faster as they consist of HTML files that are rendered ahead of time, while dynamic sites are built in the server on the fly. Dynamic sites also require web servers capable of running code, while static site files just need to be stored on the server—so the hosting costs for static sites tend to be lower. Since static sites don’t have server-side scripting, they tend to be more secure, and are less vulnerable to threats and server vulnerabilities.

Instead of using a static site generator, it’s possible to turn a WordPress.org site to a static site using plugins. However, I didn’t want to use a WordPress site, since using too many plugins can make it run slowly. I was also concerned that some WordPress themes and plugins had compatibility issues with static WordPress sites. Moreover, I read that it’s possible that WordPress plugins can break, so I would need to keep updating and maintaining them, and I didn’t want to spend too much time looking after this site due to issues beyond my control. Hence, I wanted to use a dedicated static site generator instead.

Between the static site generators, I considered using either Jekyll or Hugo, since they are popular and often recommended.

Many people use Jekyll alongside GitHub Pages as a hosting service, since GitHub Pages is free for public repositories. But I wasn’t keen on using GitHub Pages.

GitHub Pages is only available for private repositories if the user has a GitHub Pro, GitHub Team, GitHub Enterprise Cloud, or GitHub Enterprise Server plan—but not a free GitHub plan, so my repository would need to be public, and I would need to be more careful about saving private information to the repo. Since I’m a student, I could redeem a GitHub Pro plan and use a private repository. But my plan will only last for two years, so it isn’t a long-term solution, and my private repository would be locked after my plan expires.

Published GitHub Pages sites cannot be larger than 1 GB as well, which seems a bit too low.

Another issue is that GitHub Pages hasn’t updated their version of Jekyll for years, so I may need to migrate from GitHub Pages in the future anyway.

Instead of using GitHub Pages to host the site, I could use Jekyll and another hosting service, but it seemed that some people were moving away from Jekyll to Hugo. Jekyll’s development is slowing down, and Hugo has faster build times for very large websites—and since I wanted to use something that could scale, Hugo seemed to be the better option. Thus, I wanted to use Hugo instead of Jekyll.

But the good thing about Hugo is that it has many professional-looking themes I could learn from, so I didn’t need to design the website from scratch. (The issue with some SSG options is that they didn’t have as many good-looking themes.)

3. A Hosting Service

Since I’m was planning to use a static site instead of a dynamic one, hosting costs were likely to be cheaper, and I could pick a hosting service specialised for static sites.

Some options include GitHub Pages (as mentioned before), Cloudflare Pages, and Netlify. I opted for Netlify since it has a generous free plan, and easily deploys from GitHub.

I haven’t busted Netlify’s free plan limits yet—the bandwidth is 100 GB a month, and the build minutes are 300 minutes a month, while my current usage is far below that. So, I haven’t had to pay for my hosting at all!

Since Netlify can publish a site automatically from GitHub, I can use GitHub to manage my Git repo, and whenever I push changes to my GitHub, Netlify automatically rebuilds my site—which is really convenient.

Netlify has many other features as well, like a CMS and forms (which is what I used for this site’s contact form).

Improving the Website

After setting up the template, I adjusted it in several ways—here are a few of the changes I made.

To make the website look the way I wanted, I edited the HTML and CSS files. I’m not familiar with HTML, and I honestly just Googled my way through any issues. (Now with ChatGPT, solving coding problems is much easier.)

I followed a few guides on moonbooth.com (which has a few guides on Hugo), such as making a custom 404 page and changing my Netlify settings in netlify.toml. I also used some add-ons from Hugo Codex, such as their YouTube shortcode,⁴ Vimeo shortcode, and ability to open external links in a new window.

Since I use VS Code to write my code, I also added some VS Code code snippets for my personal website’s workspace—the code snippet function is basically VS Code’s text expander, so when I type cl-figure, it expands to form {{< cl-figure data-src="" alt="" caption="" class="center-text" loading="lazy" width="" >}}, my shortcode that generates an image that has been hosted on Cloudinary.⁵

To comply with legal requirements, I also added a terms and conditions page generated by Termly and a privacy policy page generated by Iubenda.

Although I added several features to the site, I disabled some of the features I worked on, such as a light/dark mode switcher (so this website is now permanently in light mode). I realised that every feature I keep is a feature I need to maintain—and I don’t want to maintain too many unnecessary features.

A Conclusion

If I wanted to save some time, I could have bitten the bullet and paid for a Squarespace subscription—being someone with no web development experience and little coding experience, I did have to spend time to learn to use Hugo and Netlify.

However, in the long term, using this site will be way cheaper than using Squarespace. Currently, to keep this website up, I only need to pay for Cloudflare’s custom domain registration (US$9.77/year). If I want to use Squarespace, however, I would need to pay for Cloudflare’s domain registration, and pay Squarespace’s business plan (US$31/month) in order to add custom code,⁶ making the total cost about US$31.81 a month—and most of the cost would be due to using Squarespace.

Since I may keep this website up as long as I’m alive, and as long as the internet is a relevant tool for communication, choosing to make my website myself can save me money in the long run. Also, I enjoyed learning about web development and it was fun learning to use new tools!