Setup a deploybot container for Hugo

This article gives you a quick tip how to setup a container in deploybot you can use for continuous deployments using services from deploybot. Deploybot is not for free but provides a couple of nice features to make deployments from any repository to almost any endpoint a piece of cake.

This article gives you a quick tip how to setup a container in deploybot you can use for continuous deployments using services from deploybot. Deploybot is not for free but provides a couple of nice features to make deployments from any repository to almost any endpoint a piece of cake.

All you need to follow these instructions you need to own an account at deploybot.com.

Create a new container

With deploybot, you can create pre-configured containers that you can reuse between different servers in your accounts. Your containers can be based either on an existing system containers or any other public containers from Docker registry. In our case, we create a new custom made container.

Log in to your account and navigate to Settings -> Containers. There you click on the + Create a container-button.

Next give the container a name you can remember for example gohugo-container in my case. Make this container based on existing built-in container Ubuntu 14.04 - PHP, NodeJS, Grunt, Gulp, Sass, Go, Java 7 / 8, RVM, Python. From there we need at least Go running Hugo.

In the Build commands we need to download the latest (or appropriate), Hugo 64-bit Debian package and install the package making hugo-command available in the console with the following two lines:

wget https://github.com/spf13/hugo/releases/download/v0.18.1/hugo_0.18.1-64bit.deb
sudo dpkg -i hugo_0.18.1-64bit.deb

Find the right link to the release package on Hugo release page on Github. In the example, we used Version 0.18.1.

In the release notes you can read to only use apt-get install hugo to install Hugo on latest Debian, but unfortunately, I was not able to manage this properly with the right Version:

output Preparing custom image for running build commands.
output The following NEW packages will be installed:
output hugo
output 0 upgraded, 1 newly installed, 0 to remove and 3 not upgraded.
output 0% [Working]
output Get:1 http://archive.ubuntu.com/ubuntu xenial/universe amd64 hugo amd64 0.15+git20160206.203.ed23711-1 [2,782 kB]
output 100% [Working]
output Fetched 2,782 kB in 2s (1,345 kB/s)
output Selecting previously unselected package hugo.
output Preparing to unpack .../hugo_0.15+git20160206.203.ed23711-1_amd64.deb ...
output Unpacking hugo (0.15+git20160206.203.ed23711-1) ...
output Processing triggers for man-db (2.7.5-1) ...
output Setting up hugo (0.15+git20160206.203.ed23711-1) ...

After we have a working container we go to our environment and click on **Servers & Settings”. Create a new server configuration or use a current configuration. While the general configuration is very individual, we skip this for now and head over to the Compile, compress, or minimize your code-Tab.

Here we select the recently created container (gohugo-container) as base and add simple build commands in the textarea below:

hugo

This command builds your Hugo site as you enter the command in your terminal while developing. With default settings, the static site content is stored in the /public folder. That is why we need to head over into the Advanced options-Tab and set the Source path to /public.

Save changes and done.


Actual setup on gohugohq.com

Currently, we worked with this setup to build this page but extended it with some node.js scripts that pre- and post-process the Hugo output.

Our container also includes a re-installation of node since we faced problems using the built-in version.

wget https://github.com/spf13/hugo/releases/download/v0.18.1/hugo_0.18.1-64bit.deb
sudo dpkg -i hugo_0.18.1-64bit.deb
sudo apt-get purge nodejs npm
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

In the environment server settings Advanced Options we use the Cached build commands to run npm install and a npm rebuild node-sass-command to only make resource intensive workload once and keep the results cached.

npm install
npm rebuild node-sass

Instead of running just the hugo-command in the Compiled, compress, or minimize your code-Tab we run a npm-command handling assets pre- and post-commands around the hugo command.

npm run build:prod

Ensuring the npm command above works correctly there is a package.json in the root directory with custom npm scripts as follows:

{
  "scripts": {
    "go": "npm run hugo:server",
    "hugo:server": "hugo server --buildDrafts --buildFuture",
    "hugo:watch": "hugo server --buildDrafts --buildFuture --renderToDisk",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:prod": "npm run theme:build && hugo && npm run theme:prism && npm run optimize:html",
    "optimize:html": "./node_modules/.bin/html-minifier --input-dir ./public/ --output-dir ./public/ --file-ext html -c ./.html-minifier-config.json",
    "theme:prism": "node ./.bin/syntax-highlighter",
    "theme:build": "node ./.bin/styling",
    "theme:watch": "./node_modules/.bin/nodemon -e scss -w ./ -x npm run theme:build",
    "content:watch": "./node_modules/.bin/nodemon -e html -w ./public -x npm run theme:prism"
  },
  "devDependencies": {
    "autoprefixer": "^6.5.3",
    "cssnano": "^3.8.0",
    "file": "^0.2.2",
    "html-minifier": "^3.1.1",
    "jsdom": "^9.8.3",
    "node-sass": "^4.0.0",
    "nodemon": "^1.11.0",
    "postcss": "^5.2.5",
    "prismjs": "^1.6.0"
  }
}

This is just an excerpt of the actual package.json file to give an impression of what happens when npm run build:prod runs.

The important line is:

{
    "build:prod": "npm run theme:build && hugo && npm run theme:prism && npm run optimize:html"
}

There we first compile the theme, next create the static site with hugo then replace some parts of the template with prism and optimize the html-output.

For further information about this process read the gohugo-amp theme documentation.

Happy deployment.