this post is pending update as of September 05, 2017. please get in touch if you plan to use this guide.
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
- Getting Started
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:
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 is a simple tool written in Ruby that builds a static, blog-aware website that’s ready to deploy. To use it, you’ll need a Mac or Linux computer.
Once you’re set up, using Jekyll for updates is as simple as
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, using it is as simple as
s3_website push once you’re set up.
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.
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 is a shell script language for Unix family operating systems, which includes all modern Linux and Mac OSX distributions. 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.
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:
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:
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.