feed.xml

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Mel Lota</title>
    <description>Web development, Code Exploration and Raspberry Pi Hacking</description>
    <link>http://mlota.github.io/</link>
    <atom:link href="http://mlota.github.io/feed.xml" rel="self" type="application/rss+xml"/>
    <pubDate>Tue, 24 Nov 2015 09:03:32 +0000</pubDate>
    <lastBuildDate>Tue, 24 Nov 2015 09:03:32 +0000</lastBuildDate>
    <generator>Jekyll v3.0.1</generator>
    
      <item>
        <title>Automating deployment of a GitHub Pages hosted site with Jekyll and Travis CI</title>
        <description>&lt;p&gt;Earlier this month I set up this blog using the simple publishing mechanism provided by GitHub Pages and Jekyll. It all works perfectly, but as I began to delve deeper into Jekyll, I discovered that it’s possible to create a more efficient deployment workflow using Travis CI and GitHub. I’m a big advocate of continuous deployment and build automation so I had to check this out.&lt;/p&gt;

&lt;p&gt;I also decided to move away from using the out-of-the-box build process that GitHub Pages provides for Jekyll. This is mainly due to the added flexibility of using custom plugins, as GitHub Pages runs in &lt;code class=&quot;highlighter-rouge&quot;&gt;--safe&lt;/code&gt; mode it effectively disables this feature. I found it wasn’t too difficult to get this all setup, but it does mean that you’ll need a local development environment with Ruby and Jekyll installed.&lt;/p&gt;

&lt;h2 id=&quot;development-environment&quot;&gt;Development Environment&lt;/h2&gt;

&lt;p&gt;I’m using a Macbook Pro with OSX - El Capitan (ridiculous name btw) so I started out by grabbing a copy of the following:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;http://brew.sh/&quot;&gt;Homebrew&lt;/a&gt; - A super-simple software package manager for the Mac. I found it was a bit like Chocolatey on Windows.&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/sstephenson/rbenv&quot;&gt;rbenv&lt;/a&gt; - I had to use this in order to install the latest version of Ruby (2.2.3 at the time of writing) without affecting the system installed version.&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://bundler.io/&quot;&gt;Bundler&lt;/a&gt; - This helps to manage Gem dependencies when working Ruby. I also like to set it up so that it installs required gems to the project directory to avoid clutter elsewhere&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I cloned a copy of the current, GitHub Pages oriented site down to my local machine and created a &lt;code class=&quot;highlighter-rouge&quot;&gt;Gemfile&lt;/code&gt; to add the Jekyll dependencies:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-ruby&quot; data-lang=&quot;ruby&quot;&gt;&lt;span class=&quot;n&quot;&gt;source&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;https://rubygems.org&quot;&lt;/span&gt;

&lt;span class=&quot;n&quot;&gt;gem&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;jekyll&quot;&lt;/span&gt;
&lt;span class=&quot;n&quot;&gt;gem&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&quot;jekyll-paginate&quot;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;I then ran the following command to install the gems into a &lt;strong&gt;vendor&lt;/strong&gt; folder in the root of the project directory:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;gp&quot;&gt;$ &lt;/span&gt;bundler install --path vendor&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;I also created a simple shell script to serve the site locally:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;serve.sh&lt;/strong&gt;&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;&lt;span class=&quot;c&quot;&gt;#!/usr/bin/env bash&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;set&lt;/span&gt; -e &lt;span class=&quot;c&quot;&gt;# halt script on error&lt;/span&gt;
bundle &lt;span class=&quot;nb&quot;&gt;exec &lt;/span&gt;jekyll serve --config _config.yml,_config_dev.yml --watch&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;There are a few interesting things going on here which I’ll elaborate on. Firstly it’s worth mentioning that by default the site will be served on port 4000, so you’ll be able to use your browser and navigate to &lt;a href=&quot;http://localhost:4000&quot;&gt;http://localhost:4000&lt;/a&gt;. I’m also supplying the &lt;code class=&quot;highlighter-rouge&quot;&gt;jekyll serve&lt;/code&gt; command with two arguments:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;--config&lt;/code&gt; accepts a comma separated list of site config files. Whichever file comes last in the list will override any settings in the preceding file. I’m using this so that I can set a separate &lt;strong&gt;baseurl&lt;/strong&gt; for dev, so that any global links work when I’m serving the site locally.&lt;/li&gt;
  &lt;li&gt;&lt;code class=&quot;highlighter-rouge&quot;&gt;--watch&lt;/code&gt; tells Jekyll to watch for any file changes in the project directory, and automatically regenerate the site&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&quot;automated-deployment&quot;&gt;Automated Deployment&lt;/h2&gt;

