< Back to the Lab

Build a Static website with Cloud9, Hugo and App Engine

by Pascal Aubort · Jan 4, 2017

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.

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

First download the binary into a temp folder. At the time of writing the version of Hugo is 0.18. Check out the releases page for latest packages.

# Download the binary into the `/tmp/` directory 
$ wget -P /tmp/ https://github.com/spf13/hugo/releases/download/v0.18.1/hugo_0.18.1-64bit.deb

Now you can extract the content and install

$ sudo dpkg -i /tmp/hugo_0.18.1-64bit.deb

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.18 BuildDate: 2016-12-02T10:24:31Z

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 home.md

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

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

+++

Our first Hugo site running on C9 IDE

Using a theme

Hugo comes with plenty of cool themes which can be added and used as follow

First download the themes from the Hugo git repository

$ git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

You should see all themes arranged each in a directory within the /themes/ directory.

If you know which theme you will use, you can also download a single theme

# Go to the themes directory
$ cd themes

# Download the theme to be used
$ git clone https://github.com/pdevty/material-design.git

You can find the list of all themes in this git repository

In your config.toml file, define which theme to use, as an example, the material-desing theme. Your config file should look like this at this stage.

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "material-design"

The theme value in the configuration file should correspond to the directory name of the theme to use. You will find more information on themes here

Run and Preview your website

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

hugo server --baseURL=http://<workspaceName>-<username>.c9users.io/ --bind=0.0.0.0 --port=8080

Note: Be sure to replace workspaceName and username by your project values. In our case, this would become hugo server --baseURL=http://hugo-tutorial-c9-aubort.c9users.io/ --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!

...
Web Server is available at http://hugo-tutorial-c9-aubort.c9users.io:8080/ (bind address 0.0.0.0)
...

The content page we have created previously is not displayed on the home page because it is in draft mode (draft = true in the frontmatter of the home.md file). In order to publish it, you can either change this parameter to draft = false or add the flag --buildDrafts=true in the hugo server command.

hugo server --baseURL=http://<workspaceName>-<username>.c9users.io/ --bind=0.0.0.0 --port=8080 --buildDrafts=true

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 (Preferred method)

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

$ /usr/bin/env python -V

Download the Google Cloud SDK into the /tmp/ directory. At the time of writing the SDK Version is 138.0.0. Check out the release page for more recent versions.

$ wget -P /tmp/ https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-138.0.0-linux-x86.tar.gz

Extract the SDK into /usr/local/lib

$ sudo tar -C /usr/local/lib/ -xvzf /tmp/google-cloud-sdk-138.0.0-linux-x86.tar.gz

Before you continue with the installation, 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. From there, click on Create project add a project name and create.

Install the SDK and follow the instructions in the terminal

$ sudo /usr/local/lib/google-cloud-sdk/install.sh 

Make sure to start a new shell for the changes to take effect.

Change the owner of the SDK so that it can executed without sudo

$ sudo chown -R ubuntu /home/ubuntu/.config/gcloud

Now authenticate with Google Cloud SDK

$ gcloud auth login

List all your projects

$ gcloud projects list

PROJECT_ID      NAME                   PROJECT_NUMBER
project-1       Project Alpha          123456
project-2       Beta test              56678
project-3       Gammapp                394720

Set the project you will be using for your deployment. Make sure you use the ID and not the project number!

$ gcloud config set project <YOUR-APPENGINE-PROJECT-ID>

Using the Go Appengine SDK (Alternate method)

Download the Go SDK into the /tmp/ directory

$ wget -P /tmp/ https://storage.googleapis.com/appengine-sdks/featured/go_appengine_sdk_linux_amd64-1.9.38.zip

Unzip the SDK into usr/local/lib

$ sudo unzip /tmp/go_appengine_sdk_linux_amd64-1.9.38.zip -d /usr/local/lib/

Add the go_appengine directory to your PATH

$ export PATH=$PATH:/usr/local/lib/go_appengine/

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

$ /usr/bin/env python -V

Make sure to build your site using hugo command before deploying your app!

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")))
}

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.

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

 

 

Read more!