Friendly Ghost

@vogti is writing.

Setting up Hugo with Github pages

This post will cover how to organize your Git repository, setup Travis-CI and Hugo in order to automatically deploy a static Website to to Github Pages.

Prerequisites

This article assumes, that you have your Hugo website working locally. This means you've already chosen a theme, generated some content and Hugo is building without errors.

Hugo's default output folder is public. If you changed this using publishdir in your config file, you need to take care in the following steps.

No working Hugo site yet? Then have a quickstart and come back later!

Preparing your Github Repository

Github pages allows us to setup User/Organization Pages or Project Pages. The following steps should work for both, but branch names might differ depending on how you want to organize the repository.

Rule of thumb:

  • For User/Organization Pages have your sources in any branch other than master
  • For Project Pages, have your sources in any branch other than gh-pages

To me it makes sense to have a sources branch, containing all files used by Hugo, and a master branch which holds all the static files ready to serve.
However, if you go with Project Pages, you should have the sources in the master branch (e.g. in a sub-folder) and all generated files in the gh-pages branch (required by GitHub).

Setting up Travis CI

On Travis CI, you can build and deploy your website automatically.

Create a build.sh

You will need this fancy shell script in the root of your folder in the sources branch.

It will take care that all your generated files end up in the correct branch. Read the readme for the details.

Generate an Github access token

You'll need to generate a new "Personal Access Token" from this Github page: https://github.com/settings/tokens. Click on "Generate new token" and follow the instructions. Select public_repo or repo scopes. After generation copy the token.

New Personal Access Token

Encrypt the token

In order to use the token on Travis CI you need to encrypt it. Why? Well your just generated token allows Third Parties the access to your repository. As the travis.yml will reside in your public repository, you will not want, that someone else except Travis can read this token.
Use the Travis CLI tool to encrypt the token. Install it:

$ gem install travis

and use it (make sure to replace GENERATED_TOKEN, USERNAME and REPO_NAME):

$ travis encrypt GIT_DEPLOY_REPO=https://<GENERATED_TOKEN>@github.com/<USERNAME>/<REPO_NAME>.git

Setup .travis.yml

You have to create .travis.yml right into your sources branch, containing all the details Travis needs to know for the build. The contents should be as follows:

Configure Travis-CI

Now you have to tell Travis which repository should be build. Login to Travis-CI and select your repo.

In order to make sure Travis builds with every commit to the Repository, the Settings should look like this:

Travis-CI Settings

Prepare a Hugo binary

You could advise Travis CI to install Hugo during the website build. A much more elegant way is to cross compile the Hugo binary yourself and then deploy it in the sources branch. This will also speedup the build.

Sounds complicated? Not really: Run the following commands line by line

$ mkdir binaries && cd binaries
$ env GOPATH="`pwd`" go get -v github.com/spf13/hugo
$ env GOPATH="`pwd`" GOOS=linux GOARCH=amd64 go build -v github.com/spf13/hugo

This will create your hugo binary, compiled for a Travis VM. Make sure to add it to your repo. You can remove all the source clutter.

Wrapping up

In the end, this is what the root directory of your sources branch should look like:

├── [archetypes]
├── [binaries]
    └── hugo
├── [content]
├── [data]
├── [layouts]
├── [static]
├── [themes]
├── config.toml
├── deploy.sh
├── .travis.yml
└── README.md

The important files are .travis.yml, deploy.sh and the hugo binary. The other ones are generated by Hugo.

No with every push to GitHub Travis-CI should run and generate static HTML and push it back to your master branch. The results should be visible on your GitHub Page.


Initial Setup for the PocketC.H.I.P.

My good friend Albert told me from his newest toy: the PocketC.H.I.P.. The little Nerd in us was immediately convinced by its possibilities. And with 9$ its much cheaper than a RaspberryPi. It even has an onboard Bluetooth module!

Since he is pretty new to this whole SBC/Linux topic he asked me to help him with the initial setup, so we can start tinkering around with it.

This this a little manual how to work with the C.H.I.P. from remote, so you don’t need to plugin a Keyboard and attach it to a monitor. The only thing you’ll need to do is to attach it to a power supply.

Preparations on your main machine

The “main machine” is the machine you’ll use to connect to the PocketC.H.I.P. from remote.

At first you’ll need to create our SSH-Key pair:

$ ssh-keygen -t rsa -b 4096 -C "em@il-adre.ss"

You’ll be prompted where to save the keys - just hit enter and it will create them in ~/.ssh/id_rsa. Furthermore you can define a passphrase, which is recommended but not necessary.

This will create your

  • private key in ~/.ssh/id_rsa
  • your public key in ~/.ssh/id_rsa.pub

