Using Travis to build your Sculpin blog

This static blog site is generated by Sculpin and hosted on GitHub Pages. In this article, I’ll tell you how you can setup automatic generation using Travis.

The Publish Script

Generating a Sculpin site is basically executing some commands. Let’s create a publish.sh file which will execute all commands required to generate the site:

1
2
3
4
# build site
$ sass source/css/wouterj.scss:source/css/wouterj.css --style compressed --no-cache
$ ./vendor/bin/sculpin generate --env prod
$ touch output_prod/.nojekyll

As this site uses Sass, it first needs to compile the sass code into a css file. Then, Sculpin is used to generate the site for production. At last, a .nojekyll file is created, to make sure GitHub Pages is not going to try to render the site as a Jekyll blog.

To make Travis execute this file, you need some Travis configuration:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# .travis.yml
language: php
php:
  - hhvm

sudo: false
cache:
  directories:
    - $HOME/.composer/cache

before_script:
  - gem install sass
  - composer install --prefer-dist

script:
  - sh publish.sh

The first 9 lines are setting up the quickest Travis PHP build: HHVM, caching, Docker environment, etc. The lines after this install Sass and the dependencies (yes, I commit composer.lock). The real Travis script executes the publish.sh file.

1
[note]
Sculpin is added as a dependency in `composer.json` as shown under "Download
via Composer" on the [download page][6].

The Branching Strategy

The master branch is always used by GitHub Pages, so the source code is pushed to a source branch. This branch is also set up as the default branch on GitHub, as this is the only branch you should care about.

To make sure that Travis only runs builds on the source branch, use the branches.only setting:

1
2
3
4
5
6
# .travis.yml

# ...
branches:
  only:
    - source

Commiting the Build

The idea now is to make Travis change the root of the repository to the output_prod directory, commit and push it as the master branch. First, some Git config is required:

1
2
3
4
5
6
7
# publish.sh

# configure env
git config --global user.email 'your_email@example.com'
git config --global user.name 'WouterJ.nl bot'

# ... build site section

Since the build is executed on the source branch, Travis need to checkout the master branch. However, as master is going to be replaced each time, it should just delete current master and create a new one based on the source branch:

1
2
3
4
5
6
7
# ... configure env section

# checkout publish branch
git branch -D master
git checkout -b master

# ... build site section

Travis is in the master branch and has build the site in output_prod now. Git can make this output directory the new root of the branch using the git filter-branch command. Before executing this, Travis has to commit the currently added files (the output_prod directory):

1
2
3
4
5
6
7
# .travis.yml

# ... configure env, checkout publish branch and build site sections

# commit build
git add -f output_prod
git commit -m "Build website"

The -f is required, as output directories are in the .gitignore file of a common Sculpin blog. Now, execute the git filter-branch command:

1
2
3
4
5
6
# .travis.yml

# ...

# only commit output dir
git filter-branch --subdirectory-filter output_prod/ -f

Pushing the Result

The branch is ready to be pushed back to GitHub, so let’s do that!

1
2
3
4
5
6
# .travis.yml

# ...

# push to GitHub Pages
git push "https://github.com/WouterJ/wouterj.github.com" -f master

Wait a moment… It needs either a username and password or a GitHub token in order to push. This means that everyone can see my GitHub token. That’s a huge security leak!

Fortunately, Travis allows you to encrypt the token in a special way that only works for your repository. This way, you’re the only person who can use this token. Download the Travis command line app and use the travis encrypt command to encrypt your public token to an environment variable:

1
$ travis encrypt --add GH_TOKEN=XXX

(XXX is your github token here).

1
[caution]
Be sure to execute this when your in the directory of your blog repository.

As the --add option was added, the encrypted string is added to your .travis.yml configuration. Using this directly like git push http://$GH_TOKEN@github.com/... will still show your github token in the output of the command. You have to put it in the ~/.netrc of the Linux environment before executing this command. This file is used by Linux to authenticate with ssh servers.

1
2
3
4
5
# .travis.yml

# ...
before_install:
  - echo -e "machine github.com\n  login $GH_TOKEN" >> ~/.netrc

Round Up

Congrats, you have a running Sculpin blog on GitHub Pages using automatic buildings with Travis! Everytime you push to your blog’s source branch, the site will be regenerated. There are even more nice features:

  • You get a notification when the build failed
  • The output is never pushed when the build failed, meaning you always have a working site

You can see the complete files in the repository of this site.