In the past few posts, I have discussed how I have 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
/publicfolder) 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.1 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! Sweet!
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
.gitdirectory from any theme directory. If you need to update the theme in the future, you will need to
git cloneagain and remember to delete the
- Install the theme as a submodule, which can be accomplished using the following steps from your Hugo website directory:
git submodule add https://github.com/oneleaftea/milano.git themes/milano git submodule init git submodule update
And when you need to get theme updates in the future:
git 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
- On your local machine, use the terminal to navigate to your Hugo website folder and enter the following commands:
git init git add . git commit -m "first commit" git remote add origin firstname.lastname@example.org:oneleaftea/sample-repo.git git 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:
- Publish directory:
- Under Advanced Build Settings:
- Build command:
- 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.
As mentioned in my previous post on Netlify, 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. It is an awesome resource!
- Actually, I was the one that made the pull request and submitted the bug-fix. Thanks to the Hugo team for accepting my pull request! ↩