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 🤯
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.
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 formatnext-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 wantmdx-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 requestOkay, 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).
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:
json{ "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.