Fast & Fun Site Creation with Hugo and Digital Garage

Overview

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.

Prerequisites

This tutorial assumes you have:

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:

  1. 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.

  2. You can also create a brand new site to deploy in minutes using the process outlined in Hugo’s documentation.

  3. 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.

Click Add to Project, and search for Hugo. Choose the Hugo Quickstart.

Catalog Search

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.

Click Create and your site will begin building itself.

View your site by clicking on the route in the Web Console’s overview page.

App Overview

(Site not there? You probably need to update the baseURL in Hugo’s config.toml file - we’ll do that next)

Add Webhooks

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.

webhook url

In your GitHub repository, click Settings then Webhooks then Add webhook.

Paste in the payload URL, change Content Type to application/json, click Disable SSL, and Create.

github webhook add

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.

route

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.

Final Thoughts

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!
Enjoy!

Reference Links:
[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