Making a Free Blogging Website
5 steps to getting started with a dynamic website in Jekyll.
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
-
Set up GitHub account with GitHub pages. Here’s their official documentation.
-
(Optional) Purchase your domain name from any provider. My preference is namecheap because of their friendly UI.
-
(Optional) Customize your GitHub Pages domain name. Here’s a tutorial I found helpful.
- Learn about Jekyll for dynamically serving content.
- 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