Explore topics

Stack I Use to Build this Blog

First of all, this website is fully build on HTML, CSS and no JS. I always feel the idea of including JS in simple site is quite overkill and to be honest, not very user friendly. Taken from concept simple is more, I decided to build things out using simple tech stack.

fitri.me screenshot

But content management are not always easy to handle even when it's simple. A blog requires frequent updates, posts have a standard template plus every posts update requires index page to be updated. Copying the html template for each post and updating the index page every time is not a productive move.

Enter Pelican, a static site generator.

I've been a fan of static site generator for quite some time, I tried out multiple static site generator before including Jekyll but end up choosing running Pelican for this site for a very simple reason. Python the programming languages I familiar the most and it's my daily driver. If there's any feature I need but not supported officially I could write it myself rather than waiting for somebody to write it.

I did consider other options as well (other than Wordpress). Ghost is one of good CMS I heavily considered, the headless option will allow me to pick any kind of front-end to use but still I'll prefer solution without DB. There's another CMS type without DB but using just normal flat file but at the time still considered dynamic, flat file CMS. But I enjoy writing in plain text and I don't need any dashboard, so I prefer something much simpler than all these options.

Just like Jekyll and Ghost which utilised templating languages capabilities to parse content, Pelican using the same concept with templating engine, Jinja. By just looking at the html code, we can pretty much understand what goes where.

Since the format used still .html I decided to try out new method for styling the page (new to me) with Tailwindcss. I've seen heated argument on Tailwindcss but I really have no ideas what it all about. My thought after I build this blog with Tailwindcss? I love it. After some time you started to understand the logics behind the naming and started to input the class name naturally.

Next, I need a method to view the website while develop and making changes. Sure I can use live server in VSCode and there's built in webserver in Pelican but I was looking into something more practical and lighter.

I came across Vite after create-react-app removed from React official documentation, I find it easy to use, light and blazing fast so I decided to integrate it as my development environment server for this project. As to manage the commandline between the components I use npm script with concurrently module installed. The dev and build command will run different command set for development and deployment.

As for final part the deployment production server, initially I want to host this blog myself at home on my Raspberry Pi home server but end deciding to go with Cloudflare page instead. I've been using Cloudlafre to manage my domains for few years now and finally became their paid customer when I fully transferred my domain there. Cloudflare have seamless integration between services and deploying this blog from Github is just few click.

There you go all the stack I use to build this site. For technical details on how I combined the stack and build for development and production I'll write different post for it. Here's the summary for everything:

  • Pelican - Static site generator for content management
  • Tailwindcss - CSS framework for styling
  • Vite - Development server
  • npm - Package manager and scripting
  • Github - Version controller, backup and deployment medium
  • Cloudflare Page - Deployment server

Published on