loo41/Blog

无需服务器，教你搭建一个完整功能 Blog 系统

loo41 opened this issue · 7 comments

loo41 commented

博客地址

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

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

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

步骤

第一步

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

J53M9)7YKH5@Y 9U~HYGBVY

第二步

技术选型

  • vue react .... 随便你

接口一览 和重点

  • issues
  • issues 数据请求参数

}3W90QD(RQSFIM00U4LFJOW

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

参数 说明 默认
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

HN8V%E))~370J624 OK6 9K

使用库

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

如果上面的过程开发完了，就是部署问题了

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

  • 打包，请创建 vue.config.js, 并写上
module.exports = {   
 outputDir: 'docs', // 更改打包后的目录，方便部署
 publicPath: './' // 解决 GitHub 因为路径问题
}
  • 打包完上传到你的 github 创建的仓库中，并...
  • 进入仓库 Settings

KO~@)~B2C U60K2_W}NW{GA

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

结尾

如果嫌弃自己开发麻烦

  • 现成模板
  • 已经将配置抽离了出来，放到全局下了 blog.config.js
  • 你只需要 完成上面的注册部分，更改配置，就可以，直接使用了
  • 上面的还是需要那么一点基础的，起码你的会发请求，爱倒腾......
  • 重点 ---- 请勿喷 ME -----
w-xuefeng commented

可以的！我觉得可以考虑解析自己的域名到这里替换默认github的域名。

loo41 commented

可以的！我觉得可以考虑解析自己的域名到这里替换默认github的域名。

🆗，我觉得也挺方便的

F-loat commented

你这 banner 什么画风。。

建议构建用 ci 自动执行，把 dist 目录 gitignore 了，部署时候自动提交到 gh-pages 分支就行

loo41 commented

@F-loat
banner 属于 DIY 风格，纯属，做到哪里，想着就改到哪里，写这的时候，哎这样不好看，换一个，那样不好看，换一个，就变成了这样，哈哈哈。
也是哈，提交到 ph-pages 分支。

winnilove commented

不知道是我的网原因还是什么，打开博客很慢

loo41 commented

@winnilove
image

  • 不考虑网速的情况，和 github 服务端情况，这种前端页面渲染 和 网络请求，的确很费事，图片可能大了一些，我用了懒加载，也分了 chuck 代码里面也没有什么特别奇怪的地方，我代码里面也有一些 粘贴以前 效果的 dom 操作，正好研究研究这个东西
loo41 commented

image

image

  • js里面的主要问题就是 canvas 绘制首页的背景图和 vue 的解析挂载了