How and why I built my blog from scratch

I've recently rebuilt my blog from the ground up. ( Update: I've actually redesigned it twice since this post was written! ) I did this as an excuse to get better at PHP, and have some fun with some technologies I've been meaning to have a play with.

Posts written in Markdown files

I played around with some static site generators, like Jekyll and Middleman. In the end I decided to write the site from scratch in php. One thing I like about static site generators is the ability to write posts in Markdown. For those who don't know, Markdown is a syntax that lets you write text with certain symbols, and then it can be parsed to form HTML markup. Headings can be written with # symbols in front of text, like ##Heading 2, em tags can be added around text by wrapping text in underscores (eg. _italic_), and so on.

Markdown was created by John Gruber, and a full rundown can be found at the Daring Fireball website.

Being able to write posts directly as files, and use version control to track them, without needing to save posts to a database is pretty neat.

To parse the markdown to html, I'm using a PHP library called Parsedown. I used Composer to track Parsedown as a project dependency, and Composers autoload feature to load the library.

PHP achievements unlocked

I had to write a bit of PHP to get the job done. One thing I wanted to do was to load all of the post markdown files into an array, along with their file created date, and then sort them to show the latest created file at the top of the articles page, and on the home page. I did that by creating 2 arrays: one of all the file titles, and one of their file created date (using PHP's filectime() function).

I then combined the two arrays, so that the key was the unix timestamp of the file creation date, and the value was the file title. This allowed me to sort them into the correct order.

array(5) {
  [1470316393]=>
  string(51) "inc/posts/post--How_I_built_my_blog_from_scratch.md"
  [1470313675]=>
  string(68) "inc/posts/post--Tubular_animated_spinning_circles_with_CSS_and_JS.md"
  [1470313667]=>
  string(75) "inc/posts/post--Offline_API_docs_at_your_fingertips_with_Dash_and_Alfred.md"
  [1470313658]=>
  string(51) "inc/posts/post--Highlights_from_DrupalSouth_2015.md"
  [1470313647]=>
  string(33) "inc/posts/post--Always_learnin.md"
}

Random images with the unsplash.it image API

I came across unplash.it, a site that provides a simple API to let you load images from Unsplash, a free stock photography site that has some really amazing images. You can load a random image on each page load, at a specific size in pixels, and even select greyscale only images. Here's how I've done just that for the main banner image, as well as using CSS blend modes to achieve a nice multiply effect.

  
  .site-banner {
    background-image: url(https://unsplash.it/g/1200/800?random);
    background-color: $color1;
    background-blend-mode: multiply;
    background-size: cover;
  }
  

Animated typing text with Typed.js

In the banner I've got some text that is animated to look like it's being typed and deleted. I've seen this animated text typing effect on other sites before, and I found Typed.js that lets you achieve it pretty easily. Extra points for using HTML Emoji's for the Thumbs up and the beer in the footer.

👍 🍺 🍜

Code Syntax Highlighting using Prism.js

Prism.js is a library that styles code blocks to look nice, like the one above. There are several themes to choose from, and it supports heaps of different languages.

Setting up an ubuntu server on Digital Ocean, deployment, and more

I'm hosting my site on Digital Ocean. It's always helpful for me to install a Linux server from scratch, and step through the process of installing a LAMP stack. I've been reading up on ways to use Git for deployment. I've been following the Git tutorial that Atlassian provides. It's still a work in progress, and I'll probably write another post about it at a later date. I've also adopted bitbucket and Jira to manage my repo and keep track of this project a bit more formally. Even though it's only a personal project, using Jira for project management helps me to get a bit more organised when planning features for the site. It also helps to skill up a bit more with Jira.

Summing up

It's been heaps of fun iterating on this site, and I'll continue to do so.