March 3rd, 2019
This website was the first web dev project I’ve ever done.
It was built from scratch using plain
HTML, CSS, JS, and a little bit of
jQuery mixed in.
Web development is… interesting, and different from what I’m used to with
C#. I spent a lot of time looking up how to accomplish what I wanted, be it with the CSS styling and animations, or scripting.
At first, I didn’t want to create a static HTML website. I didn’t want to go about manually adding links to each post I made. At the same time, I didn’t want to use a prebuilt CMS, because this was, first and foremost, a project to learn front end web development, and a portfolio second.
I also didn’t want to use any libraries or frameworks such as React or Angular. I didn’t want to spend the time learning them before making sure I had a good grasp of the basics of web development.
I faced several challenges getting everything to work correctly.
Using a CMS for the blog was overkill, and, like I said, I wanted to learn the basics. I didn’t want to deal with backend or a database on my first project. While researching, I stumbled upon Jekyll. It seemed like it would have been the ideal solution, but using it meant giving up on learning web dev on this project. It did, however, inspire me.
I developed a simple app in
WPF, that would search for
.htmlfiles in any given directory, then generate a
JSONarray based on the data it found, which is located in a
.txtfile with the same name as the
JSONdata contains a title, description, date, tags, a cover image, and a path for each post.
Using this data, I was able to create a simple search system, and a way to generate links to all the pages on my website, simply by running the app and updating the
I didn’t want to reuse the same
HTMLcode for the header in all of my pages. I was looking for ways to somewhat automate the process, and if I wanted to change the header and nav bar later on, I didn’t want to manually go through all of the pages in the website and replace the code. So I created a
In addition, I tried several things that didn’t end up panning out:
I created a script that loads the content of the
.htmlfiles into a div, similar to loading the header. The idea was that I’d dynamically load the content, so that I’d only have a handful of pages to take care of, and the rest would be generated on the fly as requested. I had a working prototype, but ended up scrapping it because it meant that the website would be a Single Page App, which is not really suited to a blog. I couldn’t find an easy way to take care of the URL routing issue without a backend or using a framework. A blog wouldn’t work well if you couldn’t go to specific posts with a URL, would it? Having to search every time would get annoying quick.
The posts are written in
Markdown. At one point, I wanted to skip converting the
HTMLmanually, and instead use something like Showdown at runtime. I ended up scrapping that idea too, and converting the
HTMLusing an online converter such as Dillinger or the Markdown PDF extension in VSCode, making minor adjustments, and uploading the
I want to add post groups, so that posts concerning a single topic or project can be shown together.
I might consider adding comments, which might be tricky considering how I implemented the blog itself.