Creating This Site


I started working on this site, to simply remove some repetitive HTML, and ended up accidentally overhauling the entire thing, and learning an entirely new template engine markup language.

Previously, this simply ran on an nginx server that just served some static files. It wasn't much, but it worked, and that's all I truly cared about. Stil, one thing I really wanted to do was improve the HTML that I had written, not even the look of the site. The header for my name and contact links was copied to each file, and I had some in-line CSS that really wasn't nice. And if I ever needed to change some links, forget it.

Thankfully, I decided to finally do something about it. Although there may have been other ways to accomplish what I wanted, my first thoughts were PHP and Node. Although both really suck (one is JavaScript, kinda bad, and the other is PHP, kinda bad), but I went with Node because I was much more familar with JavaScript than PHP. Like many, I'm using express web framework, in conjunction with pug template engine.

As I began to write Pug, I realized it's actually a very fluent and logical markup. Even calling it a markup isn't perfectly honest, as it has some real power when using it's inheritence/include features.

The site's structure in Pug goes like this:

main.pug contains all the always-required stylesheets/scripts (mostly Bootstrap/jQuery)
main_header.pug inherits main.pug, and contains the header, with my name and contact info.
blog.pug inherits main_header.pug, and is used for all blogs I write-up.
creating_this_site.pug inherits blog.pug, and is what you're reading now!

By no means am I a web dev, and never plan to be. That considered, I still was able to figure out quite a bit of CSS styling on my own. There were a few HTML elements that I hadn't ever seen (or have any clue what they did...), but it didn't take too much reading up to figure them out.

Along with many other neat features, Pug lets you insert some other types of content directly into the markup, and it can transform that into some other compiled/rendered content. They call these filters. For example, all these blogs I write are in markdown! I don't write all this in Pug syntax even. I simply write my markdown directly into the Pug file, and prefix it with the :markdown-it filter. (although this filter doesn't come with Pug.)

The other thing I wanted to make easier for me was to update important, frequently changing, or just personal information. That's where config.json comes in useful! When a page is rendered in Pug, I can pass a JavaScript object to the page itself. I pass an object that contains a global property, which is a global config that every page gets. That object has another property called page, which is the page-specific config. I haven't used it yet, and I'm slowly believing of redoing it somehow, but no matter; that's how it currently works.

The only thing I truly struggled with on this was choosing a damn font. I can't believe how difficult it was, for no reason. It'll probably change.