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

Vue + VueRouter + Vuex + Axios 抓取 GitHub 上的 Issues 搭建个人博客站点,支持评论功能

  •  1
     
  •   bingoogolapple ·
    bingoogolapple · 2017-08-15 16:33:01 +08:00 · 2431 次点击
    这是一个创建于 2656 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目背景

    刚接触 GitHub 的时候就开始在仓库 bingoogolapple.github.io 里创建 Issues 来记录学习笔记,那时候我还不知道有 GitHub Pages,后来了解到了可以通过 GitHub Pages 来搭建 个人博客站点,但是如果涉及到在文章里嵌套图片的话还是比较麻烦的

    通过 Issues 记录学习笔记的优点:

    • 在线编辑和预览,随时添加和提交(不用担心电脑坏了导致笔记丢失)
    • 当笔记里到嵌套图片时,支持粘贴屏幕截图和拖拽添加图片
    • 带有搜索和排序功能
    • 可通过 Label 来对 Issues 进行分类
    • 可以把每一个 Comment 作为一个小的知识点不停的追加到 Issue 里
    • 结合 GitHub Pages 绑定域名来搭建个人博客站点
    • 支持评论功能

    效果图

    列表界面

    列表界面

    详情界面

    详情界面 详情界面-滚动到顶部和评论

    关于我界面

    关于我界面

    使用方法

    本地运行

    1.安装依赖

    npm install
    

    2.在本地开启服务,然后就可以通过 http://localhost:8080 访问了

    npm run dev
    

    3.创建 OAuth Application

    OAuth Application

    4.个人配置 - 修改「 BGAIssueBlog/src/store/account.js 」文件中的「 state 」属性

    const state = {
      accessToken: localStorage.getItem(LS_KEY_ACCESS_TOKEN),  // 这个不要修改,这个不要修改,这个不要修改。当前登录用户的 GitHub AccessToken
      auth: {
        proxy: 'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token', // 这个不要修改,这个不要修改,这个不要修改。
        clientID: '8fe09ec96875938b908d',   // 改成你在 https://github.com/settings/applications/new 新建的 OAuth application 的 Client ID
        clientSecret: '46df51ccde6f3499c3b90861bba660fb1bcf15e4'  // 改成你在 https://github.com/settings/applications/new 新建的 OAuth application 的 Client Secret
      },
      gitHubUser: null,  // 这个不要修改,这个不要修改,这个不要修改。
      gitHubUsername: 'bingoogolapple',  // 修改成你自己的 GitHub 账号
      copyright: '2014 - 2017',  // 修改成你自己的
      recordNumber: '蜀 ICP 备 17023604 号',  // 修改成你自己的备案编号,如果没有备案的话就设置为 null
      repo: 'bingoogolapple/bingoogolapple.github.io',  // 记录 Issue 的仓库的全名「用户名 /仓库名」
      pageSize: 10,  // 博客列表每页显示多少条博客
      showQQGroup: true,  // 如果要显示你自己的 QQ 群二维码图片的话这里配置成 true 并且替换「 BGAIssueBlog-Web/static/img/qq-group.png 」为你自己的 QQ 群二维码图片,否则配置成 false 即可
      thirdPartySite: [  // 配置你想在左上角展示的第三方站点信息
        {
          img: 'static/img/github.png',  // 第三方站点图标,存放在「 BGAIssueBlog-Web/static/img 」目录中
          url: 'https://github.com/bingoogolapple'  // 第三方站点的 url
        },
        {
          img: 'static/img/weibo.png',
          url: 'http://weibo.com/bingoogol'
        },
        {
          img: 'static/img/git.png',
          url: 'https://bingoogolapple.gitbooks.io/bgalearningnotes-git/content'
        }
        // 如果还有其他站点需要显示,继续在这里追加
      ]
    }
    

    5.个人配置 - 修改网站图标

    修改「 BGAIssueBlog/static/img/favicon.ico 」文件
    

    6.个人配置 - 修改网站标题

    修改「 BGAIssueBlog/index.html 」文件里「<title>」标签里的内容
    

    发布到 GitHub Pages

    1.打包

    npm run build
    

    2.发布

    拷贝「 BGAIssueBlog/docs 」目录里的所有文件到「 GitHub Pages 」的根目录下
    并将「 GitHub Pages 」仓库 PUSH 到 GitHub 上
    

    绑定域名到 GitHub Pages

    1.在「 GitHub Pages 」根目录下添加文件名为「 CNAME 」的文件,文件内容就是你的二级域名,例如我的是

    www.bingoogolapple.cn
    

    2.登陆你的域名控制台添加域名解析

    「记录类型」选择「 CNAME 」
    「主机记录」填「 www 」
    「记录值」填「 GitHub 用户名.github.io 」,例如我的是「 bingoogolapple.github.io 」
    

    相关链接

    5 条回复    2018-04-25 11:15:39 +08:00
    Sanko
        1
    Sanko  
       2017-08-15 16:38:47 +08:00 via Android
    刚从 typecho 跳坑到 hexo+github 上
    loading
        2
    loading  
       2017-08-15 16:46:08 +08:00 via Android
    不错,我现在用的是 mirror.
    loading
        3
    loading  
       2017-08-15 16:47:03 +08:00 via Android
    楼主做下移动端适配吧 *^o^*
    bingoogolapple
        4
    bingoogolapple  
    OP
       2017-08-15 16:55:54 +08:00
    @loading 还在学习移动端适配,后面有时间会适配的。

    如果你有好的点子可以回复,如果能直接提 PR 就更好了🙂
    yeyu123
        5
    yeyu123  
       2018-04-25 11:15:39 +08:00
    mark 一下 能不能趴下来
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2672 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:23 · PVG 20:23 · LAX 04:23 · JFK 07:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.