作者: KTO
原文: Next.js博客项目-快速起步
简介: 从nextjs博客模板开始，快速配置搭建自己的博客项目。部署出来的网站样式可以参考原文的网站。
Next.js 博客项目 - 快速起步
使用的模板
我们使用的模板是：
tailwind-nextjs-starter-blog
该模板有 1.0 版本和 2.0 版本。本文以 1.0 版本为例进行介绍。
1. 环境配置
安装 Node.js
首先，确保你的机器上已安装 Node.js。
你可以从 Node.js 官方网站 下载并安装适合你操作系统的版本。
安装项目依赖
拉取模板项目后，使用以下命令安装项目依赖：
npm install
或
yarn install
开发工具推荐
推荐使用以下开发工具：
- VSCode（免费）
- IDEA 专业版（付费）
我个人使用的是 PyCharm 专业版，它也可以用来启动 Next.js 项目。
参考资源
如果仍有不明白的地方，可以参考以下资源：
你也可以使用 Kimi AI 搜索相关知识。根据我的体验，Kimi 在联网搜索方面表现较为强大和准确，尤其是与国内主流 AI 平台相比。
（虽然我平时主要使用 DeepSeek 或通义。）
2. 项目文件配置
项目配置可以参考官方 README 文档，并按照以下教程逐步进行。
data/siteMetadata.js
- 包含大部分与网站相关的信息，用户应根据需求进行修改。
- 文件路径：项目目录/data/siteMetadata.js
- 代码内容见 附录data/siteMetadata.js，相关选项已翻译，点击可跳转附录内容。
- 如果某些功能不需要，可以直接注释掉。例如，我的博客关闭了评论系统和订阅系统，也没有开启导航栏置顶。
data/authors/default.md
- 默认作者信息（必需）。可以通过在
data/authors中添加文件来添加其他作者信息。 - 该信息会在“关于”页面或文章页面中显示。
- 详细内容见 附录data/authors/default.md，点击可跳转附录内容。
其他文件
以下文件不再逐一详细介绍，更多内容将在下一篇进阶教程中展开：
- data/projectsData.js：用于生成项目页面上样式化卡片的数据。
- data/headerNavLinks.js：导航链接。
- data/logo.svg：替换为你自己的 logo。
- data/blog：替换为你自己的博客文章。
- public/static：存储图片和 favicon 等资源。
- tailwind.config.js 和 css/tailwind.css：Tailwind 配置和样式表，可修改以调整网站外观。
- css/prism.css：控制代码块样式，可自由定制并使用你喜欢的 PrismJS 主题。
- contentlayer.config.ts：Contentlayer 配置，包括内容源的定义和使用的 MDX 插件。
- components/MDXComponents.js：在此指定自定义 JSX 代码或 React 组件，可直接在
.mdx或.md文件中使用。 - layouts：页面中使用的主要模板：
- 文章布局：
PostLayout（默认两栏布局）、PostSimple（简化版）、PostBanner（带横幅图片）。 - 博客列表布局：
ListLayout（带搜索栏）、ListLayoutWithTags（带标签信息侧边栏）。 - next.config.js：Next.js 相关配置。如果需要从其他域加载脚本、图片等，需调整内容安全策略（Content Security Policy）。
基本上这些大概配置一下博客就能正常运行了
可以启动试一下
next dev
3. 撰写博客
你可以在 /data/blog 目录中新建 .mdx 文件来撰写自己的博客文章，也可以参考官方留下的示例探索 .mdx 文件的撰写方式。
必填配置
这里简单讲一下必填配置，进一步的自定义配置将在进阶教程中展开。
我们可以看到示例文档中的开头配置是这样的：
---
title: 'Markdown Guide'
date: '2019-10-11'
tags: ['github', 'guide']
draft: false
summary: 'Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on GitHub Flavored Markdown.'
---
其中：
- title：配置文章的标题。
- date：配置文章的发布日期。
- tags：配置文章的标签。网站中的标签将会根据你写入的标签自动生成。
- draft：表示这篇文章是否是草稿状态。只有
true和false两个选项。草稿状态的文章在正式部署时不会展示出来，不过在开发环境中是可以直接看到的。 - summary：文章的摘要。它会展示在首页和博客页面的列表中。个人建议不需要太长。
正文撰写
在配置项下方，你可以使用 Markdown 语法撰写正文内容。Markdown 是一种轻量级的标记语言，支持标题、列表、图片、表格等多种格式。
示例
以下是一个简单的示例：
---
title: '我的第一篇博客'
date: '2023-10-01'
tags: ['blog', 'tutorial']
draft: false
summary: '这是我的第一篇博客，介绍了如何使用 Next.js 和 Tailwind CSS 搭建个人博客。'
---
# 欢迎来到我的博客
这是我的第一篇博客，主要介绍了如何使用 Next.js 和 Tailwind CSS 搭建个人博客。
## 1. 安装依赖
首先，我们需要安装项目依赖：
npm install
## 2. 启动项目
安装完成后，使用以下命令启动项目：
next dev
## 3. 撰写博客
在 `/data/blog` 目录中新建 `.mdx` 文件，开始撰写你的博客吧！
提交与部署
完成博客撰写后，你可以将其提交到 GitHub 上，并部署你的网站。具体的部署步骤将在后续教程中详细介绍。
至此，我们已经完成了基本的配置和博客文章的撰写。接下来，你可以继续探索更多高级功能，或直接部署你的博客网站。
附录
配置文件
siteMetadata.js-code
/** @type {import("pliny/config").PlinyConfig} */
const siteMetadata = {
// 博客标题
title: 'Next.js Starter Blog',
// 作者
author: 'Tails Azimuth',
// 页面头部标题
headerTitle: 'TailwindBlog',
// 描述
description: '使用Next.js和Tailwind.css创建的博客',
// 语言
language: 'zh-CN',
// 主题
theme: 'system', // system, dark 或 light
// 博客网址
siteUrl: 'https://tailwind-nextjs-starter-blog.vercel.app',
// GitHub仓库地址
siteRepo: 'https://github.com/timlrx/tailwind-nextjs-starter-blog',
// 博客logo
siteLogo: `${process.env.BASE_PATH || ''}/static/images/logo.png`,
// Twitter卡片图片
socialBanner: `${process.env.BASE_PATH || ''}/static/images/twitter-card.png`,
// Mastodon地址
mastodon: 'https://mastodon.social/@mastodonuser',
// 邮箱地址
email: 'address@yoursite.com',
// GitHub地址
github: 'https://github.com',
// Twitter地址
x: 'https://twitter.com/x',
// Facebook地址
facebook: 'https://facebook.com',
// YouTube地址
youtube: 'https://youtube.com',
// LinkedIn地址
linkedin: 'https://www.linkedin.com',
// Threads地址
threads: 'https://www.threads.net',
// Instagram地址
instagram: 'https://www.instagram.com',
// Medium地址
medium: 'https://medium.com',
// Bluesky地址
bluesky: 'https://bsky.app/',
// 地区
locale: 'zh-CN',
// 是否固定导航栏到顶部
stickyNav: false,
// 分析工具配置
analytics: {
// 如果想使用分析工具，需要将其添加到`next.config.js`文件的内容安全策略中
umamiAnalytics: {
umamiWebsiteId: process.env.NEXT_UMAMI_ID, // 例如：123e4567-e89b-12d3-a456-426614174000
// src: 'https://us.umami.is/script.js' // 如果在美国存储数据，可能需要覆盖脚本
},
// plausibleAnalytics: {
// plausibleDataDomain: '', // 例如：tailwind-nextjs-starter-blog.vercel.app
// },
// simpleAnalytics: {},
// posthogAnalytics: {
// posthogProjectApiKey: '', // 例如：123e4567-e89b-12d3-a456-426614174000
// },
// googleAnalytics: {
// googleAnalyticsId: '', // 例如：G-XXXXXXX
// },
},
// 新闻通讯订阅
newsletter: {
provider: 'buttondown', // mailchimp, buttondown, convertkit, klaviyo, revue, emailoctopus, beehive
},
// 评论系统配置
comments: {
provider: 'giscus', // giscus, utterances, disqus
giscusConfig: {
repo: process.env.NEXT_PUBLIC_GISCUS_REPO,
repositoryId: process.env.NEXT_PUBLIC_GISCUS_REPOSITORY_ID,
category: process.env.NEXT_PUBLIC_GISCUS_CATEGORY,
categoryId: process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,
mapping: 'pathname',
reactions: '1',
metadata: '0',
theme: 'light',
darkTheme: 'transparent_dark',
themeURL: '',
lang: 'en',
},
},
// 搜索功能配置
search: {
provider: 'kbar', // kbar 或 algolia
kbarConfig: {
searchDocumentsPath: `${process.env.BASE_PATH || ''}/search.json`,
},
// provider: 'algolia',
// algoliaConfig: {
// appId: 'R2IYF7ETH7',
// apiKey: '599cec31baffa4868cae4e79f180729b',
// indexName: 'docsearch',
// },
},
}
module.exports = siteMetadata
data/authors/default.md-code
--- name: Tails Azimuth avatar: /static/images/avatar.png
occupation: Professor of Atmospheric Science company: Stanford University email:
address@yoursite.com twitter: https://twitter.com/Twitter linkedin: https://www.linkedin.com github:
https://github.com ---
Tails Azimuth is a professor of atmospheric sciences at the Stanford AI Lab. His research interests includes complexity modelling of tailwinds, headwinds and crosswinds.
He leads the clean energy group which develops 3D air pollution-climate models, writes differential equation solvers, and manufactures titanium plated air ballons. In his free time he bakes raspberry pi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
### 配置选项解释：
- **name**: 姓名或昵称，这里是 Tails Azimuth。
- **avatar**: 头像图片的路径，这里是 `/static/images/avatar.png`。
- **occupation**: 职业或职位，这里是“大气科学教授”。
- **company**: 公司或机构名称，这里是“斯坦福大学”。
- **email**: 电子邮件地址，用于联系。
- **twitter**: Twitter 个人主页的链接。
- **linkedin**: LinkedIn 个人主页的链接。
- **github**: GitHub 个人主页的链接。
下面就是个人简介了