How to build a static site using Cloud9, Hugo and hosted on App Engine (GAE)

By Pascal Aubort — Jan 4, 2017 in How To

Update - 16 June 2018

The contributors on the Hugo Static Site generator have all been working hard and doing an amazing job in terms of improvements and features, so I updated this post so that it reflects the changes to the process.

When I first founded Loyall GmbH, it was pretty obvious the first thing I needed to get the ball rolling, was to have a website (yea, really :). I first stared by putting down a laundry-list of criteria that were important to me:

Flexible and that I can code and myself
Code from anywhere
Integrates with Analytics tools
Support for AMP (Accelerated Mobile Pages) -> Fast
Multilingual
Cheap

After having done some research on the obvious CMS - wordpress and the likes - I didn’t think that any of them would fulfill all (or enough in my opinion) my laundry-list.

In my previous job, I became familiar with various static site generator and developed the concept for writing and hosting the Opencast Documentation using MkDocs.

It seemed to me that a Static site would be a good option for me. I didn’t need anything fancy with databases and so on. So I came across Hugo Static Site Generator, played with it and adopted it! I am not a software engineer, but enjoy coding, and that was easy enough for me to setup and use. It was flexible enough so that I can build my site myself, create my own templates, use GitHub to store the source files and serve it on Google App Engine. One thing that remained was the ability to edit it from anywhere - which is definitely an advantage of using a CMS. To cover this part, I thought about using a Cloud IDE and started using the free version of Cloud9.

Now that I had the tools selected I needed to figure out my workflow about developing, building and hosting my website. In this article I will go through the steps of creating a simple website with Hugo on Cloud9 and host it on Google App Engine - using the go runtime.

Getting Started with Cloud9

To get started, create an account on Cloud9 (if you don’t have one yet) and from there create a new workspace (c9.io) using the “Blank” template. This will create an empty Ubntu workspace with minimal dependencies installed.

Cloud9 is now a Amazon AWS product

If you don’t have a legacy cloud9 account, you will need to create an Amazon AWS account to use Cloud9.

Installing dependencies

Make sure Go is installed and available in the workspace using the following command

$ go version

If go is not installed, check out the doc on how to install it.

Installing Hugo

You will find more information on Hugo website Installation doc

In this tutorial we will use govendor as it is described on the official doc.

First, set the gopath of your environment. To do so, open your ~/.profile file and add the following lines at the bottom of it.

export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin

Once done, reload the profile file using the $ . ~/.profile command or just close and reopen the terminal. Now make sure that the $GOPATH variable is properly set

$ echo $GOPATH

--> this should print /home/ubuntu/go

Install from GitHub

go get github.com/magefile/mage
go get -d github.com/gohugoio/hugo
cd ${GOPATH:-$HOME/go}/src/github.com/gohugoio/hugo
mage vendor
mage install

From the workspace, type $ hugo version in the terminal. You should see something similar to this appear, which means Hugo has been properly installed.

Hugo Static Site Generator v0.43-DEV-42ED6025 linux/amd64 BuildDate: 2018-06-17T08:23:32Z

You can find all releases of Hugo on the official github repo

Creating your first site

At the root of the workspace, create a new Hugo site.

$ hugo new site ./ --force

Since the Workspace already contains some files/directories (.git, .c9, etc), we need to add the --force flag when creating the site.

We can now create our first content page

$ hugo new _index.md

This will create a new content directory and a _index.md file. Go ahead and open it and type something below the headers.

+++
date = "2016-07-06T16:41:00Z"
draft = false
title = "home"

+++

Our first Hugo site running on C9 IDE

Now, in the layouts directory, create your index.html file with just the following content in it

<!DOCTYPE html>
<html>
    <head>
        <title> {{ .Title }}</title>
    </head>
    <body>
        {{ .Content }}
    </body>
</html>

Run and Preview your website

Now you can preview your new site using the following command:

hugo server --bind=0.0.0.0 --port=8080

Some information will be printed in the terminal and the URL of your running application will be displayed. Click on it and you should be able to see your new site!

Here is an output example from my terminal

Started building sites ...
Built site for language en:
0 draft content
0 future content
0 expired content
0 regular pages created
6 other pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 3 ms
Watching for changes in /home/ubuntu/workspace/{data,content,layouts,static}
Serving pages from memory
Web Server is available at http://localhost:8080/ (bind address 0.0.0.0)
Press Ctrl+C to stop

Using a theme

For the sake of using the latest information from Hugo, just check out the theme section of the official documentation.

Hosting on Google App Engine (GAE)

Now that our first site is ready to be deployed, we will use Google App Engine (GAE) to store the files and serve our website.

Download and install the Google Cloud SDK

Make sure Python 2.7.x (and not higher) is installed

$ /usr/bin/env python -V

There are multiple ways to install the gcloud SDK, you can check the documentation on the Google Cloud official website.

In our case, I’ve opted for the interactive installer, which will let us install modules as we need them - which is not the case with apt-get.

In your terminal, type the following command

curl https://sdk.cloud.google.com | bash

This will start the interactive process of setting up the SDK on the machine. It will ask you for the preffered location. In our case I’ve used /home/ubuntu/lib. Just follow the prompts until it says that everything has been installed. Now you should open a new terminal to start using the gcloud client. In your new terminal, just type gcloud version and you should see something similar to this output.

Google Cloud SDK 166.0.0
bq 2.0.25
core 2017.08.07
gcloud 
gsutil 4.27

In order to deploy our site to App engine, we still need to install the app-engine-go component. To see which components are installed, just use

gcloud components list

This will print out the list of components and their installation status.

Let’s install the app engine component for go using this command

gcloud components install app-engine-go

Follow the prompts until it says that it’s been properly installed.

Create your Google Cloud Project

Before you continue with the configuration, you should make sure you have a Google Account and that you have activated Google Cloud Console. In order to do so, go to https://console.cloud.google.com/ and log-in with your Google Account.

Using the gcloud utility you can create a project from your terminal.

gcloud projects create hugo-on-gae --name="Hugo on GAE"

You can also create a project from the cloud console.

Make sure that you also activate the Google Compute Engine API for the project from this link

You can now start with gcloud initialization using

gcloud init

Follow all the authentication steps and the following prompts to initialize your project.

Create your App Engine Config

Create an App Engine application file app.yaml at the root of your workspace (same level as the config.toml file) and add the following content to it.

runtime: go
api_version: go1

handlers:
- url: /.*
  script: _go_app

Now create the main.go file - still at the same level - and add the following content

package main

import "net/http"

func init() {
	http.Handle("/", http.FileServer(http.Dir("public")))
}

Only 2 more steps left.

You should now build your site using

hugo

This will create the public directory that will contain your static files.

At this stage your application is ready to be deployed. Run this command to deploy your application.

$ gcloud app deploy

Now go to the Google Cloud Console, in the “versions” tab (https://console.cloud.google.com/appengine/versions) you should see a newly deployed version for your project.

You can also type the following to have the website’s url displayed

gcloud app browse

Well done! Your app is now running under https://YOUR-PROJECT-ID.appspot.com.