Welcome to My Blog

Hello and welcome to my blog! This is my new site, built with Next.js, React, MDX, and the help of a bunch of other open source modules.

After years of thinking of starting a blog I finally did it! Here is why and how.

Why?

I always wanted to have a place where I can share longform writing without the restrictions of a publishing platform (like Medium) or the hassle of maintaining a self-hosted blogging platform like WordPress or Ghost.

I also wanted to have full control over the reading experience of my blog, so instead of using a publishing platform like Medium, I decided to build this blog on my own. Now I have my own place, with my own style and my own structure; platforms like Medium don't give me this flexibility.

How?

This blog was mainly built with Next.js, a framework that makes it easy to build server-rendered (or static!) React apps/sites.

Static

This blog didn't need to generate dynamic content at runtime, so I decided to serve it as a static site instead.

I use Next.js' export functionality, which takes your application written in React and renders regular, static HTML files. After that, you can use any web server like NGINX or any cost-effective static site hosting service like Netlify, ZEIT Now or even GitHub Pages to host your site. You can even host it straight from an AWS S3 bucket.

Static sites have lots of advantages such as shorter load times, cheaper hosting, better SEO, and less platform dependency when it comes to deployment. If you try hard enough, you might even get away with having a site that works without JavaScript (with limited functionality, of course).

Syndication

I am not a huge fan of feed readers, but I know that many people are, so I wanted to support major syndication formats. And I wanted to offer full support not just a last-minute, half-baked feed, but a full-fledged feed with inline HTML content.

It's good etiquette to include your blog posts' content in your feed instead of just a preview or summary. It allows your readers to consume your posts without leaving their favorite feed reader / aggregator.

Screenshot of Feedly displaying one of my blog posts embedded, instead of a preview.

To achieve this, I wrote a script that parses every blog post's metadata plus its content in plain HTML and generates a feed at build time. Using the feed module, the script generates feeds for multiple syndication formats (RSS 2.0, Atom 1.0, and JSON Feed 1.0) with one single API.

Open Source

This blog is built on top of lots of open source software. Here is a list of all the open source modules from npm that I used to build this site:

Note: These are just my direct dependencies. The total dependencies count (including indirect dependencies) is 649!

JSX in Markdown

This blog post is an MDX (i.e. Markdown+JSX) file. MDX allows me to do awesome stuff like importing this project's package.json and package-lock.json files and then displaying a list of all my direct dependencies and a count of the total npm dependencies used by this project.

MDX exports my posts as React components, allowing me to modularize and structure my application without going crazy. I can include all the metadata about my post right in the .mdx file, so I don't have to host or maintain any database or list of posts.

This is how this post's meta object looks:

{
  "id": "welcome",
  "title": "Welcome to My Blog",
  "description": "A place for me to share my ideas, thoughts, and projects. Built with Next.js and hosted on Netlify.",
  "date": "2019-03-01",
  "tags": [
    "project",
    "next-js"
  ]
}

Anyways!

Welcome to my blog! Make yourself at home, read some of my posts, learn more about me, and subscribe to my feed. You can also follow me on Twitter or see my open source projects on GitHub.