I used Hugo to build the website, and AWS (Amazon Web Services) to handle deployments, register the domain and serve the website over the internet. Initially, I planned to create a step-by-step guide about building this website, but there are already many guides out there. Instead, I’ll give an high level overview with links to the resources I found useful.
Hugo Link to heading
Hugo is an open-source static website generator written in Go, a programming language. It’s great for templating your HTML. This means that if you want to make a change to the navigation bar (like the one above), you would not need to edit every single page. Since it’s templated, updating it in one place is sufficient.
Starting with Hugo is easy. Just follow their quick-start guide, which will have you up and running a website locally in minutes. Then, explore their catalogue of free community themes, to find the layout which works for you. I do not recommend creating your own theme right off the bat, since it will be time consuming and potentially overwhelming.
Once you set this up, you’re ready to create content. In my case, I had to fix some issues with the theme, such as overflow issues when rendering RTL (right-to-left) languages on mobile, inability to disable JavaScript and issues with background colour on Safari. I encourage anyone who makes improvements to a theme to contribute back to the original repository, so that it can benefit all. In case you have not, this is a great way to start contributing to open-source projects.
AWS Link to heading
My choice to use AWS was driven by my existing familiarity with the platform and that it has all the tools needed for the job.
Creating your domain Link to heading
Before getting into AWS specifics, let’s talk about domain registration, the fun stuff. As you can probably see mine is muqta.com, to register your domain just follow this guide: Registering a Domain.
Serving your Website Link to heading
To serve the website we will use a combination of Amazon S3 and Amazon CloudFront.
S3 Link to heading
Let’s start with S3 where your website will be stored and served. Here is a simple tutorial for creating a static website hosted on S3. Once completed, you can upload an index.html file, or your public/ directory after building your site with Hugo, into an S3 bucket. Copy the S3 URL into the browser of your choice, and voilà!
CloudFront Link to heading
Next, CloudFront which acts like a speed booster for your website. Here is how it works, imagine your site is hosted in eu-west-1 (western Europe) and someone from America vists your site. Using S3 alone, their request would have to travel under the atlantic, causing delays. Instead, CloudFront runs on many small nodes globally, where a cache of your website will be stored. So our American friend here will be able to load your site from nearby stash. Setting up CloudFront is detailed in this guide.
Note: I found that this set-up requires your S3 bucket to be configured as a static website and public. If you make your bucket private and point CloudFront to the index.html, it correctly display the root page (like muqta.com) but not subsequent pages such as /about. If anybody figures this out please contact me ✉️
Putting it all together Link to heading
Remember that CloudFront caches your website in locations across the globe, creating long-lived caches. This means that even if you upload an updated index.html to S3, Mr America might still see your old site. To prevent this, you must invalidate the CloudFront cache after each deployment.
I later discovered that Hugo integrates with multiple hosting providers, including AWS. Using hugo deploy, you can update your S3 bucket and also invalidate their CloudFront cache in one swoop. For more details, check out this documentation, which includes steps for setting up your AWS environment. I strongly recommend using hugo deploy, as it handles many pain points, such as determining which files have been updated and wether or not the cache needs invalidating.
Cost & Peformance Link to heading
CloudFront is affordable, usually less than a dollar a month, although it depends on the number of requests. SimplyExplained, a blogger and youtuber, did some great work benchmarking various static website hosting providers, and found that CloudFront had the lowest median latency. Check out their impressive work here.
Shall we? Link to heading
Pat your self on the back, because now you are ready to make content! Hugo’s documentation for creating content is fantastic. Be sure to check your theme of choice’s documentation too. I also found it useful to look through the GitHub profiles of contributors to the theme you are using, since most of their websites code will be public. You can use their work as a starting point.
To check how your page is peforming, I found pagespeed (built by Google) to be very effective for benchmarking my site’s performance and SEO (search engine optimisation) on mobile and desktop. It also provides advice on improvements and best practices such as optimal CSS, image sizing, etc.
Benchmark results for my /about page
The go to documentation for anything HTML or CSS related is MDN Web Docs and for best practices web.dev
Right, looks like it’s time for blastoff 🚀
Good luck 🍀
Final thoughts Link to heading
All in all, this was a really pleasant process and I am really happy that I decided to use Hugo. Originally, I was building my website with JavaScript, since it was all that I really knew. It was slow, clunky and did not have the feel I wanted. It was also taking a long time to develop.
I would definitely recommend Hugo to developers as long as it meets their requirements. I would also recommend it to people with zero development experience provided they have even the slightest of interest in learning about web development. Hugo is a great starting point. It’s user-friendly enough for beginners to create a beautiful site without much development experience, whilst maintaining depth and customizability. Learning the basics of hosting and version control can be broadly beneficial, especially for your career.
And, who knows where the path will lead? Hugo can be an excellent gateway into the world of web development and software engineering in general.
Until next time 🌹
swoosh