Fast & Fun Site Creation with Hugo

John McCawley
Jul 21, 2017 · 4 min read

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:

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

FaktorZ makes creating automatic updates with GitHub Webhooks easy.

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

FaktorZ

FaktorZ is a platform as a service (PaaS) that enables developers to build, test and run applications on Kubernetes.

)

John McCawley

Written by

FaktorZ

FaktorZ

FaktorZ is a platform as a service (PaaS) that enables developers to build, test and run applications on Kubernetes.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade