Fast & Fun Site Creation with Hugo
This tutorial walks you through the basics of deploying a Hugo-powered site on the FaktorZ. 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 FaktorZ 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 FaktorZ. You’ll need to have a basic site built. You can always add, update, and make changes later
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 FaktorZ 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 FaktorZ’s Hugo example site.
- On GitHub, navigate to https://github.com/faktorz/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 FaktorZ
Once you have the example Hugo site source code and static files in your own public repository, you can use FaktorZ to build your Hugo site and deploy it with a public URL.
Login to your FaktorZ account, and go into your project workspace.
Click Add to Project ->Browse Catalog and in the catalog search field 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 FaktorZ 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.

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

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.

From now on, all pushes to your GitHub repository will trigger a new build and deployment!
Configure the Routes
FaktorZ 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 FaktorZ 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
FaktorZ
GitHub
Homebrew
FaktorZ Documentation
Author: Noel Cothren https://github.com/anc02d
Originally published at community.thedigitalgarage.io on July 21, 2017. Updated July 1st, 2018 by John McCawley

