Tutorial showing how to set up a website with Jekyll, Google App Engine, deployed by Travis CItravis jekyll continuous integration GAE google app engine
Recently, I decided that I wanted to change the look of my website. I'm not really a web developer so I wanted a simple setup. I like Markdown, especially the way Github renders markdown documentation.
Feel free to modify/check out the source for this website.
Setting up Jekyll is pretty simple - it's a Ruby gem so you have to install Ruby. I have Homebrew, so it was as simple as
brew install ruby sudo apt install ruby
And from there, I installed Jekyll as a gem.
gem install jekyll
You'll probably also want the Travis CI command line tools
Jekyll is a very easy client to use. It takes markdown and converts it to HTML. The websites are static, making them fast as a nice bonus. Jekyll is primarily designed for written content like this - blogs.
Your initial steps are outlined in the Jekyll quick start guide
You have two main types of pages: blog posts, and pages.
Jekyll has a config file, called
_config.yml where you put in site wide
settings and data. You will enter your site's URL, data that might be relevant
to the particular theme you're using, your site's description, etc.
Pages are just what they seem like - pages. To create one, you make a markdown file, and you can stick it in the root of your project. Let's pretend it's called page.md.
At the beginning of every markdown file that gets converted to an HTML page, you have to specify some metatdata. Some example markdown for a post would look like
--- layout: post title: "This is a post!" category: posts --- # This is a heading Here is some content
These layouts are converted to HTML by the layouts specified in the
directory. For example, if you specify that you're using the
Jekyll will use
_layouts/post.html as the template.
You can use a Jekyll theme, or create your own layouts. Jekyll
also allows you to use Sass to create your custom layouts. If you're using a
Jekyll theme, any files you put in the
_layouts folder will override the
Take a look at the Jekyll documentation for more details.
Setting up Travis CI
Once you have a Jekyll blog and you can run it locally, that's great - but how are you going to deploy it? One option is to use Github pages, which are powered by Jekyll themselves. This is easy, but doesn't offer as much flexibility as Google App Engine.
Travis CI offers continuous integration, a way to build, test, and deploy
our compiled website to Google App Engine. Travis CI has documentation
on how to deploy to Google App Engine by adding a few lines to your
.travis.yml. Check out my source code for an example
Take a look at the Travis documention on setting up a Ruby
environment and for deploying to GAE
If you're using Travis to deploy to GAE, I recommend that you use jekyll-app-engine to generate your app handlers.
Once you have your
.travis.yml config set up, go to travis-ci.org and turn
on continuous integration on the repo you're using for the website.
Deploying to Google App Engine
Create an Google cloud account. The free tier allows you to have an app engine instance with 5 gigs of storage. The Travis documentation shows you how to retrieve an access key in JSON format and securely encrypt it for use in the Travis docker image when it tries to upload your files to GAE. Make sure you're using the right URL in your Jekyll configuration, otherwise when your website is live, it won't use the right URL to load assets.
If your configurations are correct, then all the markdown files you commit to your repo should be built by Travis and reflected by your live site on Google App Engine.