I remember back in the day where everyone are learning php frameworks just for make a simple blog.
Of course there is nothing wrong about that, but it was expensive considering you're just ended up scaling your money when your bandwidth limit is exceeded.
And later people using GitHub Pages for their personal webpages because it's relatively easy and free.
With the help of jekyll (or octopress), everyone can make their own personal webpages by just writing some markdown and then push it to their repo, and GitHub automagically transform it into a beautiful themed pages with jekyll.
Well, Everyone love customizing their stuff and trying a new technologies.
And so was I, I want to try another static site generator (like this cute one - eleventy),
but also I still want to deploys it on my GitHub pages.
But as you know, GitHub (in the day where this article written) is just supporting jekyll.
Since jekyll is just a static site generator, which is transforming your stuff (templates, markdown, etc) into HTML,
we can do the same things by the help of TravisCI.
They also has a feature that allow us to automatically deploy files to many providers including GitHub Pages.
Setting up repository
First of all, we create a repository for our website, usually
and then we should make a new branch for our source code, in this case, I create
And now you can clone the
dev branch and push your code to it.
$ git clone https://github.com/slavqueen/slavqueen.github.io --branch 'dev'
# make some changes
$ git add .
$ git commit -m 'First commit for the most beautiful web in the multiverse'
$ git push
$ firefox https://www.youtube.com/user/PewDiePie # subscribe to pewdiepie
"Wait, what happen with the
master branch ?"
In this case, we use the
master as the place where your files are generated.
And it should be served automatically by GitHub.
In order to make our repository deployed by Travis, we need to add some instruction for travis in a file called
Okay, let's create it.
In this case, I use eleventy as example.
# install eleventy and any dependencies inside ./package.json
- npm install
# run generator
- npx eleventy
# create .nojekyll files
# We are telling GitHub to not process this branch using jekyll
- touch .nojekyll
github_token: $GH_TOKEN # Set in travis-ci.org dashboard later
# folder that generated by your SSG.
# will be pushed to the master branch by travis
branch: dev # branch name of the source code
As you can see, it run as nodejs project. So for more information about the languages that travis supported and the usages, you can visit https://docs.travis-ci.com/user/languages/
After that, you can push that file into
dev branch to triggers the travis build.
GitHub Token for Travis
As you can see in the
.travis.yml before, there is a yaml key named
github_token and it has
$GH_TOKEN as the value.
This token is used by travis to push the generated files into your
master branch, so it should be PRIVATE.
In order to set that variables, you can use the "Environment Variables" in your travis repository settings.
Usually at https://travis-ci.com/[username]/[repo-name]/settings .
To get your GitHub token, you can visit GitHub Help for more information : https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/
And after that, you can reload the build process.
Oh, the build process is completed, lets check the
Huuray, our code are now automatically generated by TravisCI everytimes we push the code into the