Making a Free Blogging Website

A long time ago…

I tried my hand at building a static website from scratch. No back-end frameworks, no responsive templates, just good ‘ol media queries and CSS style-sheets. Big mistake. What resulted was a monstrosity rife with hard-coded margins, tacky section divisions, and sad modals the likes of which a seasoned web developer would cringe at. For a simple portfolio site, it did it’s job.

But then I wanted to add blog content. I was in for a rough time. I had worked with a number of back-end frameworks (think Ruby on Rails, Django) in the past, but was looking to get something off the ground relatively quickly. It seemed the best option for building a dynamic website for a personal blog was Wordpress. Much like other content distribution platforms, Wordpress is built to reduce the cognitive load of coding up your own custom site. To achieve a desired level of customization, Wordpress utilizes plugins and utilities, some of which cost a developer hefty sums of $$$. What results is something arguably just as complex as a homegrown website which not only makes you rely on templates, but also lacks the ability to finely customize a front-end.

Along comes GitHub Pages and Jekyll…

By using a combination of GitHub Pages and Jekyll, my dynamic website back-end costs me a total of $0. I’ve chosen to attach an alias (justin-selig.com) to my site (JustinSelig.github.io), so the only fee is for this (optional) domain name (~$12/year). Here are the steps to make your own free website with dynamic content:

Prerequisites

• If you’re not familiar with git or version control, check out the official GitHub Guides.
  
• Since most self-respecting software engineers use the git command line interface, I occasionally use this reference cheat sheet for quick and dirty syntax tips.

Steps

1. Set up GitHub account with GitHub pages. Here’s their official documentation.

2. (Optional) Purchase your domain name from any provider. My preference is namecheap because of their friendly UI.

3. (Optional) Customize your GitHub Pages domain name. Here’s a tutorial I found helpful.

4. Learn about Jekyll for dynamically serving content.
   
   • Caveat: There’s a very limited amount of back-end logic you can integrate into your Jekyll site. Here’s a good post summarizing the type of content that could be easily served.
   • Note: If you’re here to build your social-network startup, please consider something a little more robust and scalable.
5. Choose a free Jekyll template for your blog site. Here’s a selection of some. The one I’m using is called Massively.

From the command line:

• Open a terminal window or a command line and cd to that location.
• Then enter: bundle exec jekyll serve. You can now access your new Jekyll site from http://127.0.0.1:4000/.

Massively Features

Auto-Generating Sitemap

• The sitemap is auto generated! Simply change the YAML front matter block of each site. It looks like so…

  sitemap:
    priority: 0.7
    lastmod: 2017-11-02
    changefreq: weekly
  

  Formspring integration

• The contact form below each page on the footer actually collects information! Just change your email address in the _config.yml file!

Best of luck with your next website! Feel free to send me a note with any useful tidbits from your experiences with Jekyll.

-Justin