使用 Gatsby.js 搭建静态博客 6 评论系统

venmos 发布于2019-08-23 14:48 / 2518人阅读

摘要：原文链接方案选择大家都知道等第三方评论系统的存在。部署自己的的原理就是使用接口把评论更新到你静态博客的仓库，触发博客重新部署，在页面生成评论。这样得到的博客页面包括评论部分都是完全静态的。配置完毕推送到或本地运行。

原文链接：https://ssshooter.com/2019-01...

方案选择

大家都知道 disqus 等第三方评论系统的存在。disqus 几年前还是挺好使的，但是现在已经是不存在的网站了。虽然国内也有类似的服务，但是免费档位有可能会有大篇幅的广告。

不过其实最大的问题是：你的评论掌握在别人手上。作为一个博客都自己搭建的程序员，为什么要让数据落在别人手上呢？

掌握自己的评论数据有两个方法：

自建接口，储存评论数据，页面也是动态获取数据。

使用接口在 github 仓库更新评论信息，然后重新生成包含最新评论的静态页面。

官网推荐的是第二种方法，借助一个叫 staticman 的开源工具。推荐原因有 3：

自己掌控数据

服务崩溃时也能展示评论（针对第三方评论系统和上面动态获取评论的方案 1 的问题）

staticman 集成了 akismet 过滤垃圾评论

所以本文着重说明 staticman 的使用方法（如果想使用第一种方案可以依赖 strapi 框架）。因为我之前使用 staticman 本身的服务接口不能调通，但是本地测试可以，所以我决定部署自己的 staticman。

部署自己的 staticman

staticman 的原理就是使用 GitHub 接口把评论更新到你静态博客的仓库，触发博客重新部署，在页面生成评论。这样得到的博客页面包括评论部分都是完全静态的。

对 GitHub 接口更新仓库感兴趣的话可以参考使用 Github API 更新仓库

首先 clone staticman 的官方仓库。你可以先在本地测试运行，也可以直接部署到云端（需要免费服务的话依然推荐 heroku）。

staticman 部署配置

在生产环境，首先需要一个生产环境的配置文件 config.production.json。

可以通过 cp config.sample.json config.production.json 生成配置文件。这个配置文件里面甚至自带文档，可以很清晰看出每个项目的作用。

其中最重要的是两个配置项：

  githubToken: {
    doc: "Access token to the GitHub account being used to push files with.",
    format: String,
    default: null,
    env: "GITHUB_TOKEN"
  },
  rsaPrivateKey: {
    doc: "RSA private key to encrypt sensitive configuration parameters with.",
    docExample: "rsaPrivateKey: "-----BEGIN RSA PRIVATE KEY-----
key
-----END RSA PRIVATE KEY-----"",
    format: String,
    default: null,
    env: "RSA_PRIVATE_KEY"
  },

第一个 githubToken 用于获取修改你的仓库权限的 token，必须注意这个 token 不能泄漏，不然别人就能随便修改的你仓库了。第二个是用于加密留言中的邮箱。

配置完毕推送到 heroku 或本地运行 npm start。（运行环境会根据 NODE_ENV 判断）

staticman 应用于你的仓库

发送以下 Get 请求

http://your-staticman-url/v2/connect/GITHUB-USERNAME/GITHUB-REPOSITORY

staticman 推送配置

在根目录创建 staticman.yml 文件，可以参考：https://github.com/eduardobou...

PS. 如果将配置中的 moderation 设为 true，推送到仓库后不会直接合并而是先提出一个 PR。

这个配置的目的是确定你传入到仓库的数据格式，对应的表格应该类似：


  
  
  
  Name
  E-mail
  Message

更新请求：

POST https://api.staticman.net/v2/entry/{GITHUB USERNAME}/{GITHUB REPOSITORY}/{BRANCH}/{PROPERTY (optional)}

功能完成

至此，成功添加评论功能，整个博客的功能也几乎完善。对比之前被放弃的一个 wordpress 和一个 hexo，这次是我第一次从基本模板开始自己添加功能做出来的静态博客，来之不易，希望珍惜，接下来要做的就是继续优化功能和 UI，坚持更新了。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101181.html

创造属于自己的静态博客

摘要：所以自己定值博客，或许可以让自己坚持更新下去。配合上语雀的文章发布推送绝配，于是有了这么个功能专题。可以前往我的博客阅读：https://ssshooter.com/2019-02... 0 前言本文并不是从 0 开始使用 gatsby.js 搭建博客，starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量节省项目搭...

Channe 2019-08-23 15:05 评论0 收藏0
用Gatsby和Strapi创建一个静态博客(翻译和自己探索过程中的经验总结)

摘要：用和创建一个静态博客翻译和自己探索过程中的经验总结原文参阅或本篇主要是对其精华内容进行翻译以及实操过程中遇到的问题解决和探索一些具体的操作步骤和细节我将忽略结合原文一起阅读效果更佳注本文操作环境是介绍这是一个包含很多静态内容页面的站点从技术用Gatsby和Strapi创建一个静态博客(翻译和自己探索过程中的经验总结) 原文参阅: Building a static blog usin...

lijy91 2019-06-26 17:32 评论0 收藏0
使用 Gatsby.js 搭建静态博客 4 标签系统

摘要：原文链接回顾使用搭建静态博客样式调整官方自带标签系统教程，英语过关可以直接阅读官方教程。制作页面展示所有标签重点同样是查询部分是标签名，是包含该标签的文章总数。在之前写好的文章页渲染标签就是查询的时候多一个标签字段，然后渲染上，完事。原文链接：https://ssshooter.com/2018-12... 回顾：使用 Gatsby.js 搭建静态博客 3 样式调整官方自带标签系统...

AndroidTraveler 2019-08-23 14:23 评论0 收藏0
使用 Gatsby.js 搭建静态博客 1 关键文件

摘要：原文地址静态博客之前也有搭建过，不过使用一键生成的，其实当时也有考虑过，不过这个框架搭建博客入门还是比较难的，前置知识点包括和。使用建立项目已经自带了不少插件，但在我的搭建过程中仍然有一些需要自己添加的。原文地址：https://ssshooter.com/2018-12... 静态博客之前也有搭建过，不过使用 Hexo 一键生成的，其实当时也有考虑过 Gatsby，不过这个框架搭...

mzlogin 2019-08-23 13:58 评论0 收藏0