👉

本文是对 https://github.com/ranguiquan/ranguiquan.com 的使用说明。

🎈 Features

🔹

使用 Nextjs 服务端渲染，在不牺牲绝大多数动态特性的前提下有比较快的响应速度。

🔹

可自定义的网站结构。

🔹

Dark mode.

🔹

完整支持 Notion 富文本。

🔹

支持评论功能。

🔔 准备

你需要准备：

🔹

GitHub 账号：用来储存代码。

🔹

Notion 账号：储存文章。

🔹

Vercel 账号：部署网站，不需要单独注册，可以用 GitHub 账号直接登录。

本地调试环境[Optional]：

🔹

git

🔹

nodejs, yarn

# install dependencies
$ yarn install

# for develop
$ yarn dev

# for build
$ yarn build && yarn start

📕 复制 Notion 模板

博客模板：https://ranguiquan.notion.site/a8e6585eebf843aebc1c5dd529d8d716?v=93f8b7f9b24e4b7da71bddf714f57802

评论模板：https://ranguiquan.notion.site/b18bbc681b864d01939b0093a7b474c6?v=de30b8df1ca24478b494e5d9f8485016

点击右上角的 Duplicate 按钮，复制到你的 workspace 里面。

🔐 生成 Notion token

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

https://www.notion.so/my-integrations

点击 New integration, 名字可以随便取。选项不用动，点击提交。把生成的 Token 字符串保存好，等一下要用。

回到 Notion，进入之前复制的两个 database，点击右上角的 share 按钮，邀请刚刚创建的 Integration。

🍴 fork 仓库并自定义配置

GitHub - ranguiquan/ranguiquan.com: A static blog based on notion-api and Next.js.

A static blog based on notion-api and Next.js. Contribute to ranguiquan/ranguiquan.com development by creating an account on GitHub.

https://github.com/ranguiquan/ranguiquan.com

点击右上角的 Fork 按钮复制一个仓库到你的账户下。修改 site.config.js 配置文件：

🔹

siteName: 网站的名字

🔹

domain: 完整域名，不要加协议。

🔹

writerName: 作者名，用于页尾版权标签。

🔹

copyrightStartYear: 版权起始时间。

🔹

contentRequestLimit: 如果不是写作文特别长的话不用改。

🔹

parallelRequestLimit: 改到 3 或者 4 是比较保险的。我为了开发体验配置成 10 了。酌情更改。

🔹

nav: 配置网站结构。

🔹

第一个{} 包裹的内容定义网站首页，只能配置 type: ‘database’ type: ‘page’,如果配置为 database，首页呈现卡片视图，如果配置为 database，首页呈现为一篇文章。

🔹

之后的 {} 中的内容定义导航栏链接。可以选择 type: ‘database’ type: ‘page’ type: ‘link’ 。如果配置 database，点击连接后跳转到对应数据库的卡片视图，配置 page 跳转到文章，配置 link 跳转到对应链接。

🔹

id 填写对应的 Notion id 或者外部完整链接（包含协议）。不知道如何获取 Notion id 可以往下翻翻。

🔹

isCommentEnable: 是否开启评论功能。如果选择开启，需要多一点配置步骤：

🔹

commentDatabaseID: 储存评论的 database id，前面给了一个评论模板。

🔹

创建 GitHub Auth APP。

💡 获取 Notion id

Notion 中的每一个database、page都有唯一的 id，可以从 url 链接中得到。打开 Notion database 和 page，url 构成通常是这样的，复制 databaseID 或 pageID 到配置文件中。

# database url
https://www.notion.so/[username]/[databaseID]?v=[viewID]
# page url
https://www.notion.so/[username]/Notion-[pageID]

▲ 在 Vercel 上部署

点击这个链接

New Project – Vercel

https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme

会出现 vercel 的部署界面，在 import git repository 对应的项目上点击 import，会出现一个配置框，不要点 deploy，还有环境变量要填。

👉

必填的环境变量（如果不开启评论系统，就只用填这个）

NOTION_TOKEN ：开始生成的 Notion token。

📕

评论系统需要的环境变量

GITHUB_ID

GITHUB_SECRET

NEXTAUTH_URL ：网站域名，包含协议。如果域名是 example.com 就填 https://example.com 。没有域名咋办呢？下面会说。

现在我们还没有 GITHUB_ID 和GITHUB_SECRET 。回到 GitHub，右上角下拉菜单选择 settings，左下角点击 Developer settings，左上角选择 OAuth Apps，新建一个 OAuth App，名字可以随意，HomePage URL 和 Authorization callback URL 都要填网站的完整包含协议的域名（和NEXTAUTH_URL 是一样的值）。把生成的 Client ID 和 Client secrets 分别填入GITHUB_ID 和GITHUB_SECRET 环境变量里面。