&lt;p&gt;Next up was automating the deployment of the site files to GitHub Pages. &lt;a href=&quot;https://travis-ci.org&quot;&gt;Travis CI&lt;/a&gt; is an online, continuous integration service used for building and testing code. I’m new to Travis, but I frequently use other CI tools such as Jenkins and TeamCity so the concepts were familiar. One nice thing about Travis is that it is completely free to use on public source code repositories, so it’s ideal for a small project such as this blog.&lt;/p&gt;

&lt;p&gt;For setting up the automated deployment, I used the following article as a reference point:&lt;/p&gt;

&lt;blockquote&gt;
  &lt;p&gt;&lt;a href=&quot;http://eshepelyuk.github.io/2014/10/28/automate-github-pages-travisci.html&quot;&gt;Automate GitHub Pages publishing with Jekyll and Travis CI&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It roughly consists of performing the following steps&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Set up a new branch to contain the Jekyll source code and use the master branch to host the cleanly built site code&lt;/li&gt;
  &lt;li&gt;Enabling Travis hook for the repository&lt;/li&gt;
  &lt;li&gt;Create a personal access token in GitHub&lt;/li&gt;
  &lt;li&gt;Creating a .travis.yml and build.sh file&lt;/li&gt;
  &lt;li&gt;Running the build&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I won’t go into too much detail about these points here, as the article is quite concise. I did however run into a minor issue with permissions on the &lt;code class=&quot;highlighter-rouge&quot;&gt;build.sh&lt;/code&gt; file when I first tried running a build in Travis. After a bit of research I found this was due to the file requiring ‘execute’ permissions and could be easily remedied by adding a &lt;code class=&quot;highlighter-rouge&quot;&gt;chmod&lt;/code&gt; command to the &lt;code class=&quot;highlighter-rouge&quot;&gt;.travis.yml&lt;/code&gt; file:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-yaml&quot; data-lang=&quot;yaml&quot;&gt;&lt;span class=&quot;s&quot;&gt;before_script&lt;/span&gt;&lt;span class=&quot;pi&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;pi&quot;&gt;-&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;chmod +x &quot;./build.sh&quot;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h2 id=&quot;enhancements&quot;&gt;Enhancements&lt;/h2&gt;
&lt;p&gt;With Travis in place, enabling test scripts in the build process becomes quite a trivial task. I added the following enhancements…&lt;/p&gt;

&lt;h3 id=&quot;html-proofer&quot;&gt;HTML proofer&lt;/h3&gt;
&lt;p&gt;The &lt;a href=&quot;https://github.com/gjtorikian/html-proofer&quot;&gt;html-proofer&lt;/a&gt; Gem provides a set of tools for running checks on validity of links and images across a Jekyll generated site. I implemented this by adding the &lt;code class=&quot;highlighter-rouge&quot;&gt;html-proofer&lt;/code&gt; Gem to the Gemfile and the following line to the &lt;code class=&quot;highlighter-rouge&quot;&gt;build.sh&lt;/code&gt; file:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;bundle &lt;span class=&quot;nb&quot;&gt;exec &lt;/span&gt;htmlproof ./_site --disable-external --check-html --verbose&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;p&gt;With the optional arguments in that command, I am disabling the check for external links, checking the output files for valid HTML and outputting verbose results to the console.&lt;/p&gt;

&lt;h3 id=&quot;html-beautifier&quot;&gt;HTML Beautifier&lt;/h3&gt;

&lt;p&gt;Seeing as I have a touch of OCD, I like to keep the HTML output on my sites tidy and indented correctly. This is somewhat difficult to accomplish when working with Jekyll as the various includes and liquid templating leave unwanted spacing and indentation. I came across a Gem called &lt;a href=&quot;https://github.com/threedaymonk/htmlbeautifier&quot;&gt;htmlbeautifier&lt;/a&gt; which takes an input file and outputs a nicely indented HTML document. The documentation is a little sparse for this one, so I had to figure out how to run this for all the HTML files in the &lt;code class=&quot;highlighter-rouge&quot;&gt;_site&lt;/code&gt; directory. I came up with the following command which can be added &lt;code class=&quot;highlighter-rouge&quot;&gt;build.sh&lt;/code&gt; file and seems to work perfectly:&lt;/p&gt;

