Shortly after building this website and beginning to make posts, several of my peers expressed interest in maintaining a similar website of their own. I realized that many of my friends additionally have the technical skills to do so, but simply don’t have a place to start or a resource to learn from. I hope for this post to be that starting point, and can offer myself as that resource.

Table of Contents

• Table of Contents
• Tools and Services
  • Editor: Sublime Text 3
  • Markdown and Liquid
  • Jekyll
  • AWS and s3_website
  • Domain name
• Getting Started
  • Step 1: Learn your tools
    • Markdown
    • BASH
  • Step 2: Set up hosting
  • Step 3: Building your site
  • Step 4: Deploy!

Tools and Services

This website is written in Markdown and Liquid, built using Jekyll, and deployed using s3_website to Amazon’s S3 hosting platform. I will explain each of these components below.

Everything is free unless otherwise noted.

Editor: Sublime Text 3

I do all my coding and writing in Sublime Text 3. Learning to use a powerful editor will make the process of writing posts, and more generally the process of interacting with your computer, much more efficient and enjoyable. ST3 supports great tools like regular expressions (learn here).

Markdown and Liquid

Markdown is a simplified markup langauge in which I write the individual posts on this site. Markdown “code” looks like this:

This is an example of Markdown "code"

[This is a link](http://example.com)
![This is a caption](/img/picture.jpg)

This is a list:
- item 1
- item 2

Liquid is a template language in which you write layout formatting for how posts should be displayed. Liquid also allows you to do neat things like embed code, demonstrated above.

Learning Markdown is easy. For our purposes, you really won’t need to learn Liquid as you can use open-license templates made by others for simple sites.

Jekyll

Jekyll is a simple tool written in Ruby that builds a static, blog-aware website that’s ready to deploy.

Once you’re set up, you can update your site with the single command jekyll build.

AWS and s3_website

I use Amazon Web Services for hosting.

I host this website on the S3. Its cheap (~$1 monthly), readily scalable, and ridiculously reliable. If its good enough a hosting platform for Netflix, its good enough for me.

For better server response time around the world, I use CloudFront as a distributed content delivery network - CloudFront essentially mirrors my S3 content on various servers around the world so people anywhere can get to this site quickly.

Once this site is built on my local computer using Jekyll, I use a tool called s3_website to push it to my S3 bucket for all to see. Since s3_website supports Jekyll natively, you can use the single command s3_website push once you’re set up.

Domain name

I register my domain name, headclone.com, with eNom (~$12/year), and point it to my S3 bucket with Route 53.

Getting Started

Step 1: Learn your tools

Its very easy to get overwhelmed and give up when entering the world of web development if you don’t have a good grasp of the tools you intend to use. For this reason, I recommend you commit a day or so to thoroughly learning your tools before beginning the process of building and deploying your site.

Markdown

You will be writing all your posts in Markdown, so its absolutely critical. Markdown is very simple and easily learned in an hour, you can do so using this resource.

BASH

BASH is a shell script language for Unix family operating systems, which includes all modern Linux and Mac OSX distributions. The Windows PowerShell also uses BASH. Shell scripting allows you to directly send commands to the computer you’re working on, and use tools like Jekyll and s3_website.

You don’t really need to know BASH too well beyond a few maintenance commands, but feeling comfortable at the command line will accelerate your workflow. You can learn more BASH here.

Step 2: Set up hosting

Your next step is getting set up for hosting and getting your domain name.

Once you’ve purchased and registered your domain name, use this guide to set up a hosting bucket on Amazon’s S3 for your site to live in.

Step 3: Building your site

Now that you’ve got an S3 bucket set up and attached to your domain name, we can get started on building your site.

Install the following tools:

• Jekyll (and its requirements)
• s3_website

You can use the standard Jekyll theme, but most everyone wants to customize their site. You can learn the Liquid template langauge and make your own, or modify an open-license theme like I did. Here’s a list of a bunch of popular ones.

Step 4: Deploy!

Once you’ve got a few posts written and you’re ready to upload, go ahead and deploy using s3_website!

To update this site, I simply execute the following commands in a terminal:

$ cd /Dropbox/Website/		# change directory to where the site is
$ jekyll build 			# build the site using Jekyll and my Liquid templates
$ s3_website push		# push the site to my S3 bucket

Good luck to anyone using this guide, I hope it’s a good starting point! If you have any suggestions or have a question, feel free to reach out below.

• ← Previous Post
• Next Post →