This page is part of a series on my blog engine called BlogMatrix. The full series is listed below. Enjoy.
BlogMatrix is a very simple blog engine that I created. In fact the page you are reading right now was created with it. There's no database, just pure HTML, CSS and jQuery. Read on to see how I did it.
I'd always wanted to create my own blog engine purely for the heck of it and the geek factor. Over the years I wrote several versions with varying success but in the end I always lost steam as I switched to using the 'latest and greatest programming language'. Ruby on Rails, ASP.NET MVC, Sinatra and Nancy I tried them all. Don't get me wrong they are all great tools but I was constantly getting bogged down in the technology.
In the end I sat down and wrote out the bare essentials for my blog engine. This is what I came up with:
The solution I came up with was BlogMatrix which you can view on GitHub. How simple is it you ask? Here are the solutions I ended up with.
The downside of using tools such as RoR, ASP.NET MVC or Node is that you have to host it on a specific environment and unfortunately those environments always cost money if you want to use a custom domain name. Throw in a database and you are talking more costs.
This meant I had to come up with a blog engine that would output pure HTML. Once you have pure HTML your hosting options increase significantly.
Hosting Solution: GitHub Pages. By now I'm hoping you've heard of GitHub and are using it for hosting your projects. What some people don't realise is that you can also use it for HTML hosting and it is free! Instructions on how to set this up are here.
I wanted the easiest deployment process possible. This ruled out such arcane methods as FTP, having to log onto the deployment server or configuring a complex deployment utility such as capistrano.
My deployment process had to be as simple as: git push. Can't get much simpler than that!
Deployment Solution: Once again GitHub Pages. Being created by GitHub obviously they allow you to deploy using git :)
I could have just marked everything up straight in HTML but this would become tedious if I needed to add a new menu item. I'd have to edit every single HTML page to add it. Forget that!
Layout Solution: WebMatrix. WebMatrix is a very simple web development tool which is similar in concept to PHP and classic ASP. It provides some of the power of ASP.NET MVC (razor view engine, layouts etc) without the added bloat. Here's an excellent tutorial series by Rob Conery at TekPub.
Finally I wanted the blog to look good on any device whether it be a desktop, laptop or mobile device. I also didn't want to have to come up with my own custom CSS library as I'm not a web developer. I wanted a standardised grid system with access to all the new features you see on modern websites.
Responsive Solution: Twitter Boostrap with Metro-Bootstrap Theme. This was a no brainer. Twitter Bootstrap is an excellent HTML/CSS/jQuery framework with all the bells in whistles. It also has built in support for creating responsive design websites. I used the Metro-Bootstrap theme because I liked the look of it and flat design is 'so hot right now'.