Now we need to store the public key on your PocketC.H.I.P.. You could copy it to an USB-Stick and insert it on your Chip, or (assuming both machines are in the same network) you do it the fancy way: Go into your ~/.ssh directory and serve the directory.

$ cd ~/.ssh && python -m SimpleHTTPServer 8000

On PocketC.H.I.P. create an ~/.ssh directory:

$ mkdir .ssh/

And put the public key into a file called authrized_keys. Therefore I just download the public key from our just served directory like so:

$ curl -s <ip of your main machine>/id_rsa.pub > ~/.ssh/authorized_keys

Of course you could also copy & paste the content of your USB-Stick into the authorized_keys file.

Don’t know the IP of your main machine? You can read it out from ifconfig: ifconfig en1 | grep "inet” (the value en1 is depending on your network interface).

Preparing the PocketC.H.I.P.

To connect to your PocketC.H.I.P. via ssh you need to install an SSH Server:

$ sudo apt-get install openssh-server

The default configuration of openssh-server this package is totally sufficient for our use case, so we don’t necessarily need to adjust it. But if you want, you could do this in /etc/ssh/sshd_config.

Lets connect!

Now you should be able to connect from your main machine to your PocketC.H.I.P. via ssh:

$ ssh chip@<pocketchips ip>

Don’t know the IP of your PocketC.H.I.P.? You get it similar to the IP of your main machine: sudo ifconfig wlan0 | grep "inet addr”.

It´s very likely, that you will run into troubles while connecting: Unfortunately PocketC.H.I.P. has some unpractical power management settings, which leads to a bad/unreliable performance network performance when it comes to connections form outside (like SSH). Luckily there were other brave people which already ran into that problem and solved it:

The quick fix: just fire ping to e.g. google.com running in the background, to keep the machine busy:

$ ping google.com &

The (much better) fix: disable the power-management (instructions shamelessly taken over from the official repository!):

1. Get the prerequisit Linux package.

sudo apt-get install wireless-tools  

2. Verify that power management is turned on:

$ /sbin/iwconfig wlan0

You should see the line:

Power Management:on  

3. Get the shell script file onto CHIP and reboot:

$ sudo wget -O/etc/network/if-up.d/wlan_pwr http://fordsfords.github.io/wlan_pwr/wlan_pwr
$ sudo chmod +x /etc/network/if-up.d/wlan_pwr
$ sudo shutdown -r now

4. Test the package. Wait for C.H.I.P. to finish booting, and log back in. Then:

$ /sbin/iwconfig wlan0

You should see the line:

Power Management:off  

Now you should reliably be able to connect to your C.H.I.P..

Convenience & Security

So thats it for the main setup. The following steps are totally optional and don’t need to be done, since they are more fore convenience.

Change Hostname

Changing the Hostname of your PocketC.H.I.P. allows us to connect to it via:

$ ssh chip@<you name it>

Pretty handy when you have multiple devices and don’t want to remember every devices IP!

$ hostnamectl set-hostname <new name>

Attention: this requires a Reboot!

$ sudo shutdown -r now

Afterwards the new configuration should have been applied. Entering hostname should return the new name.

Change pw of user the default user chip

The default password for the user chip is chip. On every PocketC.H.I.P.. Sounds not very secure, right? So lets change it:

$ sudo passwd chip

Create an own user

Are multiple users maintaining the device? Just to permit a ssh login with the user chip and use an own one? In this case it makes sense to create an own user. The following is enough to create a user:

$ sudo adduser <name>

You will be prompted to define a password and several other information of this user. Important is only the password.

Now we want this user to have root privileges. We achieve this by adding him to the sudoers list via sudo visudo by appending the following line:

<name> ALL = (root) NOPASSWD: /usr/bin/apt-get  

This gives the new users the same privileges as the user chip.

Furthermore we want to make sure that we can log in with the new user via SSH. So we’ll need to create a ~/.ssh directory for this user, move our public key and own it to the new user:

$ sudo mkdir /home/<name>/.ssh
$ sudo mv ~/.ssh/authorized_keys /home/<name>/.ssh/authorized_keys
$ sudo chown -R <name>:<name> /home/<name>/.ssh

No you should be able to connect remotely via

$ ssh <name>@<chip ip/hostname>

Conclusion

  • We are now able to connect from our main machine to the PocketC.H.I.P. via SSH, secured by our SSH-Key pair
  • We made sure our PocketC.H.I.P. reliably reacts on our commands by disabling the power-management
  • We changed the hostname of the device, so we can e.g. easier distinguish between multiple devices
  • We changed the password of the default user chip
  • We created a new user with root privileges and are able to login with it from remote


Tristan Otto, the T-Rex

iPhone 6, used: SKRWT, VSCO, Enlight


Art in Prinzessinnengarten

iPhone 6, used: SKRWT, VSCO, Enlight


It was my birthday and we found a photobooth. The rest is history.