hexh's blog

一个既能利用 GitHub Issues 作为后台进行十分方便的文章发布和管理，也能尽可能利用 NextJS 的特性，让博客有单页面 web 程序的客户端体验同时能进行 SEO 优化的博客方案。还能获得一个免费域名。最大的缺点是不支持 IE 浏览器。

源码和博客地址

为什么

为什么是 GitHub Issues

用 GitHub Issues 来写博客并不是什么新鲜事，它的优点很明显，GitHub Issues 的发布和管理是十分优秀的，尤其是利用标签和状态对 Issues 的管理满足了我们对博客的归档和分类的需求，而且也直接支持 Markdown 格式和文件上传。最重要的是 GitHub 提供了一套相对完备的 Api，让我们可以应用到开发中。

为什么是 NextJS

谈到博客，相信大部分想要建立博客的朋友不免都想分享自己的文章，希望让更多人能看到自己的想法，这时候搜索引擎的搜索结果就扮演了十分重要的角色，针对搜索引擎的 SEO 优化直接影响了一个博客能否被更多的人看到。

而 NextJS，一个基于 React 的、提供开箱即用的服务端渲染功能的开发框架就能满足我们对一个优秀博客的想象——既有单页面程序的客户端体验、也能利用服务端渲染的特性进行 SEO 搜索优化。

为什么是 Vercel

对于前端来说，一个好用的用于构建和测试前端项目的 Serverless 云平台可以让我们不再关心后端和服务器的事情，从而提高我们的开发效率。目前市面上的 Serverless 平台有不少，国内外都有，而这次会选用 Vercel 原因也很简单，因为 NextJS 目前就是由 Vercel 维护的，NextJS 项目可以不需要复杂的配置即可直接在 Vercel 平台上发布，而且还像 GitHub Page 那样白送一个域名。

开发准备

布局设计

设计大致上参考了猿料论坛的布局

网页方面定为主页、文章列表页、文章详情页、介绍页和搜索页

主页主要展示所有的文章索引，以 antd 的时间轴组件进行展示
文章列表页则展示带有 post 标签的文章，这些文章主要是想要被搜索引擎搜索到的文章，也就是需要做 SEO 优化的主要页面
文章详情页就是展示文章的详细信息
介绍页就是读取全部文章中带有 about 标签的那一篇，以文章详情页的样式进行展示
搜索页展示用户搜索结果，样式上采用和文章搜索页的样式，但是不需要做 SEO 优化

前端脚手架

这次我就直接找到了 luffyZh 的 next-antd-scaffold，试了一下，除了不支持 IE 外，各方面都还不错，就直接应用起来了。

[app]
├── 📄 .babelrc
├── 📄 .eslintrc
├── 📄 .gitignore
├── 📄 next.config.js
├── 📄 package.json
├── 📄 server.js
├── 📄 pm2.config.js
├── 📂 assets
├── 📂 docs
├── 📂 public
│   ├── 📄 favicon.ico
│   └── 📂 static
└── 📂 src
    ├── 📂 components
    ├── 📂 constants
    │   ├── 📄 ActionsTypes.js
    │   └── 📄 ApiUrlForBE.js
    ├── 📂 containers
    ├── 📂 core
    │   ├── 📄 util.js
    │   └── 📄 nextFetch.js
    ├── 📂 middlewares
    │   ├── 📂 client
    │   └── 📂 server
    ├── 📂 pages
    └── 📂 redux
        ├── 📄 store.js
        ├── 📂 actions
        ├── 📂 reducers
        └── 📂 sagas

GitHub Issues 接口

GitHub 的 api 文档可以看这里，这次我基本上只用到了 issues 相关和 search 相关的接口，具体如下：

api	类型	主要参数	返回值	说明
`https://api.github.com/repos/{owner}/{repo}/issues`	`GET`	`labels` `creator` `per_page` `page` `sort` `direction` `state`	`Array`	获取某个仓库的 issues 列表
`https://api.github.com/repos/{owner}/{repo}/issues/{number}`	`GET`	不需要	一个带有某 issue 全部信息的对象	获取某个 issues 的全部信息
`https://api.github.com/repos/{owner}/{repo}`	`GET`	不需要	一个带有仓库全部信息的对象	获取某个仓库的基本信息
`https://api.github.com/search/issues`	`GET`	`order` `page` `per_page` `q` `sort`	`{ items: <Array>, incomplete_results: <bool>, total_count: <number> }`	对整个 Github 进行搜索

根据这些接口获得的数据，就能拿到博客需要的数据了

首先是根据我要做的页面来确定一下需要哪些数据

页面	需要的数据
主页时间轴	因为要进行分页，所以需要知道全部的文章的数量；然后就是根据页码请求到每个页的文章列表
文章列表页	同上，不过是带有 `post` 文章
文章详情页	某篇文章的数据
介绍页	带有 `about` 标签的文章的数据
搜索页	搜索的文章列表

所以根据这些信息，在测试过这些接口后确定了以下方案：

主页的文章数量由 https://api.github.com/repos/{owner}/{repo} 获得，文章列表由 https://api.github.com/repos/{owner}/{repo}/issues 获得
post 标签的文章列表由 https://api.github.com/repos/{owner}/{repo}/issues 获得，labels 参数改为 post 即可；至于文章列表，我决定用搜索的接口 https://api.github.com/search/issues 来请求，因为这个接口会提供 total_count
详情页就用 https://api.github.com/repos/{owner}/{repo}/issues/{number} 即可
搜索页用 https://api.github.com/search/issues 即可

以上就是初步的构思，然后就根据这些实施方案即可。在接下来的第二部分主要讲讲遇到的一些坑

基于 NextJS + Vercel + Github Issues 的博客开发（一）

相关链接