I want to share how I built my blog with Next.js. I'll walk you through it step by step -- from choosing a topic, to page structure, design direction, dev environment setup, and collaboration approach -- so it's easy to follow along.
Choosing a Blog Topic#
The most important thing for a blog is deciding what topics to cover.
If you're a developer, topics like coding tests, job prep, project experience, and bug fixes work great. If you're a casual blogger, you could start with restaurant reviews, travel, book recommendations, and so on.
Thinking about who your expected readers are as you plan your topics helps you connect better with visitors and gives you the motivation to stay focused.
Planning the Structure of Each Page#
You definitely need a main page and a post detail page.
I also added a book list, tag-filtered posts, and an 'About me' page.
Plan what role each page will play and how users will navigate through your site.
For example, on the main page, I placed the 3 most recent posts at the top and listed the rest in chronological order.
Each post includes an image and takes you to the detail page when clicked.
Deciding on Blog Design#
Think about a style that's comfortable and easy to focus on.
Readable fonts with good spacing and a clean design using grid lines work well.
Using TailwindCSS here lets you style things quickly and handle responsive design from mobile to large monitors.
Here are some sites I found useful for reference:
Defining Markdown Metadata#
It's good to manage each post with metadata like title, date, category, series, tags, and featured image.
This makes implementing sorting and filtering by tag or series much easier. For example, you clearly write this information at the top of each post file.
You can add as many fields as you want, but I'd recommend keeping it to 2-5. I only use 3. (title, date, tags)
title: Welcome Docusaurus
date: 2021-09-13T18:00
description: This is my first post on Docusaurus.
slug: welcome-docusaurus-v2
authors:
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
- name: Sébastien Lorber
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [hello, docusaurus-v2]
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
Setting Up the Development Environment#
I went with Node.js runtime with npm package manager, and VS Code as the IDE.
In VS Code, install essential extensions (Prettier, ESLint, Tailwind CSS IntelliSense, etc.).
Unify code style with Prettier and set ESLint to only show syntax warnings. You can customize as much as you'd like.
For Git branches, manage main for deployment and dev for development, and automate CI/CD with GitHub Actions.
For state management, use whatever you prefer -- Zustand, Recoil, etc.
You'll probably end up with a stack like this:
- Next.js
- React
- TailwindCSS
- Typescript && Javascript
Defining Specs for Each Page#
Here's the structure I came up with. Feel free to use it as a reference and improve on it.
- Main page: Show the 3 most recent posts at the top, list the rest by date. Add a search filter.
- Books page: Separate books into read, reading, and want-to-read with relevant info for each. Add images, reviews, and purchase links on the detail page.
- Post detail page: Place the title, publish date, estimated read time, and share button at the top. Convert the markdown body to HTML for display.
- Series page: Show the post count and list per series. Exclude series with no posts from the menu.
- Tags page: Provide post count and filtering by tag.
- About page: Place a photo carousel, greeting message, and social media link icons.
Before diving into actual development, sketch out the overall structure in your head and document the details in a spec -- it'll reduce confusion during development and lead to better results. Let's build an awesome blog!
Time is the wisest counsellor of all.
— Pericles
