In the span of three days, I wrote and actually finished the fourth iteration of my website, aptly titled... website v4. Even though this is literally the first finished iteration of it. Ignore the previous iterations from the past two years (and the fact that I lost an iteration due to a hard drive formatting).

Update [26 July 2020]: The status of this has been marked "work in progress" for the longest time. it's not. It's been done for a while now. Even though the compiler is disgusting to look at and I really need to rewrite it.

So, into the technical stuff. What does this do, how does it work, and any other things.

Just a fair warning: I am not very qualified to write about this stuff. And also this is very substanceless. Cool.

The Goal Of It All

I wrote website v4 with one main goal: to be able to write my posts and projects in Markdown (with YAML front matter serving as metadata). This was an ambitious goal, mainly because of the fact that I have nearly zero experience with JavaScript (what the "compiler" was written in) - or any other programming language, for that matter. The fact that this is still working is amazing.

How It All Works

The compiler is written in JavaScript with Node.js, and utilizes two main libraries:

• gray-matter - used for parsing the YAML into some usable information
• showdown - actually turning the markdown into an html site.

Now, how does it all work? (Or at least, how is it supposed to?)

First, the script (main.js) is executed. It proceeds to read the contents of two preset directories, /blog/md, and /projects/md, where the markdown files are stored. After that, for each file in the directory, it:

1. Reads the file, and saves the content into a variable.
2. Uses gray-matter to parse the file, and save the result of that into a variable.
3. Uses showdown to convert the markdown into HTML
4. Appends some extra HTML to the result. This is where the YAML comes in handy - it plugs in variables in certain spots, such as the title, the date, progress (if the file is a project), etc.
5. Saves the file to the parent directory (of the /md directory).
6. Somewhere along the line, it would update index.html with a little entry so people can actually access it.

And that's how it should work. It's actually a lot messier than that. (Don't read the source code, it's a nightmare.)

And that's all! I hope. I'm not coming back to this. Ever.

Until the inevitable re:re:rewrite,

Andy Chan

(Follow me on Twitter and look at more crimes against humanity on my GitHub.)