This tutorial walks you through the basics of deploying a Hugo-powered site on the Digital Garage. If you’ve never used Hugo before, you’re in for a treat - it’s fast and fun!
Hugo is a static site generator based on Golang’s template package.
According to Hugo’s authors:
“We think of Hugo as the ideal website creation tool. With nearly instant build times and the ability to rebuild whenever a change is made, Hugo provides a very fast feedback loop. This is essential when you are designing websites, but also very useful when creating content.”
Development with Hugo on your local machine is fast. After you’re happy with your site’s basic template, you can put it on Digital Garage for further development with peers, or for a quick and easy way to show it the world.
This tutorial assumes you have:
- a Digital Garage account
- a GitHub account
- Git installed locally
- Hugo installed locally (I used Homebrew. )
Begin Development Locally with Hugo
Since Hugo’s built-in server and small footprint make development so easy, we will build on our local machines first, then deploy to Digital Garage. You’ll need to have a basic site built. You can always add, update, and make changes later — Digital Garage makes creating automatic updates with GitHub Webhooks easy.
There are three options covered here:
If you’ve never used Hugo, I recommend trying out their Quickstart Guide. In less than 30 minutes you can have a ‘bookshelf’ site to deploy to Digital Garage using the instructions below.
You can also create a brand new site to deploy in minutes using the process outlined in Hugo’s documentation.
The fastest way to get going is to fork and clone the Digital Garage’s Hugo example site.
- On GitHub, navigate to thedigitalgarage/hugo-ex repository.
- In the top-right corner of the page, click “Fork”.
- Next, execute the following commands on your local machine to clone the sample application and change to the new directory:
$ git clone https://github.com/<your_github_username>/hugo-ex
$ cd hugo-ex
Deploy Your Site on Digital Garage
Once you have a Hugo site in your own public repository, you can use the link to deploy it on Digital Garage.
Login to your Digital Garage account, and go into the project workspace you’ll be using.
Add to Project, and search for Hugo. Choose the Hugo Quickstart.
Change the name and enter the git repository URL of your own Hugo project. Change any other parameters you see fit. You can apply your own labels, override the default labels, or even set the branch/relative path of your repository — check out the Digital Garage documentation for more information.
Create and your site will begin building itself.
View your site by clicking on the route in the Web Console’s overview page.
(Site not there? You probably need to update the baseURL in Hugo’s config.toml file - we’ll do that next)
Before changing your site’s baseURL, let’s set up a Webhook to automatically update the site whenever you push new code to GitHub.
First, go to the Web Console. Under Builds, click on your site name and go to Configuration. Copy the GitHub Webhook URL on the right-hand side.
In your GitHub repository, click
Paste in the payload URL, change
Content Type to
Disable SSL, and
From now on, all pushes to your GitHub repository will trigger a new build and deployment!
Configure the Routes
Digital Garage automatically made a route for you, but it needs to be updated in the Hugo config file.
First find the route on the Web Console’s Overview page, next to your site title toward the top.
Copy that link, go into your Hugo site’s config.toml file, and paste it into the
baseURL parameter. If you want to route to a different domain name, you can create a new route. See the Digital Garage documentation to learn more.
Now, push your changes to GitHub and go back to the Web Console to see your site automatically re-build itself.
In development, you’ll probably want to work on your local machine with Hugo server running, then push changes to GitHub once satisfied.
Adding content is as easy as adding a new markdown file to the content directory, and pushing it to GitHub to publish!
[Hugo]: https://gohugo.io “Hugo”
[Digital Garage]: https://thedigitalgarage.io “Digital Garage”
[GitHub]: https://github.com/ “GitHub”
[Homebrew]: https://brew.sh/ “Homebrew”
[Digital Garage documentation]: http://docs.thedigitalgarage.io/ “Digital Garage Docs”
Author: Noel Cothren https://github.com/anc02d