How I Built My Blog

If you're a developer, you have probably thought about creating a blog for yourself at some point in your career, and probably also been overwhelmed by the number of technologies that let you do so. With so many headless CMS out there, it's easier to get lost in it than to choose and settle for one.

When I decided that I wanted to add a blog to my personal website, I wanted to keep it fairly minimal with as less tools and technologies as possible while not paying for any of it. I didn't want to pay for a platform like Ghost or pay for hosting for a platform like WordPress. My options were headless systems with a free tier, like Contentful and Sanity. For the front-end, I wanted to rebuild my Gatsby-based site with Next.js because by that time I had built a few Next.js websites and I was already familiar with it.

The stack

The blog is a combination of Next.js and Sanity.

Next.js is a React-based framework that has a lot of optimizations and has a more streamlined project structure that, in my opinion, is much easier to get used to.

Sanity provides a pretty minimal dashboard to write and edit your content and a great free tier for small blogs like mine.

My whole website including the blog is deployed on Vercel. I prefer Vercel to Netlify because of its clean UI and easy deployment and also because Netlify's font kind of annoys me. I have a webhook added to Sanity that re-builds my Next.js production deployment whenever any content is edited in the Sanity Studio.

For styling, I write all styles from scratch and try to keep everything very basic. I do not use any CSS libraries like Bootstrap because I like writing styles and breakpoints on my own and a style library for a website like this would be overkill anyway.

Project structure

My folder structure for this website is fairly simple and I do not have any test cases because it's a simple static website that doesn't need any.

The whole repo is divided into two folders, one for Sanity and the other for Next (web).

sadmansh.com/
├─ sanity/
├─ web/

The web folder has mostly the default Next.js structure:

src/
├─ components/
│  ├─ Blog/
│  |  ├─ AllPosts.js
│  |  ├─ Article.js
│  |  ├─ Post.js
│  ├─ Home/
│  |  ├─ Help.js
│  |  ├─ Intro.js
│  |  ├─ Work.js
│  ├─ Layout/
│  |  ├─ Footer.js
│  |  ├─ Header.js
│  |  ├─ Layout.js
│  |  ├─ Main.js
│  |  ├─ MainHead.js
├─ lib/
│  ├─ api.js
├─ pages/
├─ public/
├─ styles/

I also have a `jsconfig.json` file that contains all my aliases for short import statements:

{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@components/*": ["components/*"],
			"@lib/*": ["lib/*"],
			"@styles/*": ["styles/*"],
		}
	}
}

Final thoughts

Your blog is your own little space to try out and show off new things that you like and want to make a part of your web identity. Using a stack that is unknown to you will also help you get familiar with it so that you can use it to build on other projects. Make everything a learning experience.