Hugo Cloud Deployment with Netlify
Published: |
Updated:
| by Julian Knight Reading time ~3 min.
📖 Kb
| 📎None
| 🔖None
Netlify is a great cloud-based hosting and CDN service. It has great support for Hugo and other static site builders and is easily integrated into cloud-based GIT services. This makes deployment and updates a snap.
On this page, we list a few snippets of information that help us remember how to do things.
GitLab TotallyInformation Dashboard
My new site creation workflow 🔗︎
- Create a new private repository on GitLab - this will host the source for the site which we keep private.
- Clone the new repo to your development device.
- Use the clone folder to create a new site.
- Clone a suitable Hugo theme as a GIT submodule to the
themesfolder. - Make any changes or add content as required.
- Commit changes for the site repo and sync back to GitLab.
- Create a new site in Netlify that uses the GitLab repo.
- Configure Netlify as required.
- Updates to GitLab will now automatically rebuild and deploy the site.
If I want to have an online editor, I will also link up Forestry.IO.
My site update workflow 🔗︎
- Make updates to the site.
- Commit changes for the site repo and sync back to GitLab.
- Netlify automatically rebuilds and deploys the site.
Test/Preview and other temporary deploys 🔗︎
To test or preview a site change without disturbing live, all that is needed is either:
- Create a Pull Request (AKA a Merge Request) in GitLab. Typically, this comes from someone outside your repo/organisation.
- Create a GIT branch. This can happen on the development device or in GitLab.
Each PR/branch is given its own URL.
Configuration of PR/branch versions is done via the netlify.toml file in your site repo.
Netlify Hints & Tips 🔗︎
Netlify provides a number of environment variables. They are described in the docs here.
It is easiest to configure Netlify using the netlify.toml file you include in the root of your site repository.
Details on what goes in there are in the docs here.
Netlify provides a Forms capability. I use this to provide a contact form on this site. Data is fed back into the dashboard but you can also use Netlify’s webhooks to provide alerting for new form submissions. I have this wired up to alerts via my Slack org.
In addition to the netlify.toml control file that you put in your site root, Netlify provides two additional files _redirects and _headers. Their use is pretty obvious but worth noting that you can test those files using Netlify’s online test pages: Test _redirects, Test _headers. Simply paste the content of the files into the test pages.
Redirects 🔗︎
It isn’t clear in the documentation but the _redirects file has to be in your static delivery folder, /static by default for Hugo. The file is not actually made accessible from the web. However, be careful if you ever move to alternative deployments since the file WILL then be available via the web.
Alternatively, use the redirects test page to convert to TOML format and include that in your /netlify.toml file.
