Website tech stack (2015)

2015-12-21

Author’s note: This was how I originally had my website set up back in 2015. I’ve migrated this post from my now-defunct blog for posterity.


In this post I’ll detail what technologies this site uses and how exactly I have it set up to quickly deploy new builds. The two main reasons for this post are:

  1. I think it will be useful to people looking to easily set up their first website
  2. To document the process for myself, in case I ever forget how :P

Overview

Here’s the deployment process:

  1. (Client) Files are changed.
  2. (Client) Changes are committed (git commit)
  3. (Client) Changes are pushed to your server (git push)
  4. (Server) The site is automatically built and deployed
  5. (Server) The site is automatically updated on GitHub

Setup

Install prerequisites

Ruby

It is recommended to install Ruby using the Ruby Version Manager (RVM). See the link for detailed instructions.

Jekyll

gem install jekyll jekyll-paginate

Nginx

This varies depending on your distro of choice. For CentOS and RedHat based distros:

yum install nginx

Add the following server block in nginx.conf

This sets up nginx to use this server block for incoming requests to the example.com domain. The root option specifies which directory to serve files from. The index option specifies what files to try to serve if the request URL doesn’t explicitly specify a file (for example, /blog/ will serve /blog/index.html).

server {
    listen 80 default_server;
    server_name example.com;
    root /var/www/website;
    index index.html index.htm index.php;

    location / {
    }
}

Create a bare git repository for your website

Assuming you already have your website on GitHub or some other remote service, first clone your website’s repository as a bare repository. This sets up a Git server, for lack of a better term. You can now push changes to this repository.

git clone --bare <githul_url> ~/website.git

Set up the post-receive hook

Here we set up a script to execute every time your bare repository receives a commit. This script is located in ~/website.git/hooks/post-receive and will do the following:

  1. Clone the bare repository
  2. Run jekyll build to build the files
  3. Deploy the built files to the web server
  4. Push changes from the bare repository to GitHub
#!/bin/bash
JEKYLL_CMD=/usr/local/rvm/gems/ruby-2.1.5/wrappers/jekyll
BUILD_DIR=/home/ben/website-build
SOURCE_DIR=/home/ben/website.git
DEPLOY_DIR=/var/www/website

git clone $SOURCE_DIR $BUILD_DIR
$JEKYLL_CMD build --source $BUILD_DIR --destination $DEPLOY_DIR
rm -rf $BUILD_DIR
cd $SOURCE_DIR
git push --all

(Client) Clone from your bare repository

This part is executed on your client machine, not your server! This assumes you already have SSH access to your server.

git clone ssh://user@example.com/home/ben/website.git

Finish

And that’s it! Now on your client machine, you can make changes to files. When you want to deploy them, simply commit and do git push. Your changes are pushed to your git server, which executes the post-receive script that does deployment and pushes the changes up to GitHub.

Additionally, you can install Ruby and Jekyll on your client machine to preview your changes before pushing it. To do so, run jekyll serve in your website’s directory to start serving on localhost:4000.