Running Hugo Websites on anynines

Today, we will focus on Hugo, an Open Source static website generator tool and how we can run Hugo generated sites on anynines._

Table of Contents

• Hugo installation
• Building a demo site
  • Add themes
  • Running server Hugo locally
  • Generating the static files
• Deploying to anynines
  • Add the Staticfile
  • Target the anynines API
  • Login
  • Select Space
  • Deploy our Hugo site

Hugo installation

Let’s start our tour by installing Hugo on our local machine. The current Hugo release can be found here. After downloading the archive unzip and move the Hugo binary to a directory of your choice. For additional information using Hugo please refer to the Hugo quickstart documentation.

Building a demo site

We will build a simple demo site with some dummy content using Hugo. We can start a new Hugo project using the “Hugo new site” command like this:

[bash light=”true”]
$> hugo new site demomaster
[/bash]

[bash light=”true”]
$> cd demomaster
[/bash]

We can create a post for our site using the “Hugo new” command like this:

[bash light=”true”]
$> hugo new post/first_post.md
[/bash]

Let’s insert some dummy content using markdown syntax into our first post:

[bash light=”true”]
$> open content/post/first_post.md
[/bash]

File contents see gist:

Add themes

We can add some themes to our project by cloning the Hugo themes directory:

[bash light=”true”]
$> git clone –recursive https://github.com/spf13/hugoThemes themes
[/bash]

Basic configuration Before generating our static files we need to set some basic configuration settings in the config.toml file like this: File contents see gist:

Since we will deploy our demo site using the demomaster name the resulting url on anynines is https://demomaster.de.a9sapp.eu.

Running server Hugo locally

To run a local Hugo server and view your current site version just execute the following command:

[bash light=”true”]
$> hugo server –theme=liquorice –buildDrafts –watch
[/bash]

Generating the static files

After verifying our site contents locally, we can generate our static content using the Hugo cli like this:

[bash light=”true”]
$> hugo –theme=liquorice –buildDrafts
[/bash]

Hugo will output the resulting static files to the public folder by default. Feel free to have a look at the results.

Deploying to anynines

Since we’d like to make our new site available to our friends, let’s upload it to anynines. We will use the staticfile-buildpack which needs a Staticfile present within our public directory.

Add the Staticfile

[bash light=”true”]
$> touch public/Staticfile
[/bash]

Target the anynines API

[bash light=”true”]
$> cf api https://api.de.a9s.eu
[/bash]

Login

[bash light=”true”]
$> cf login
[/bash]

.. enter our credentials

Select Space

[bash light=”true”]
$> cf target -o <your_org_name> <your_space_name>
[/bash]

Deploy our Hugo site

[bash light=”true”]
$> cf push demomaster -m 64M -p public -b https://github.com/cloudfoundry-incubator/staticfile-buildpack.git
[/bash]

After finishing the deployment our demo site is available at https://demomaster.de.a9sapp.eu.

**
This article is an adaption of our colleague Robert’s blog post. Please also have a look at his blog.**