Introduction
In this article, I'll explain how I built this blog, what technologies I used and why, what I learned while doing so, and references to other sites which inspired me to create this blog.
Stack
is a react framework that offers (static site generation) and (server-side rendering).
I use SSG with (ISR) for blog posts. This feature allows us to create or update static pages after the build process, which helps us avoid redeployment.
I also use Next.js API routes to store data like subscribers and page view count. I use FaunaDB to persist the page view of all the posts.
Tailwind CSS
I use css to style all components from scratch. It is a utility framework for css with prebuild classes, and it has many handy features, one of which is purging unused css.
Follow this doc to install tailwind with Next.js.
Use this vscode plugin for tailwind, which improves your coding experience.
The typography plugin from tailwind provides a set of classes. By adding a single style, we can create beautiful typography without hassle.
MDX
MDX is the extension of markdown that allows us to write React Component inside the markdown file. Markdown is a markup language with plain text formatting syntax that flawlessly converts text to HTML.
The popular libraries to use MDX with Next.js
I use to compile and render the mdx file.
To compile the mdx code, import the function from mdx-bundler. As a result, we'll get the code and frontmatter of the MDX file. It has built-in support to add the remark and rehype plugins.
To render mdx code in the browser, pass the compiled mdx code to imported from the mdx-bundler client.
Code snippets
This blog has two ways to render syntax highlighted code snippets. The first option is a static snippet with options like highlighting words and lines and showing line numbers.
The other option is a live editable playground allowing users to interact and experiment with code. I used Sandpack to achieve this feature.
Graph CMS
Graph CMS is the headless CMS based on GraphQL Content API and delivers your content across platforms. The post data for this blog come from Graph CMS.
Getting Started With Graph CMS
We will create a new project and assign it the name and description. Then set the region near to you, and it's where our content will be.
Graph CMS sets all the project dependencies and will take us to the dashboard page. For creating a new model, navigate to the schema section and click the add button to add a new Model. Inside the model, we need to add all the fields.
Now, we can start adding the content for our created model by navigating to the content section. We'll add new content for our model by clicking a create item button.
Add assets to our model, and use the asset model. It is the default system model in the CMS and supports all file formats.
To access data from the API call, go to the endpoints section, which is inside settings, and then add data access permissions.
To fetch the data, copy the API URL to access content from the graphql call.
Helper Functions
My project has a script folder that contains a few scripts to perform specific operations. These scripts run before creating a production build. I wrote a custom function to create an RSS feed. I used package to create sitemaps.
Here are some of the websites that inspired me to create my blog
That's it. I hope you got the push to create your blog. If you have any questions or comments, let me know on Twitter at or via email at . But until next time, happy coding!