无需服务器,教你搭建一个完整功能博客

1,105 阅读2分钟

博客地址

如果你看主址,可以看见博客是基于 github + issues 搭建,完全没有依赖于服务器

  • 支持评论
  • 支持分页
  • 支持发布
  • 无需服务器
  • 功能 DIY
  • 一次开发

现在我们就来从零开始一步一步搭建一个博客服务

步骤

第一步

  • 注册一个 github 账号 【来掘金的咋都有吧.....】
  • 创建一个仓库 【名字随机】
  • 创建一个 OAuth application,重点如下图

第二步

技术选型

  • vue react .... 随便你

第三步 接口一览 和重点

  • issues
  • issues 数据请求参数

因为开发需要,参数其实是不全的,比如,要做分页功能, 其他参数如下

参数 说明 默认
page 第几页
per_page 没页数量
client_id 因为 github 有请求限制,带上这个两个参数做认证就不会有限制
client_secret 因为 github 有请求限制,带上这个两个参数做认证就不会有限制
Accept 请求头部 【application/vnd.github.squirrel-girl-preview,application/vnd.github.html+json】 加上这个获取的返回值是 html 可以直接渲染,不加会返回 md 数据,你还需要自己解析才能渲染

上面的 OAuth application 创建完就可以获取 client_id 和 client_secret

第 三.五 步 使用库

  • gitalk, 做评论的,有 GitHub 登陆限制
  • tocbot, 更具 标签转换为目录的库

第四步 如果上面的过程开发完了,就是部署问题了

就用 vue 做说明吧,不要问为什么,因为我用的就是

  • 打包,请创建 vue.config.js, 并写上
module.exports = {   
 outputDir: 'docs', // 更改打包后的目录,方便部署
 publicPath: './' // 解决 GitHub 因为路径问题
}

  • 打包完上传到你的 github 创建的仓库中,并...
  • 进入仓库 Settings

如果一切顺利的话,就可以访问了,恭喜你搭建成功

结尾

如果嫌弃自己开发麻烦

  • 现成模板
  • 已经将配置抽离了出来,放到全局下了 blog.config.js
  • 你只需要 完成上面的注册部分,更改配置,就可以,直接使用了
  • 上面的还是需要那么一点基础的,起码你的会发请求,爱倒腾......
  • 开发过程坑很多,但多数坑,已经在上面说的很清楚了,有疑问请留言
  • 重点 ---- 请勿喷 ME -----