Hugo + Netlify = awesome!
Hugo and Netlify have really simplified the job for creating a website (static) quickly. Hugo makes content creation as simple as editing markdown files. Web hosting, deployment and TLS management are taken care by Netlify. By making content creation pipeline simple, flexibility to choose from plethora of themes and ease of deployment makes the combo really useful. There are other competitors like Next.js, Gatsby, jekyll, Nuxt etc. Some scenarios where Hugo and Netlify can really make a difference are listed below.
- personal blog
- designer portfolio
- blog for business
- documentation site for tools
- Wiki docs
Hugo and Netlify setup
Let’s try to understand what makes this combination really useful. Hugo is static site generator primarily based on Markdown for creating content. The Site can be customised using predefined themes from community or creating one from scratch. Once the hugo site is ready, deployment is as easy as commiting files to github. This is where Netlify comes into play. Lets review the steps to get started with the combination
- Install golang
- Install hugo and theme
- Create content using markdown files
- Create a netlify account
- Create a github repo
- Commit and deploy website to netlify subdomain (domain can also be done by configuring DNS with netlify)
The following installation steps are verified against Ubuntu 18.04
1. Install Golang
2. Install Hugo and theme
3. Create static content
More information about hugo is here
4. Create Netlify account
Netlify supports github/gitlab/bitbucket for account creation. After creating the account, it asks for connecting to github to read repository information, we have to login to our github account and approve netlify app with those permissions. Once done, then netlify can direclty connect to our github account and access any repository for website deployment in one of their subdomain. More information about Netlify can be found here
5. Create github repo
6. Deploy to Netlify
Deployment to netlify is as simple as authenticating netlify with github and selecting the github repo to build and deploy. Once the repo is selected, netlify automatically deploys the hugo application to one of hugo’s subdomain (automatically created). It also manages TLS for the subdomain so we dont have to worry about security. More articles about Netlify and hugo can be found here
Some of my favorite features which make hugo really standout are below
- Simple markdown based rendering
- REST api support (makes serving dynamic data)
- Ease of Deployment (mainly github and netlify)
- Live reload
We can simply focus on the content and not worry about web layout or design as there are plenty of preconfigured themes to choose. It is also relevantly easy to customise an existing theme or build one from scratch. I prefer to use a theme out of the box to save time.
Netlify has made deployment super simple. For starters it supports github/gitlab/bitbucket for scm, by default netlify deploys to its subdomain and they also support custom domain.
- Free hosting
- Built-in CI/CD
- Domains & DNS management
- Auto TLS certificate management using Let’s encrypt
My current domain provider is google but I have transferred the DNS settings to Netlify so I can use their auto deployment and tls management. There is only one downside to this setup, since I had to manage Google Workspace MX records in netlify’s DNS settings.