A tutorial on integrating Jekyll, GitHub Pages, and Travis CI
Specifically, how I used Jekyll and GitHub Pages to generate my website and how to automate builds and deployments with Travis CI. On this part, I’ll go over the layouts and included page snippets necessary to populate every page.
How about we create a baseplate for your pages? Let’s start with the default layout. If you’ve done everything corretly so far, your default.html should look like this:
Not very exciting. Let’s scaffold a proper HTML website. Start by replacing the contents of this file with the following:
You will get a few build errors complaining about missing files. That’s expected, since I use a few import tags in this snippet, but we have no files corresponding to these tags. Let me first do a quick overview of what you just pasted, skipping the include tags.
This line tell the browser the language of your website. It defaults to en if neither page.lang nor site.lang are set. You can specify a custom, non-English language in your _config.yml by setting the lang tag or in your post’s front matter.
This line tells your phone’s browser what color to use when filling the status bar. You can remove it if you want, it’s not really necessary.
This whole construct dynamically assigns each page’s title, if it has one set, or just defaults to the site-wide title. Pretty neat.
This is some light SEO optimization, it tells the browser what the “default” or “source” URL should be. It prevents duplicate pages from harming your SEO score.
Tells your browser/phone what icon to use when adding a shortcut to the home screen.
Asks (politely) that search engines crawlers do not cache your website. Useful to prevent stale caches and outdated articles from sticking around.
The meat and potatoes of the whole template. It tells Jekyll where to insert yor content. These CSS classes will be useful later on, when we add Semantic UI as our CSS framework.
Now that we’ve covered what everything in our baseplate does, let’s take a look at the include tags. There are 4 of them in that layout:
This means that the content of these 4 referenced files should be inserted where the tag is, verbatim. These files should be saved inside (surprise, surprise) _includes.
I’ll start off with the metatags.html file. Head over to this demo’s repository, and copy its contents to your own metatags.html. I won’t go into detail, but this include helps other websites display information about your blog, such as title, description, author, etc. You can skip this include if you don’t feel like integrating it, but it doesn’t hurt to have these tags.
Let’s take a look at the navbar now. I opted for an auto-generated list of pages, so that I don’t have to manually input them as I add top-level pages. Start by copying the following code to your navbar.html.
Simply add a title and permalink, and that page is now added to the navbar.
This automatically skips paths such as images, stylesheets and blog posts without a permalink. Useful for adding new static pages like an “About” page, or a “Contact”, or a “Projects” page. On mobile, these links fold into a hamburger menu. Hurray responsiveness!
Next on this list is the header.html include. This is an important one, since it’s usually the most eye-catching thing people see when they first load in. I opted for a large banner-like section in my college’s colors, and it’s where I put my title, subtitle and other informational tidbits like publication date.
On the home page, it’s where my profile picture sits, alongside my name, college degree and (predicted) graduation year, as well as some important links (GitHub, LinkedIn and contact info). I plan to have my resumè in this section at some point in the future.
So, let’s see some code:
At this point, you should be able to recognize what’s going on here. The include has a conditional that determines whether we’re in the home page or not, and adjusts accordingly. It also checks for a post layout to determine whether or not to add the post tagline. Both pages have a title and subtitle, although I use the global site.title in the home, whereas regular pages get page.title.
The action buttons pull their URLs from your _config.yml, so make sure the information there is correct. It is done like this because these URLs are used in other parts of the site as well (spoiler: the footer).
Like before, some CSS classes here are not part of Bootstrap, and instead come from my custom SCSS files (which I’ll cover in Part 3). You can ignore them for now, but do not remove them, since we’ll be using these classes later on.
The last of our includes is the footer. It is a simple affair, with links to my GitHub page, my twitter (although I do not use it regularly) and my “About” page. Check out the code below:
As you can see, a very simple snippet. We have three links with icons and two lines of text, one regarding GH Pages and the other saying who this website belongs to.
With the includes done, we’re left with a few layouts before Jekyll will stop complaining about missing things. Let’s start with the page layout, as it is the simplest one.
Yeah, that’s all. Just an article tag with content inside. Our regular pages are just that, regular.
A more interesting layout, but still very simple. It lightly implements a BlogPosting schema by using the articleBody prop, and lays the groundwork for using Disqus, if you need comments in your posts.
And the last layout, the home page. It really is more of the same, with a neat little post list.
To take note here is the fact that this little list does not do pagination of content, meaning that if you have something like 300 posts, your home page will end up being veeeery long. Otherwise, it works very well for its purpose.
At this point, your site should be looking something like this: