One of my projects the last week of winter break was to redo my personal site. My previous site was built using Pico, a flat-file CMS built on PHP. I had built the entire front end by myself, as well as done some customization on the Pico engine itself to get it to fit what I needed it to do. The site was working just fine, and I set out to improve it and add some new posts to it. That little project ended with a complete rewrite of the site code from the ground up, and the building of a simple CMS from scratch.
Here's an overview of how the new site works.
Server
I decided to scrap PHP for the new site and work on polishing my node.js and ExpressJS skills. The site is hosted from a virtual private server that I own. That VPS is running a few Node.js apps from various projects, as well as MongoDB databases for each site and a Redis instance for storing sessions. The whole thing is kept running using PM2.
Setup
I started with a basic ExpressJS project, using HandlebarsJS as a templating engine. I added in routes to display pages as such:
- / - homepage
- /:category - show a specific category of post
- /post/:post - show a specific post
- /page/:page - show a specific page
My site is able to show both posts and static pages, as well as categorize posts into various categories which are visible on the sidebar.
Here are the models for those:
var Post = new Schema({
title: {type: String, required: true},
url: {type: String, unique: true, required: true},
markdown: String,
html: String,
categories: [ { type: ObjectId, ref: 'Category'} ],
created: Date,
displayOnHome: { type: Boolean, required: true, default: true }
});
var Page = new Schema({
title: {type: String, required: true},
url: {type: String, unique: true, required: true},
markdown: String,
html: String,
});Each post and page (including this one) is written in Markdown format and converted into HTML for me automatically.
Admin page
I also created a back end to my site that I can log into to create and update posts, pages, and categories, as well as view usage data from my site. It also allows me to set 'redirects', which are redirected URL's. For example, I have the ability to redirect ianmcdowell.net/whatever to ianmcdowell.net/posts/whatever.
Styles
The style of the site is much more minimalistic. The entire stylesheet was written by me using the LESS preprocessor. Everything was designed to be responsive and work on mobile, tablets, and desktop browsers.
I used a monospace font for my social links, and use the :after selector in CSS to append URL's to the links on hover. Take a look at your browser's inspector for more info.