Jezra.net

Building This Website

It all started with a desire to simplify the way I maintain my website as well as the way I create and upload new content. For me, this means being able to write shells scripts to automate as much of the process as possible.

The Problem

The other day I took some pictures and I wanted to post the images online for my friends to see. Due to the 10GB/month datacap on my internet connection, I only wanted to upload the files to a single location, without granting any company a license to freely use my images.

The Options

Install and configure Wordpress on a server somewhere was the best contender. This would involve setting up a database, keeping Wordpress secure, configuring PHP, and trying to find a nice simple Wordpress theme or figuring out how to style a Wordpress installation. That is just not simple enough for me, so I opted to go simple. :)

The Goals

The (current) Result

In a nutshell, I now have a minimalist, statically compiled blog/website and only updated files are actually pushed to the server. What I wanted to be simple, is quite simple, and I am rather pleased with the outcome.

How was it done?

Compiling

The 'simple' source files for generating HTML and CSS are written in HAML and SASS respectively, and the compilation itself is done by Stasis. Actually, quite a bit of the HTML is generated from Markdown within a HAML source file.

In my blog project directory, there is a directory named source that contains all of my source in a directory stucture that I want the resulting HTML to have. Once Stasis is run, a directory named public is created and within will be the compiled HTML, CSS, as well as copies of other files (images, audio, video, etc) from the source directory.

Uploading to my server

First, I follows some instructions for using git to copy files to a server. There were 2 things that I need to change for my setup.

  1. The remote repo denied recieving files until I ran on the repo git config receive.denyCurrentBranch warn
  2. The .git/hooks/post-recieve script in the remote repo was edited to cp the newly received files to the directory used by the remote computer's HTTP server.
  3. locally, I cloned the remote repo into push_dir in the same directory as my source and public directories.

From there, all I needed was a short shell script to:

Wrap it up

Well there you have it, the basic explanation of how this site was created. Now when I want to write a post, I create a file named in YYYY-MM-DD format within a certain directory, write some markdown, and then run a script.

Nice and simple. ahhhhhh :D

The Continuation

By no means is the site now 'feature' complete. There is plenty of room for me to add bloat, and at some point I will end up writing some javascript to display an enlarged version of an image… or can I do that is CSS3?