用 github issues 和 github pages 搭建个人博客

[662]

为什么

Github Issues 基于 git，具有版本管理的能力，自带评论，Markdown书写，这是很多人都公认的非常适合写博客的环境。

但是它也有一些缺陷，诸如无法自定义页面、无法友好的绑定域名，导致它不能像一个普通的博客网站那样呈现给访问者。

思路

使用 Github 全套服务完成博客的搭建：

Github Issues 做为数据源，包含文章、评论、自定义页面 Github Pages 作为静态网页服务器 Github Actions 编写 Workflow 实现自动部署

映射

Github Issues 到 Blog 的对应关系如下：

• Milestones -> Categories
• Labels -> Tags
• 特定Assign用户的Issues -> Posts
• 特定Issue -> Page
• Issue主体 -> 博文
• Issue回复 -> 博文评论

依赖

基于React构建SPA网站，其核心依赖如下：

• create-react-app 构建基于 Typescript 的 React 项目
• react-apollo 提供的@apollo/react-hooks作为 Graphql 客户端请求 Github api v4
• gitalk 利用 Github Issues 实现评论功能
• github-markdown-css 精简版 Github Markdown 样式表

路由

由于 Github Pages 仅作为静态文件服务器，所以无法直接使用 BrowserRouter。这里采用 spa-github-pages 提供的方案，用404页面跳转来实现真实路由访问，而且根据作者的实践，google 会以 301 的方式对待 404.html 中的 window.location跳转，虽然 404 对 SEO 并不友好，但也能曲线拯救一下。

作者原文：

A quick SEO note - while it's never good to have a 404 response, it appears based on Search Engine Land's testing that Google's crawler will treat the JavaScript window.location redirect in the 404.html file the same as a 301 redirect for its indexing. From my testing I can confirm that Google will index all pages without issue, the only caveat is that the redirect query is what Google indexes as the url. For example, the url example.tld/about will get indexed as example.tld/?p=/about. When the user clicks on the search result, the url will change back to example.tld/about once the site loads.

更多

• 如何让 Baidu 搜录（暂定：同步国内仓库之后 DNS 将 Baidu 爬虫解析到国内静态页面）
• SPA 的 SEO 如何优化（据说各大搜索引擎都能识别客户端渲染的页面，暂未尝试）
• 是否可以在编译时请求 Github Issues 生成静态 HTML 文件，从而解决因 BrowserRouter 和 SPA 带来的SEO不友好