&lt;figure class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-bash&quot; data-lang=&quot;bash&quot;&gt;find ./_site -name &lt;span class=&quot;s2&quot;&gt;&quot;*.html&quot;&lt;/span&gt; -exec bundle &lt;span class=&quot;nb&quot;&gt;exec &lt;/span&gt;htmlbeautifier &lt;span class=&quot;o&quot;&gt;{}&lt;/span&gt; &lt;span class=&quot;se&quot;&gt;\;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/figure&gt;

&lt;h2 id=&quot;summary&quot;&gt;Summary&lt;/h2&gt;

&lt;p&gt;Switching from the standard GitHub Pages build process to Travis is not as daunting as it seems and I’ve certainly learnt a fair bit about Ruby and bash scripts along the way. Going forward, I’d like to look at other ways I can optimse the site during the build process such as minifying scripts. All of the code I’ve spoken about in this article is free to view on the &lt;a href=&quot;https://github.com/mlota/mlota.github.io/tree/source&quot;&gt;GitHub repository for this blog&lt;/a&gt;. Hope this comes in handy for anyone looking to improve their Jekyll blog deployment :)&lt;/p&gt;
</description>
        <pubDate>Mon, 23 Nov 2015 00:00:00 +0000</pubDate>
        <link>http://mlota.github.io/2015/11/23/automating-deployment-github-pages-jekyll-travis.html</link>
        <guid isPermaLink="true">http://mlota.github.io/2015/11/23/automating-deployment-github-pages-jekyll-travis.html</guid>
        
        
      </item>
    
      <item>
        <title>A New Blog!!</title>
        <description>&lt;p&gt;I’ve been putting this off for some time now, but I’ve finally bit the bullet and got a blog up and running :-) Over the last year I’ve been working on a number of development projects in both my professional and personal life that I’d like to share with the community.&lt;/p&gt;

&lt;p&gt;Having previously tried various blogging platforms such as Wordpress and Blogger, I decided that what I really need is something very simple so that I can focus on content. After hearing a lot of buzz recently about static site generators, I got inspired to try &lt;a href=&quot;https://jekyllrb.com/&quot;&gt;Jekyll&lt;/a&gt; and &lt;a href=&quot;https://pages.github.com/&quot;&gt;GitHub Pages&lt;/a&gt;.&lt;br /&gt;
The nice thing about this setup is that hosting on Github is free, providing that the codebase for the blog repository is public.&lt;/p&gt;

&lt;p&gt;I began by forking a nice looking example called &lt;a href=&quot;https://github.com/daattali/beautiful-jekyll&quot;&gt;Beautiful Jekyll&lt;/a&gt; by &lt;a href=&quot;https://github.com/daattali&quot;&gt;Dean Atalli&lt;/a&gt;. It’s a really good starting point as it’s easily configurable and includes some basic layouts and sample posts. When hosting with GitHub pages, it’s as simple as adding a new page to the repository and the site will automatically rebuild.&lt;/p&gt;

&lt;p&gt;Another nice thing I discovered is that there is a free to use service called &lt;a href=&quot;http://prose.io&quot;&gt;Prose&lt;/a&gt; which hooks into the GitHub repository and provides a CMS-style editor for writing your posts. It has a very clean and easy to use interface which allows previewing and saving posts as drafts.&lt;/p&gt;

&lt;p&gt;I’m reasonbly new to using Git with the command line. I’d previously been using Mercurial with BitBucket and TortoiseHG. I found an excellent online tutorial on &lt;a href=&quot;https://try.github.io/levels/1/challenges/1&quot;&gt;try.github.io&lt;/a&gt; which is around 15 minutes long and takes you through all the basics. I’d highly recommend this if you’re new to Git.&lt;/p&gt;

&lt;p&gt;My aim is to get into a regular practice of blogging about stuff I’m working on and sharing anything useful I come across. Thanks for visiting, there’ll be more posts to follow!&lt;/p&gt;
</description>
        <pubDate>Wed, 04 Nov 2015 00:00:00 +0000</pubDate>
        <link>http://mlota.github.io/2015/11/04/a-new-blog-first-steps-with-jekyll.html</link>
        <guid isPermaLink="true">http://mlota.github.io/2015/11/04/a-new-blog-first-steps-with-jekyll.html</guid>
        
        
      </item>
    
  </channel>
</rss>