My Blog
This post talks about everything related to the creation of this blog.
Introduction
I've always wanted to have a space to pen down my experience and thoughts and at the same time providing help and inspiration to others with similar interests. I created this web project in 2019, but took many long breaks inbetween due to life transitions haha. Since then I've revised the design and layout of the page 3 times and finally decided on this theme and structure. I faced plenty of challenges since I've started on this mini-project but unfortunately I did not document down how I solved them. I shall try my best to do that from now so that anyone who reads this and faces the same problem knows what to do.
Why did I chose to create a web project from scratch?
Blogs are not uncommon, theres a ton of free Content management system (CMS) or web builders to use. Examples include - WordPress, GitHub Pages, Wix, SquareSpace, Weebly etc... All of those lack flexibility, which is something that I really wanted in my blog. I wanted the freedom to include perhaps some special animation, or a specific feature like a code block, or position a nice dropdown and carousel somewhere on the webpage. I noticed that most blogs have poor indexing and search features, some of them utilized tags, but i still found it disfunctional. I wanted a user-friendly way for people to directly search a specific an article or a tag. I wanted the creative freedom to add and customize whatever I desire. Its never one and done, there is always something to change. For example, I want to sort my DataTable by the Month/Year - I would not be able to add in such a specific requirement if i were to use a CMS.
Tech Stack?
I used Nodejs with express as the backbone with Bootstrap as my css framework for responsive and multi-device compatibility.
This is my package.json correct as of the date in the changelog. Nodemon is super useful for development & testing on localhost.
"dependencies": {
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"chart.js": "^4.4.2",
"datatables": "^1.10.18",
"ejs": "^3.1.9",
"express": "^4.18.3",
"jquery": "^3.7.1",
"nodemon": "^3.1.0",
"vhost": "^3.0.2"
},
"devDependencies": {
"nodemon": "^3.1.0"
}I also used the following:
- stringMonthYear 1 - to sort by the MMM/YYYY in datatables.
- Prismjs 2 - for the code blocks. Customized copy button logic is added to prism.js and my css file.
Hosting platform
This webpage was originally hosted using Heroku. However, after Heroku changed their pricing plans and removed the free tier, I ported over to Render 3.
Why this stack?
Honestly, there i way too many frameworks/tools to use to build a CMS. I don't have the knowledge and capacity to compare every product and evaluate their pros and cons. I just went with what felt right.
Domain and TLS
I bought this domain from GoDaddy. Previously, I used Cloudflare or free SSL/TLS certificates when hosting with Heroku. Now, Render provides free SSL/TLS yay.
Update: Feb 2025
With the previous setup, I used GoDaddy's DNS services. However, after some research, I found out that using CloudFlare's DNS nameservers provides better control over security features. CF also has some DNS analytics which is presently nicely in a dashboard.
Setting up is pretty easy, just follow the guide here to configure cloudflare dns to work with Render.
From GoDaddy's console, I changed my nameservers to CloudFlare's.
Configure CF DNS to point to your Render service.
Installing Nodejs and npm on windows
I used nvm as my version manager. It provides seemless installation of Node and Npm. Follow the installation guide here.
nvm list available
nvm install 22.11.0
nvm use 22.11.0
node -v
npm -v
npm startDesign & Inspiration
I'm going for the plain pastel theme which is light on the eyes. There are contrasting components that are mostly of a darker background color. Also, many thanks to Fatima who drew the icon you see above!
Font
My font is: font-family: "Montserrat", sans-serif. With a weight of 410.
Update: Apr 2025
I had to change my font family as i realised it was giving me some cut off text when viewed in certain devices with different zoom / screen size. A very useful tool i found was to use Google Fonts. You can choose from a selection of different font families and play around with the weight - among other things. To adapt it to your webpage, simply follow the instructions and copy the code chunk into your HTML and CSS files.
Future Plans
I aim to progressively increase the number of features on this web app, which will probably result in using more libraries. I may minjs my javascripts next time, but meanwhile, free feel to take a look at some messy code :)
I will add a segment here to explain the structure of the web app too.