My first GitHub Page

Objective

I wanted to do a experiment with a web development workflow using static page generator Hugo and other front end web development tools (Yeoman, Bower, Grunt, Gulp) to construct a static site with dynamic data.  The web dev environment will be dockerized in a Docker Container.  The final goal is pushing the assets to GitHub to build GitHub page.

Setting up Hugo from Source

Hugo binary, single executable, is running on a physical ubuntu box.

Pull Go Container

Pull from Official Repo

sudo docker pull golang

Start Go Container

• -it = Interactive Terminal
• --rm = remove container when exit
• -v = mount data volume from host directory /media/data/volumes/projects/go/ to container $GOPATH directory /go
• -w = working directory is /go

Compile Hugo

See install instruction for detail

$go get -v github.com/spf13/hugo
$exit

After the command is executed, 3 folders created: bin, pkg, src. The hugo runtime executable is outputted at bin folder. exit to terminate go session.

Add go bin to $PATH (System-wise)

Add the bin path to /etc/environment file.

Create a site with Hugo

Official Quick Start Guide

My Quicker Start Recipe

Scaffolding

$ cd /to/the/project/site/directory
$ hugo new site demo

Install Themes

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

Generate

$ hugo

Starting Hugo web server for preview

$ hugo server

Comment

After trying out all of its stock themes, none of the stock theme fit my need. I will start the workflow from the "traditional" toolset and then integrate Hugo workflow with dynamic content. I want to push a generic home page to GitHub ASAP

Create a WebDev Container with Yeoman, Grunt, Gulp, Bower

Dockerfile at GitHub
The build file is a bash script for the build command.

$ docker build -t hcsoftech/webdev .

It saved a few typing strokes when composing and trying out the Dockerfile.

Starting the WebDev Container

• -it = Interactive Terminal
• --rm = remove container when exit
• -v = mount data volume from host project src directory to container directory: /src
• --name = name the container as webdev
• --expose 9000 = expose Container port 9000 to host, which is the port for grunt server
• -p 80:9000 = map host port 80 to container port 9000

Scaffolding

$yo webapp

Answer a few questions, then generate a standard webapp structure.

/app               bower.json    /node_modules  /test
/bower_components  Gruntfile.js  package.json

Update Gruntfile.js

• Replace localhost with 0.0.0.0, so that grunt server will bind to all network interface.
• Comment out 'test' step from default task, since there is access right problem with phantomJS running within the container.

    grunt.registerTask('default', [
      'newer:jshint',
  //    'test',
      'build'
    ]);

Preview the site

$ grunt server

Grunt start web server with liveload on http://0.0.0.0:9000 in container, port 9000 is map to host port 80. Therefore, starting a browser point to the host ip receive page from container web server.

Generate the distribution

$ grunt

The generated files are written in the dist directory.

Setup a GitHub Page

1. Setup a User or organization site
2. Setup a custom domain with GitHub Pages
3. Publish content from dist directory to GitHub
4. Here is my sample site.

Mix Hugo with Grunt workflow ... not simple!

My ideal workflow would be grunt > hugo > publish; where grun handles all design and relatively permanent artifacts, hugo handles generation of dynamic data into static html. However, hugo generate index.html at root, which ignore the root index.html from grunt. As of now, I will use the yo-bower-grunt workflow to create a site, and then think of some way to integrate with hugo.