I want to emphasize my love for this the blogging space, where I can express my thoughts and projects that I am working on. However, I found myself at the mercy of moderators who can be triggered by any comment. One bad experience stands out when I commented on a particularly controversial article. The article drew an inappropriate comparison, likening company preferences for TypeScript to how certain groups of people strongly favor a particular religion.

I attempted to steer the conversation towards a more technical discussion, disregarding the sensitive religious aspect. To my surprise, a few hours later, I received two notifications. One was a reply to my comment, and the writer was rude. The other notification informed me that one of my blog posts violated the terms of service due to the use of a particular tag.

It dawned on me that I could lose all my content on this platform simply by upsetting the wrong person. In response, I took the precaution of downloading all my posts in Markdown format, along with all associated images. Subsequently, I added all the blogs to my personal website and established a secure and controlled environment for hosting my blogs, ensuring their safety and integrity.

Tech Stack I Use:

For the technical infrastructure of my self-hosted blog, I opted for a robust set of tools:

Webpack with EJS:

I leverage Webpack in conjunction with EJS for efficient bundling and rendering of my blog pages. EJS provides a flexible templating engine, allowing me to structure my content seamlessly.

Markdown to EJS Conversion:

I've developed a script that converts Markdown files to EJS, ensuring compatibility with my chosen templating engine.

Metadata Extraction:

Using regular expressions, I extract key-value pairs from the headers of my Markdown files. This process enables me to gather essential metadata such as titles, covers, and other relevant information.

// Regular expression to match key-value pairs
const regex = /\b([a-zA-Z0-9_]+):\s*([\s\S]*?)(?=\n|$)/g;

Markdown Rendering:

I utilize the markdown-it library to render Markdown content, enhancing the readability of my blog posts. Additionally, I employ highlight.js for syntax highlighting, with the Atom One Dark theme for a visually appealing code presentation.

Customization with mila:

The markdown-it-link-attributes (mila) extension allows me to customize link attributes, providing an extra layer of control over the appearance and behavior of hyperlinks in my blog posts. Here's a snippet of included libraries:

const MarkdownIt = require('markdown-it');
const hljs = require('highlight.js');
var mila = require("markdown-it-link-attributes");

// Linking to the highlight.js Atom One Dark theme
<link rel="stylesheet" href="../../node_modules/highlight.js/styles/atom-one-dark.css">

I've found this setup to be exceptionally effective in creating and maintaining my blog, providing a seamless and personalized experience for both me and my readers.

It took me about 2 afternoons:


And I think that result is decent given that I am full stack developer that works on business and service software.

Please let me know what you think and feel free to read my other articles while they are here ;)

Or there is a backup Backup Link (other half) but mainly here