Creating a Blog with Next.js (Using the Starter Template)

Overview

I've decided to create a blog using Next.js. While building it from scratch would be a great experience, I've opted to use a Starter Template that I find appealing.

The template I've chosen to use is the Tailwind CSS Blog.

• Tailwind CSS Blog Demo
• Tailwind CSS Blog Information and Guide

Update on September 27, 2023

When I initially received the template, it used the pages route method. However, it has since been updated to use the app route method. Please keep this in mind, as it may result in significant differences in how the blog posts are handled.

Prerequisites

• Install NodeJS
• Install Git
• Create a GitHub account (or use GitLab, Bitbucket)
• Create a Vercel account

1. Getting the Template Source from the Repository

The Tailwind CSS Blog Quick Start Guide provides three installation methods:

1. Using the Pliny project CLI
2. Using the current version of TypeScript and Contentlayer
3. Using the current version of JS (official support) ✔

I've chosen to go with the official support for the JS version as I'm uncertain about how version updates will be handled.

Fetching the Source Code with a Command

1. Create a directory where you want to work (e.g., D:\hlog.kr).
2. Open a command prompt at the directory path you've just created.

• degit is similar to git clone, but it doesn't fetch the repository information (.git).

npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git

3. You should now see the source code downloaded into that directory.

2. Create a Repository on Your GitHub Account

• Link the source code to this repository, which will be connected to Vercel.
• Create a repository on GitHub.
  • For personal reasons, I created mine as private.
  • I did not create a README.md file or a .gitignore file because I will only be connecting the existing source code to the repository.

3. Connect the Source Code to the GitHub Repository

• In the directory where your source code is located (e.g., D:\hlog.kr), run the following commands in the command prompt or Git Bash one by one.

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/{repository_url.git}
git branch -M main
git push -u origin main

• You can confirm that the source code has been successfully pushed to GitHub.

You can find the code in the GitHub - hlog-nextjs-blog-for-git - create_project branch. (The template code has been changed to use the app route method, so I kept the initial code just in case)

4. Verify Local Operation

Run this in the command prompt in the directory where the source code is located (e.g., D:\hlog.kr).

• Install the necessary packages with the following command.

npm install

• Run the following command to start the local development server:

npm start

• If you see Ready on http://localhost:3000 in the console, it means the server is running correctly.
• Open your browser and go to http://localhost:3000 to verify the application.

5. Modifying Blog Information and Layout

• When the local development server is running, any code changes you make will be automatically reflected. It's a good practice to test and verify your changes as you work.
• You can choose the code editor that you prefer. Visual Studio Code is a popular choice, and I personally use IntelliJ IDEA.

1. siteMetadata.js (/data/siteMetadata.js)
2. next.config.js (/next.config.js)
3. authors/default.md (/data/authors/default.md)
4. projectsData.js (/data/projectsData.js)
5. headerNavLinks.js (/data/headerNavLinks.js)
6. Add a Blog Post (/data/blog/blog_title.md(x))

• For more details, refer to the "Extend / Customize" section in Tailwind CSS Blog Information and Guide.

6. Deleting Existing Posts or Marking Them as Draft

• To delete existing posts or mark them as drafts, navigate to the /data/blog folder and delete the desired files or change the draft: false property to draft: true within each file.

7. Deploying

• I use Vercel for deployment:
  • Vercel seamlessly integrates with GitHub, automatically deploying your source code whenever you push changes to your GitHub repository.
  • I've opted for the free Hobby Plan from Vercel.
  • You can sign up for Vercel at https://vercel.com/.

1. Sign up or log in to Vercel with your GitHub account.
   (You can also use GitLab or Bitbucket if preferred.)
2. In the Vercel Dashboard, click on New Project.
3. Choose Add GitHub Account, then select your GitHub account.
4. Select the repository you want to deploy.
5. Click Import to initiate the deployment process.

• Project Name: Choose a name for your project (e.g., hlog-kr).
• Framework Preset: Next.js.
• Click the Deploy button.
  • You will see the deployment process in progress.

8. Checking the Site with the Generated Domain

• You can access your website by using the Vercel domain displayed on your dashboard. You should see the same content as on the demo page.

9. Committing and Pushing the Changes

• After committing and pushing your changes, you will notice that Vercel automatically triggers the deployment process
• Once the deployment is complete, you can verify that everything has been successfully deployed by checking it in the browser.

10. Writing and Deploying Blog Posts

11. Connect a Custom Domain (Optional)

In my case, I purchased a domain and connected it to my blog.

• Click the Domains button in the Vercel Dashboard.
• Enter your custom domain and click the Add button.
• You'll likely see an "Invalid Configuration" message because your domain doesn't have the correct DNS settings.
• In my case, I added hlog.kr and also added www.hlog.kr because there was an option to include it.

12. Connecting DNS from Domain Registrar

To connect your domain to Vercel, you'll need to configure DNS settings through your domain registrar's website. Here's how I did it:

• For the hlog.kr domain:
  • I added an A record with the IP address provided by Vercel.
• For the www.hlog.kr domain:
  • I added a CNAME record with the DNS provider information provided by Vercel.

• Please note that the specific steps to configure DNS records can vary depending on your domain registrar.
• Once you've configured the DNS records, it may take some time for the changes to propagate across the internet.

Conclusion

Now, I'll start adding content, layouts, and necessary components step by step.

Thank you for reading until the end. 😄