How is this website built?

Static websites like this are built using a combination of HTML/CSS and javascript. This site doesn’t use any frameworks or libraries; be it JS or CSS – as is probably apparent.

But it does use a hell lot of scripts for content generation and does heavily rely on jinja2 (refer docs) for templating.

Building the webpages

The most important part of a website is the content you are serving. My choice was to keep the website content-first as opposed to UI-first, but at the same time, well-organized. Here are the tools used for it:

LibreOffice Writer

LibreOffice Writer is a word processor like MS Word except free and open source.
Like MS Word it has ‘export to HTML’ functionality, essentially allowing the user to easily write articles focusing on the content than the HTML code.

Mind you, you still might need to take care of the formatting using CSS while integrating with your webpages.

Layoutit

Layoutit is the ultimate CSS grid editor on the web. I can’t stress enough on how many hours of div centering and manual layouts this simple tool has saved me.

Jinja2

Jinja lets html document(s) be embedded inside other documents. Thus reducing effort in copy-pasting boilerplate / recurring code like sidebars and footers.

Refer this article to understand how the jinja2 commandline utility can be used for non-flask/Django related applications:

Jinja2 as a Command Line Application

Make

Makefiles are another tool that lets me manage the project build; what all parts of the website need to be rendered or re-rendered – articles, sitemap etc...

Make is originally intended for C++ projects. But hey! If it works, it works. Best part is you don’t even need to learn to write Makefiles – ChatGPT is incredibly good at writing them for you.

Miscellaneous scripts

Take a look at the sitemap_generator.py script that converts the output of the ‘tree‘ command to generate a sitemap.

Git

Git is a version control tool – basically letting you save, undo and redo changes in your project; lets you track progress on the project and feel good about coming a long way. Works best with a git extension like GitGraph on VSCode.

Hosting

Now there are 2 main steps involved in hosting your webpage:

• •First, you need a platform to host your website files and serve them 

• •Second, you need a custom domain name registration to serve these files under your own website name 

Hosting your website files

The cheapest option is to host these files on GitHub pages – which is free of cost. The free tier lets you host files of unlimited size as long as your repository is public.

If your website follows a directory structure with relative / root-relative links – then the process is very straightforward (refer docs)

Domain name registration

There are several cheap options to buy a domain name – which is the name of the website you want hosted. GoDaddy and Namecheap are popular options. I went with Namecheap.

And that’s it !! Open up a new tab and type in your website URL and hit ‘Enter’. Now, you too have a website you can call your own.