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

773 阅读7分钟

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

博客地址

✈️为什么选择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授权流程):

  1. Users are redirected to request their GitHub identity
  2. Users are redirected back to your site by GitHub
  3. 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 nameHomepage URLUser 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的相关操作权限的部分就全部结束了。

下面的是我的公众号二维码图片,欢迎关注。

在这里插入图片描述