作为一个工作了好几年的前端搬砖狗,搭建一个属于自己的博客是很有必要的,一来可以总结自己的开发学习经验,二来可以分享和记录下自己的学习轨迹,可谓好处多多,那么今天我就给大家介绍一种搭建博客的新方式。
✈️为什么选择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.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
的相关操作权限的部分就全部结束了。
下面的是我的公众号二维码图片,欢迎关注。