19 Apr 2014

I just took down my Wordpress blog and gave it a facelift with Jekyll & Bootstrap. Jekyll is efficient & flexible as a blogging platform - it uses markdown and doesn’t require a database; Bootstrap is an awesome web designing tool. I also took the opportunity to move from a shared host to EC2.

Jekyll can be installed on EC2 or on a local machine. I choose the latter option as I wanted to use Git for deployment. The idea is to simply git push ec2 as soon as I finish writing this and it should appear as a blog post. No need to ssh or sftp.

Here are the steps to set up Jekyll and Git for deployment to EC2:

On EC2

1. set up a bare repo. This is where I will git push my posts or where my collaborators (if any) will git pull.

   $ mkdir ~/myblog.git && cd ~/myblog.git
   $ git init --bare --shared

2. set up a directory in my $home and use it for the Git Work Tree. How this directory is sym linked to the server root will decide what url people will use to access the ‘Jekyll SITE’ (see Back to EC2).

   $ mkdir ~/ABC
   $ cat > hooks/post-receive
   #!/bin/sh
   GIT_WORK_TREE=/home/(user.name)/ABC
   export GIT_WORK_TREE
   git checkout -f

   $ chmod a+x hooks/post-receive
   $ mv hooks/post-update.sample hooks/post-update
   $ chmod a+x post-update

   That’s almost it for the EC2 config except sym linking the Jekyll files.

On Local Machine

1. Set up Jekyll and init it as a git repo.

   $ jekyll new ec2_blog
   $ cd ec2_blog
   $ git init
   $ git add * --all
   $ git commit -a -m "getting ready for first push" 
   $ git add remote ec2 ssh://(user.name)@(ec2 EIP)/home/(user.name)/myblog.git

   First push:

   $ git push ec2 +master:refs/heads/master

   All subsequent push:

   $ git push ec2 

On Domain Name Registrar

To use example.com for the EC2 instance, point its A Record to the EC2 instance’s public IP (use EIP, if possible, for a more permanent setup). To use a sub-domain ABC.example.com, set up and point its A Record to the EC2 instance’s public IP.

Back to EC2

All Jekyll files will appear in the directory ~/ABC after the first push. Now consider the sym linking:

1. If I wish to access the Jekyll blog using ‘http://example.com’, sym link everything in the ~/ABC/_site directory to the DocumentRoot (typically /var/www)

   $ cd /var/www
   $ sudo ln -s ~/ABC/_site/index.html ./
   $ sudo ln -s ~/ABC/_site/css ./
   ...
   ...

2. If I wish to access the Jekyll blog using ‘http://example.com/blog’, sys link the _site directory to /var/www/blog

   $ sudo ln -s ~/ABC/_site /var/www/blog

   !important

   Jekyll, by default, will render its pages from root. To use this set up, it is necessary to set the baseurl variable in _config.yml and to add the {{ site.baseurl }} to all links referring to the root. This will likely apply to all files in the directory _layout and _include which may be pointing to stylesheets (css) and/or script files (js):

   Add the following line to \_config.yml in the local machine
   
   baseurl: /blog

   This is however intended for the EC2 instance. To preview Jekyll on the local machine, I have to override this with the –baseurl switch and reset it to an empty string.

   $ jekyll serve --baseurl ""

3. To reach the Jekyll blog using a sub-domain (my current setup), I’d sys link the *_site* to /var/www/blog same as in item 2 above. But instead of introducing the baseurl variable, I’d add a virtual host using ‘ABC.example.com’ as the ServerName and ‘/var/www/blog’ as the DocumentRoot. Open the default.conf file in /etc/apache2/site-available/, make the following changes and save it as a new file vhost_jekyll.conf.

   ServerName ABC.example.com
   DocumentRoot /var/www/blog
   <Directory /var/www/blog>
   ... keep everything here as is
   </Directory>

   $ sudo ln -s /etc/apache2/site-availble/vhost_jekyll.conf /etc/apache2/site-enabled/vhost_jekyll.conf
   $ sudo /etc/init.d/apache2 restart