Preface
Goal: Deploy SSG using Travis.
Most of the explanation doesn’t require coding at all. Using figures below as an explanation would be sufficient.
After explanation for dummies,
there will be some kind of DevOps configuration using travis.yml
.
This a place to start learning for YAML engineer.
Official Site
1: Prepare Your Repository
Travis is a third party CI/CD. Travis can read from github/bitbucket repository, then build your favorite SSG, and write back to repository, or do something else, such as Amazon S3 thing. But unlike netlify or Zeit, Travis does not host anything.
Sign In
Your first attempt should be, creating account
Supported Repository
It is clear that Travis support these two git repositories:
I have successfully build in github.
But I never try Travis for bitbucket.
I just do not have time to explore Travis+Bitbucket
tier.
Travis do not support gitlab. But do not worry, gitlab have their own internal CD/CD.
What happened when you sign in to an account with empty jobs? Consider have a look at my bitbucket account.
For the rest of this guidance, I’m going to use my github account. This would looks different, because I already have some Travis jobs over there.
Practice
Now you can make repository, with any name, for example:
-
Jekyll:
- 🕷 Repo: https://github.com/epsi-rns/travis-jekyll
- 🕷 Site: https://epsi-rns.github.io/travis-jekyll/
- 🕷 Travis: https://travis-ci.com/epsi-rns/travis-jekyll
-
Eleventy:
- 🕷 Repo: https://github.com/epsi-rns/travis-11ty
- 🕷 Site: https://epsi-rns.github.io/travis-11ty/
- 🕷 Travis: https://travis-ci.com/epsi-rns/travis-11ty
-
Hexo:
- 🕷 Repo: https://github.com/epsi-rns/travis-hexo
- 🕷 Site: https://epsi-rns.github.io/travis-hexo/
- 🕷 Travis: https://travis-ci.com/epsi-rns/travis-hexo
-
Pelican:
- 🕷 Repo: https://github.com/epsi-rns/travis-pelican
- 🕷 Site: https://epsi-rns.github.io/travis-pelican/
- 🕷 Travis: https://travis-ci.com/epsi-rns/travis-pelican
-
Hugo:
- 🕷 Repo: https://github.com/epsi-rns/travis-hugo
- 🕷 Site: https://epsi-rns.github.io/travis-hugo/
- 🕷 Travis: https://travis-ci.com/epsi-rns/travis-hugo
This is just an example, you should use your username account. and you should use your own repository.
2: Prepare Your Jobs
Allright. I have a ready to use SSG, let’s say eleventy,
that I have put in travis-11ty
repository on github account.
What to do next 🤔?
Example Configuration
Example configuration is copied from.
But it is altered for use with Eleventy, instead of Hexo.
Travis Configuration
Each SSG have a different configuration.
For the sake of simplicity, consider ready to use .travis.yml
configuration as below.
I will explain the configuration later.
language: node_js
node_js:
- 8
before_script:
- npm install @11ty/eleventy -g
script: eleventy --pathprefix="/travis-11ty/"
deploy:
local-dir: dist
provider: pages
skip-cleanup: true
# Set in travis-ci.org dashboard, marked secure
github-token: $GITHUB_TOKEN
keep-history: true
on:
branch: master
Save this as .travis.yml
.
Add file, commit and push to travis-11ty
repository.
Trigger a Build
How to create Jobs ? You should see a button with text trigger build on your dashboard.
Just click it. Your first build should be failed.
Because you haven’t set $GITHUB_TOKEN
yet.
And you also cannot set any environment variable such as $GITHUB_TOKEN
for your jobs before you trigger a build.
This is why your first job attempt failed.
Get Github Token
You should get github token from your github account. Be aware that one token is used for all travis jobs.
Set Github Token
On Travis side, you should set $GITHUB_TOKEN
as environment variable.
Restart Build
Hit the small Restart Build
button.
You should see the build process started.
Preview
In my case. It works well. And the site is served at:
Job Log
Even when your site is built successfully, it is recommeneded for beginner to see the job log. This is the heart of CI/CD.
We have enough image, we are going to examine the YAML configuration, in the next part.
What is Next ?
Consider continue reading [ CI/CD - Travis - Part Two ]. Finishing this worktree feature guidance with examples.