Independent on my journey
Tags: selfhostingjourney, creativefreedom, webdev
Published: 2024-01-11 16:12:35

---
title: Independent on my journey
published: true
description: Embracing the joy of creative freedom and a love for my platform, I migrated to a self-hosted blog. Powered by Webpack, EJS, and Markdown, my content enjoys safety from arbitrary moderation, allowing me to express myself authentically and securely.
tags: #SelfHostingJourney #CreativeFreedom #webdev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-11 15:23 +0000
---

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.
```javascript
// 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:

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

```html
// 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:

![Image of self hosted blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yrlgjnfd4kry52by7oi.png)

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)](https://itmrav.com/blogs.html) but mainly here