V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
loveyou1
V2EX  ›  前端开发

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

  •  
  •   loveyou1 · 2019-08-04 14:14:38 +08:00 · 4272 次点击
    这是一个创建于 1938 天前的主题,其中的信息可能已经有所发展或是发生改变。

    博客地址

    如果你看主址,可以看见博客是基于 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 -----
    第 1 条附言  ·  2019-08-04 18:54:34 +08:00
    • blog 写错了,写的时候没注意,抱歉,这里的文字不能更新吗?还是我没找到......
    • 欢迎关注我的blog啊
    31 条回复    2019-08-05 20:50:40 +08:00
    oxogenesis
        1
    oxogenesis  
       2019-08-04 14:40:53 +08:00
    与天斗其乐无穷
    与地斗其乐无穷
    与机器斗其乐无穷
    hhyvs111
        2
    hhyvs111  
       2019-08-04 14:47:49 +08:00
    bolg ?
    lloovve
        3
    lloovve  
       2019-08-04 14:48:04 +08:00 via iPhone
    不需要服务器。你需要 github 貌似更难
    learningman
        4
    learningman  
       2019-08-04 15:25:35 +08:00
    兄啊你 blog 打的都是错的啊
    learningman
        5
    learningman  
       2019-08-04 15:26:26 +08:00
    兄啊你偷人文章里面的掘金都没删啊
    liukangxu
        6
    liukangxu  
       2019-08-04 15:34:35 +08:00   ❤️ 1
    在 PC 上,这种滑入 /滑出的页面切换方式真的让人头晕
    loveyou1
        7
    loveyou1  
    OP
       2019-08-04 18:18:11 +08:00
    @hhyvs111 写错了 .....
    loveyou1
        8
    loveyou1  
    OP
       2019-08-04 18:18:47 +08:00
    @lloovve github 不是更简单
    loveyou1
        9
    loveyou1  
    OP
       2019-08-04 18:19:16 +08:00
    @learningman 没有吧,我自己刚写的,掘金那个都是我写的
    loveyou1
        10
    loveyou1  
    OP
       2019-08-04 18:20:18 +08:00
    @liukangxu 还好吧,pc 上加点过度,可能是我的审美问题, 哈哈哈哈
    loveyou1
        11
    loveyou1  
    OP
       2019-08-04 18:21:00 +08:00
    @oxogenesis 欢迎关注啊
    loveyou1
        12
    loveyou1  
    OP
       2019-08-04 18:22:12 +08:00
    这里的编辑器为什么不能更改啊,......
    pandasoda
        13
    pandasoda  
       2019-08-04 18:22:36 +08:00
    这个访问速度...
    loveyou1
        14
    loveyou1  
    OP
       2019-08-04 18:24:54 +08:00
    @pandasoda 访问速度,可能是我加了大图片导致的,你们自己开发,自己看好了
    edgnoz
        15
    edgnoz  
       2019-08-04 18:39:02 +08:00 via iPhone   ❤️ 1
    Girhub 的服务器不是服务器吗
    loveyou1
        16
    loveyou1  
    OP
       2019-08-04 18:41:16 +08:00
    @edgnoz github 是自己的吗?你自己买服务器,和微软的服务器,你认为谁更可能挂,自己买服务器,还需要会配置 等等
    loveyou1
        17
    loveyou1  
    OP
       2019-08-04 18:43:07 +08:00
    [https://github.com/loo41/Blog]( https://github.com/loo41/Blog) @edgnoz 一般除非,微软挂了,或者限制访问等情况,不然怎么可能挂掉
    mayx
        18
    mayx  
       2019-08-04 18:57:48 +08:00 via Android
    jekyll 难道还不够用吗?
    loveyou1
        19
    loveyou1  
    OP
       2019-08-04 19:00:35 +08:00
    @mayx 没用过
    mayx
        20
    mayx  
       2019-08-04 19:06:50 +08:00 via Android
    @loveyou1 😓Github Pages 原生支持 Jekyll 啊,比 Vue 再次读取渲染 md 文件要好吧
    loveyou1
        21
    loveyou1  
    OP
       2019-08-04 19:13:29 +08:00
    @mayx 好吧,我了解一些,我是自己请求返回的 html 没有返回 md 再次渲染,其实就和后端模板渲染差不多
    liuxey
        22
    liuxey  
       2019-08-04 19:17:06 +08:00
    这... (邓超脸)
    vibbow
        23
    vibbow  
       2019-08-04 19:18:57 +08:00
    github 的服务器就不算服务器了么...
    loveyou1
        24
    loveyou1  
    OP
       2019-08-04 19:26:34 +08:00
    @vibbow 我所谓的服务器是不需要自己搭建服务器环境的,就像小程序的云开发,你都不需要会服务器
    TMaize
        25
    TMaize  
       2019-08-04 19:45:11 +08:00 via Android
    还可以这样玩!不过对搜索引擎应该不太好
    loveyou1
        26
    loveyou1  
    OP
       2019-08-04 19:48:18 +08:00
    @TMaize vue 前端渲染,你打开开发者工具,都是 js 里面渲染的,怎么可能对搜索引擎好,如果你想对搜索引擎好的话,ssr next.js 这些,还有 github.io 的网站,百度也不收录,好不好其实没啥影响
    CEBBCAT
        27
    CEBBCAT  
       2019-08-05 04:35:50 +08:00 via Android
    2019 年了,不打算试试 newtlife ?
    CEBBCAT
        28
    CEBBCAT  
       2019-08-05 04:36:39 +08:00 via Android
    打错,是 netlify
    lzhnull
        29
    lzhnull  
       2019-08-05 10:30:13 +08:00
    ???
    loveyou1
        30
    loveyou1  
    OP
       2019-08-05 20:42:07 +08:00
    @CEBBCAT ??
    @lzhnull ??
    CEBBCAT
        31
    CEBBCAT  
       2019-08-05 20:50:40 +08:00
    @loveyou1 #29 没看错,就是 netlify,配置好了只用写 Markdown 文件,不用管发布那一套。有基础的英文能力应该就能按照教程配置出来,你可以看看我的 https://github.com/Zhang-Siyang/Blog
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1585 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:05 · PVG 01:05 · LAX 09:05 · JFK 12:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.