How I made my personal blog

Wow, what a time, nowadays you can create a website even not knowing how a VS code or Sublime icon looks like, so many no-code tools available, Readymag, Webflow, Tilda, Wix, WordPress is still around, Ghost, wow.

But of course, I chose a developer way, I created my website from the ground up by myself 🤯

The goals

When I was thinking to create my website, I was certainly sure about one thing, It should not require a CMS to work, I wanted it to be as autonomous as it can be. Why no CMS?

Well, I do not plan to write posts each and every day, I don't need it to have authorization or some sort of business logics, my posts will not have rich media content other then some gifs maybe here and there and code examples, and I didn't want to think about hosting.

So, if no CMS, then it should be static, but not just plain HTML and CSS, it is not too comfortable.

The tools

Generating a static website from some sort of source in 2021 is a very common approach. Developers often choose Gatsby for this kind of task, there is also Next.js, or Nuxt.js for Vue lovers, I chose the second option, as I'm very familiar with React.js and use it every day, my choise was a bit bias. It allows you, as a developer, choose wherever you want to use SSR (Server Side Rendering) and process your files dynamically on each server request, or SSG (Static Site Generation) that will basically build your website from react components and convert all of this to plain good old HTML and bunch of optimized CSS files.

Okay, Next.js is great, but writing posts in react components isn't, right? Here comes Markdown to help and MDX specifically.

MDX is a markdown file format that allows you to use <React/> tags inside, making your posts very nice, you can import interactive charts or notifications, export metadata. This makes writing long-form content with components a blast.

Next.js does not work with MDX right away, you have to use a package to process these files, there are some options around:

• @next/mdx - developed by people behind next.js, works great, but feels a bit slow and makes you follow some rules in terms of file location and format
• next-mdx-remote - that's what I use here, It allows you to keep your MDX files in a remote location and load them for build, you can keep your files in separate folder and process them as you want
• mdx-bundler - does the same thing as the second option, uses esbuild and is very fast, this speed allows you to parse mdx files on getServerSideProps, on each request

Okay, I used Next.js and MDX as a core of my website, as a hosting I decided to use Vercel (former Zeit). Hosting a website like this with them is free, the deployment is free and fast and the website itself is being served from multiple CDN enpoints due to its static nature, so it is really fast.

There are several additional tools that I used, for example emotion as a css-in-js library, and framer-motion for animations, prism-react-renderer as a code block and typescript for types (but that's another story really).

The process

I created a separate documents folder for posts and pages, where all the documents are kept in unique folders with .mdx, meta.json and other included files inside. The folder structure looks like this:

documents
  ↳ posts
    ↳ through-sails-and-rails-to-adonis-js
      - document.mdx
      - meta.json
      - image.png

pages
  ↳ about
    - document.mdx
    - meta.json

meta.json file is there to keep all the descriptive information about the document, date of creation, slug, title:

{
  "title": "Through Sails and Rails to Adonis.js",
  "slug": "through-sails-and-rails-to-adonis-js",
  "excerpt": "Even though Node.js has been around since 2009, 11 years so far, the web framework options are still very limited",
  "author": "Chirill Ceban",
  "published": "true",
  "created_at": "2020-09-10",
  "updated_at": "2020-09-11"
}

Having all these tools allows me to write my posts anywhere, using just a simple markdown editor, then paste all that text inside a document.mdx file and voila!

Some would say that it is easier to use free no-code tool plan and just host blog there, and they will be right, but my main goal was to learn and try new tools, curiosity is my driver here.