Unveiling my digital Haven: Building a personal blog with Next.js, TypeScript, and TailwindCSS

Embark on a journey with me as I share the exciting tale of crafting my very own personal blog. I’ll walk you through the process of bringing my thoughts to life in the digital realm using Next.js, TypeScript, and the styling magic of TailwindCSS.

Motivations

I’ve been wanting to create my own personal blog for a while now. To share my thoughts and experiences with the world. I’ve been working as a software engineer for a few years now, but I’ve never really had the opportunity to share my thoughts and processes about building a final product.

I already had experience with Next.js, TypeScript, and TailwindCSS, to build my personal portfolio laforet.dev. I really enjoyed the experience and I wanted to use the same stack to build my personal blog.

Setting the Foundation

Create the Next.js project with TypeScript and ESLint:

npx create-next-app@latest my-project --typescript --eslint
cd my-project

Add and initalise TailwindCSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths: tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configure TailwindCSS: globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Then finally test the setup:

npm run dev

Since my goal was to build this blog to allow me to create content as soon as possible. I decided to fast-forward this setup and use the Spotlight template from TailwindUI as it already had most of the features I was looking for.

Bringing thoughts to life

My initial goal was to build a blog that would be easy to maintain and update. I wanted to be able to write my articles in markdown and have them automatically converted to HTML to be easily displayed in a web browser.

The following markdown:

### Heading level 3

The article content can be **bold**, _italic_, or ~~strikethrough~~.

It can also contain [hyperlinks](https://laforet.dev).

Would be converted to:

Heading level 3

The article content can be bold, italic, or strikethrough.

It can also contain hyperlinks.

In addition to the markdown conversion, I wanted to be able to control the metadata of each article. I wanted to be able to specify the title, description, and author of each article. I also wanted to be able to specify the date of publication and the date of the last update.

The Spotlight template from TailwindUI allowed me to set the article metadata in the front matter of the markdown file:

import { ArticleLayout } from '@/components/ArticleLayout'

export const article = {
author: 'Nicolas Laforêt',
date: '2023-12-30',
title: 'Article title',
description: 'Article description.',
}

<!-- Next.js metadata export -->

export const metadata = {
title: article.title,
description: article.description,
}

export default (props) => <ArticleLayout article={article} {...props} />

Article content
...

Launch and beyond

Deploying the personal blog with Vercel was as easy as logging in with my GitLab account and selecting the repository. I was able to set up a custom domain name and SSL certificate since I already had my domain name laforet.dev.

Vercel allows me to automatically deploy my blog when I push to the main branch of my repository. I also get a preview URL for each commit I push to the repository, allowing me to preview my changes before publishing them to production.

Future plans and potential improvements

I’m really happy with the current state of my personal blog for short amount of time it took me to deploy. I’m able to write articles in a markdown workflow and publish them to the world with a single push to my GitLab repository.

I’m planning on adding more features to my personal blog in the future such as better SEO (Search Engine Optimisation) tooling with a deeper integration of the Next.js metadata API.

Conclusion

As the digital landscape evolves, so too will my blog. It will adapt and grow in tandem with the vibrant community that gathers here. Stay tuned for exciting developments and thank you for being part of this journey!

I am grateful for the opportunity to share my thoughts and experiences with you. I encourage you to explore the blog and even create your own if you feel inspired by what you see here.