Netlify's Awesome Build Process

Well I went and moved all of my static websites from AWS S3/Cloudfront to Netlify. There are two ways to build a Hugo (or other static website generator) website on Netlify:

• Generate the Hugo website locally, and push the generated files (the files in the /public folder) to a Github repository. Point your Netlify website to this repository and it will automatically update.
• Push the Hugo source files for your website directly to a Github repository and let Netlify build the website.

Whereas the second option is awesome, I chose the first option because I had to do some post-processing of the generated raw html files before uploading the files.

However, since the release of Hugo 0.27 a couple days ago, a bug was fixed that no longer required me to post-process the html files.¹ This means I can now let Netlify build my site. This is great, because I can update the site from anywhere now, without having Hugo installed. I can simply upload a new markdown post to my Github repository and Netlify will autodeploy it.

Here is the process for doing this, assuming you already have a Hugo website you can generate locally.

Step 1: Prepare your Hugo website

Normally, when you build a Hugo website, you might go to your themes directory, and git clone a theme from a Github repository. If you do this, you will need to do one of the following:

• Delete the .git directory from any theme directory. If you need to update the theme in the future, you will need to git clone again and remember to delete the .git directory again.
• Install the theme as a submodule, which can be accomplished using the following steps from your Hugo website directory:

1git submodule add https://github.com/oneleaftea/milano.git themes/milano
2git submodule init
3git submodule update

And when you need to get theme updates in the future:

1git submodule update --remote themes/milano

Step 2: Create a Github repository and link it to your local Hugo website.

• Go to your Github main page and click “Start a Project”.
• Copy your url. I usually use SSH, so it would look like [email protected]:oneleaftea/sample-repo.git.
• On your local machine, use the terminal to navigate to your Hugo website folder and enter the following commands:

1git init
2git add .
3git commit -m "first commit"
4git remote add origin [email protected]:oneleaftea/sample-repo.git
5git push -u origin master

When you make changes in the future, simply use the git add/commit/push process to upload to your Github repository.

Step 3: Create a Site on Netlify

• Login to your Netlify account and click “New Site from Git”.
• It will prompt you to choose Continuous Deployment from either Github, Gitlab, or Bitbucket. I am using Github, so I would click “Github”.
• If you are logged into your Github account already, it will prompt you to choose a repository. Choose the one you just created.
• You will then choose a branch to deploy (i.e. master) and then for basic build settings, I use the following settings:
  • Build command: hugo
  • Publish directory: public
  • Under Advanced Build Settings:
    • Key: HUGO_VERSION
    • Value: 0.27
• Click “Deploy” and if all goes well, your site should be published in a matter of minutes.
• When you push new changes to your Github repository, your Netlify website should deploy the changes within minutes.

There are a lot of advantages that Netlify has over S3/Cloudfront. Besides being easier to setup, it also automatically invalidates the CDN files when necessary. Normally, a CDN caches files and checks for changes periodically, which means site updates can take a day or so to become live. However, Netlify automatically invalidates these files forcing the CDN to get new changes from the source everytime it deploys a new version. With AWS Cloudfront, you would need to send an invalidation command from the commandline (or from their Web UI).

I highly recommend Netlify for your static websites.