How my custom built blog works

Why a custom blog?

So first of all, why did I decide to build my own blog? Lets take a look at the alternatives.

The first alternative is to use a platform like dev.to or medium where you can blog for free and even get traffic through their post feed for free. The downsides are that the traffic happens on their site, so they basically can monetize your work and you have very little say in that.

Hosted blogging platforms like Substack allow you to monetize your content, which is better but it’s hard to customize to your needs. Also I don’t think they offer monetization alternatives to the subscription model like ads. Another downside here is that you grow your audience on their platform. What if you decide to block you or you want to move away for different reasons?

Another alternative to building my own blog was to use a blogging software like Wordpress, you can get a hosted instance of Wordpress from hosters like Strato which is popular in Germany. Wordpress feels bloated to me and also you need to get into building your own custom theme if you really want to customize it in the way you want it. Also getting Markdown support to work nicely can probably be hard.

So these were the reasons I built my own blog

• In case I grow and get a bigger audience in the future, I want to be able to monetize my work
• I want no bloat. Very little amounts of dependencies (JavaScript, Stylesheets, etc.). Very quick loading time
• Very small barrier to write and release new posts
• I want to customize my blog to fit exactly my needs (I’ll get into what that exactly means to me soon)

I know, my blog looks very minimalistic as of now. And that’s exactly how I like it. No distractions, just the post. Default Wordpress blogging Themes have advantages like showing related or other posts when reading a blog post. This probably reduces churn. I will implement that in the future, but right now, that’s not my main concern. I wanted to have a minimalistic design without any bloat and that’s exactly what I achieved.

Quick and easy to write posts

Next, I wanted to make it as easy as possible to start writing a post and publish it. I simply login to my site, visit the create post route and start writing. There are only five inputs

1. A Slug for the post url, like how-my-custom-built-blog-works
2. A Status whether it’s a draft or a published post
3. A Title to display in the post, in the browser tab and also for SEO
4. A Description also for displaying it in the post, browser tab and SEO
5. The Content

Writing post content

Now the Content is a big textarea with some magic in it. First of all, I write the blog content in Markdown which then gets translated to HTML. Markdown is just quicker to write than HTML and therefore lowers the barrier to start and keep writing. The markdown I write gets converted to HTML with kramdown everytime I create or update a post. That way it does not need to get converted everytime a user loads a post.

Next, I use an easy to use JavaScript text editor attached to that Textarea called CodeMirror. CodeMirror allows me to have some highlighting for Markdown like seeing text written with two * asterisks around it as bold before even rendering it to HTML. Also CodeMirror has support for vim bindings. In case you don’t know what vim is, you can read my Post series about it. TLDR: vim is an editor but also can be used as a set of keybindings to increase your speed of editing text or code.

Lastly, I wrote some custom JavaScript code which allows me to simply paste images from my clipboard to this CodeMirror Textarea. I mainly use Mac OS which has a nice keybind for taking Screenshots from a custom screen area and storing them in your clipboard (Cmd+Ctrl+Shift+4, I know, kinda hard to press at first, but it’s magical). Once I made a screenshot from something like this next image, I simply place my cursor wherever I want to insert that image and press Cmd+v.

Whenever I paste an image, an endpoint gets called in the background where this Image gets uploaded to, this endpoint returns and URL which then gets inserted at my Textarea cursor position in markdown syntax to display an image. It looks like this: ![image](/uploads/file_upload/image/33/image.png).

All these things are tailored to my desires and make it really comfortable for me to start writing and publishing posts without spending a long time fiddling around with the specifics of something like Wordpress.

How long it took me

Rails is awesome. It took me a while and a patient customer to realize this. But thanks to Rails, Tailwind and my knowledge in Frontend development, building this production ready with all the mentioned features and deploying it to a Linux Server took me less than a day.