基于Github issues + umi 搭建一个免费的带评论功能的博客(一)

作为一个工作了好几年的前端搬砖狗，搭建一个属于自己的博客是很有必要的，一来可以总结自己的开发学习经验，二来可以分享和记录下自己的学习轨迹，可谓好处多多，那么今天我就给大家介绍一种搭建博客的新方式。

blog-2

✈️为什么选择Github issues而不是其他方式？

其实在使用Github issues搭建博客之前自己就曾经尝试过其他方式搭建属于自己的博客平台，最早的时候自己买过云服务器，买的域名，搭建过一个博客系统，但是发现每次管理博客很费事，后来又做了个博客的后台管理系统，方便自己对博客进行管理，这种方式自由度很高，可以随心所欲的根据自己的想法来实现美化和改造自己的博客系统，缺点也是显而易见的，每个月的服务器租赁开销也是一笔不小的开销，时间久了就放弃了。后来还尝试过使用hexo框架搭建的博客，挂载到github.io上，这种方式不用自己租赁服务器，而且可以部署在Github上，但是缺点也是有的，比如自定义能力比较差，只能基于hexo提供的一些模版来打造自己的博客，还有就是博客的评论功能不是很完善，虽然也可以基于一些第三方的插件实现，比如“多说”，但是稳定性不是很强，使用起来比较麻烦，最后也放弃了。

Github issues具有下面几个优点：

天生的前后端分离

借助于Github提供的API接口，我们可以轻松地和数据进行交互，比如获取issues列表数据、给某条issue点赞、给某条issue进行评论（惊喜的发现这个不就可以实现博客的评论操作了么🐶）。

多种接口调用方式

Github贴心的为开发者提供了两种接口调用方式，REST API v3接口和GraphQL API v4接口，你可以根据自己需要使用不同的调用方式。

Github issues支持Markdown语法，支持给issues加标签

现在大部分人写博客都是基于Markdown语法来书写的，Github issues内置对Markdown语法的支持，同时，针对每条issue，可以设置相应的标签(Label)，甚至还可以自定义标签的颜色，这里不得不说Github为大家想的真是周到啊😄。

Github提供了基本的用户信息

Github提供了获取用户的接口，用户使用Github账号登录后，可以获取用户的基本信息，包括用户名、头像、坐标地点、邮箱等信息，方便我们展示这些基本信息。

🚀认识Github App

什么是Github App

前面我们说到了，基于Github提供的API，我们可以干很多事情，但是很多接口直接去调用是没法调用成功的，必须要提供认证信息才能调用成功。这里就要用到Github App了，那么什么是Github App呢？大家可以参考下官方说法Github App。

简单来说，Github App提供了一个认证的方式，用户通过创建一个Github App，来设置Github提供的功能和权限，然后将该App安装到某一个repository中，这样这个repository就能获取该Github App所赋予的相应操作权限。

为GitHub App识别和授权用户

当我们的Github App代表用户对服务器发起请求时，必须使用用户的访问令牌授权这些请求，主要包括以下三个步骤(具体可以参考这里Github App授权流程)：

Users are redirected to request their GitHub identity

Users are redirected back to your site by GitHub

Your GitHub App accesses the API with the user's access token

第一步：需要跳转到Github指定的授权页面进行授权授权的请求地址是：https://github.com/login/oauth/authorize 这是一个Get请求，请求的同时还需带上以下几个参数：

名称	类型	描述
client_id	string	必填项。创建`Github App`时生成的`client ID`。
redirect_uri	string	必填项。重定向的地址。当授权成功后会重定向到该地址，并且会将授权码在URL上一并返回，需要注意的是，这里的重定向地址必须要和我们创建`Github App`时所填写的User authorization callback URL保持一致。
state	string	非必填项。一个防止伪造攻击的随机数字符串。
login	string	非必填项。建议用于登录和授权应用程序的特定帐户。

第二步：Github重定向回指定的callback URL 当授权成功后，Github会重定向到上一步中的callback URL，同时会在地址栏带上一个code参数的授权码，接下来我们就需要通过这个授权码来获取Token。

获取到授权码后，向这个地址发送一个POST请求以获取Token： https://github.com/login/oauth/access_token

这个请求同样有些参数需要传递：

名称	类型	描述
client_id	string	必填项。创建Github App时生成的`client ID`。
client_secret	string	必填项。创建Github App时生成的`client secret`。
code	string	必填项。上一步中获取的授权码。
redirect_uri	string	非必填项。授权成功后的重定向地址。
state	string	非必填项。第一步中传入的随机数。

请求成功后会得到如下的返回结果:

access_token=e72e16c7e42f292c6912e7710c838347ae178b4a&token_type=bearer

这个请求会存在跨域的问题，后面我会教大家如何解决这个问题。

第三步：使用获取的Token去请求Github API 上面两步成功完成后，现在我们就可以用获取到的Token去调用相应的Github API了。

上面就是一个完整的授权获取数据的过程，那么下面就介绍下如何来创建一个Github App。

🌿创建一个Github App

在Github的主页点击用户头像，选择Settings菜单，点击Developer settings菜单，即可进入Github Apps操作页面，点击New Github App按钮，即可进入到创建Github App的页面。在这里插入图片描述填写好Github App name、Homepage URL、 User authorization callback URL这些字段。注意因为是开发阶段，所以这里的User authorization callback URL地址我填写的是我本地开发环境地址，真正上线后还需要替换成github.io地址。

接着需要设置相关权限，因为我们是用Issues来作为博客的数据来源，所以需要勾选上允许读写操作。在这里插入图片描述接下来还可以根据你自己的需要设置一些其他方面的权限，比如订阅事件，当有人评论你的Issues时，Github会自动以邮件的形式通知你，这个还是挺实用的，方便你随时对Issues进行回复。点击Create Github App按钮即可完成一个Github App的创建过程。操作成功后即可看到完整的Github App信息：在这里插入图片描述

🐘安装Github App

前面提到过，创建的Github App还必须要安装到对应的repository，才能够在调用API的时候获取设置的相应权限。

在刚刚创建成功的Github App页面，选择左侧的Install App菜单，然后选择你的账户去安装，这里你可以选择给所有的repository进行安装或者选择某一个指定的repository进行安装。在这里插入图片描述

总结

至此，关于利用Github App获取对Github API的相关操作权限的部分就全部结束了。

astonishqft / astonishqft.github.io