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
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.pug, and contains the header, with my name and contact info.
main_header.pug, and is used for all blogs I write-up.
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
(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
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.