爱意满满的作品展示区。
viko16

用 Vue.js 造了个轮子静态博客的轮子,依赖 GitHub,无需本地生成 <(▰˘◡˘▰)>

  •  
  •   viko16 ·
    viko16 · Nov 20, 2015 · 12110 views
    This topic created in 4003 days ago, the information mentioned may be changed or developed.

    https://github.com/viko16/vue-ghpages-blog

    一只依赖 GitHub API 的静态博客,使用了 Vue.js 组件, webpack 打包

    Demo

    http://ukn.me/ <- 其实就是我自己的博客

    食用方式

    • 喜欢代码欢迎 Star
    • 喜欢博文欢迎 Watch
    • 也想自用的话也可以 Fork ,但请按照 README 上的说明修改

    其他

    • 目前只有列表页有缓存( sessionStorage ),以免滥用 API & 还能加速访问呢
    • 主要是参考了 Vue.js 的官方示例
    • 好像没了,我果然没什么文采不适合写小广告.. (つω⊂)
    Supplement 1  ·  Nov 20, 2015
    43 replies  •  2017-01-05 16:59:24 +08:00
    loading
    loading
    Nov 20, 2015 via Android
    1
    404
    viko16
    viko16
    OP
    Nov 20, 2015
    2
    @loading 上面的链接我都戳了一次,似乎没有 404 呀
    viko16
    viko16
    OP
    Nov 20, 2015
    3
    @loading 我明白了,爪机上不知为何 markdown 没解析了,然后我的链接都用尖括号包住了。。

    您把链接后的半个尖括号去掉就好了 (つω⊂)
    Hello1995
    Hello1995
    Nov 20, 2015 via Android
    4
    看起来挺 nice 的,不错。

    PS:

    http://ukn.me/ 这个是你的博客,上面你多了一个 >。

    点进去你的博客我就想吐槽《纯数字域名》一文,所谓的“纯数字”就是 32 位的 IP 地址写成十进制…而平时常见的 IPv4 的写法是“点分十进制”。最后,你还混淆了 IP 地址和域名的概念。(也就是说那篇博文标题也是错的)
    Slienc7
    Slienc7
    Nov 20, 2015 via Android
    5
    @Hello1995
    不算混淆概念吧,只是通俗的以吸引读者而已,没必要怎么较真。 不过可以考虑加个""
    Slienc7
    Slienc7
    Nov 20, 2015 via Android
    6
    @xgowex 翻到那个的贴子的 152 楼,我还加了几个~~
    viko16
    viko16
    OP
    Nov 20, 2015
    7
    @Hello1995 @xgowex 感谢,

    很好奇为什么在 Android 网页上 markdown 没有解析,

    更加感谢你们指正了我的错误,现在修改过来了, Thank you
    jinzhe
    jinzhe
    Nov 20, 2015
    8
    VUEJS 群: 240319632
    woailuosj
    woailuosj
    Nov 20, 2015
    9
    我也想写个博客练习练习,来群吧! 240319632
    shunia
    shunia
    Nov 20, 2015
    10
    /src/setting/index.js:
    ```
    config: {
    repo: 'viko16/vue-ghpages-blog',
    path: 'markdown',
    brance: 'markdown'
    }
    ```

    brance -> branch

    不够傻瓜,最好是把配置全部独立出来放到一个文件里,而且最好是放在根目录下

    做的不错,顶楼主
    shunia
    shunia
    Nov 20, 2015
    11
    另外有个想法,可以把样式文件独立出来,通过加载内容一样的原理从其他项目加载过来,达到动态换肤的目的.这样 fork 一个 blog,fork 一个 theme,改好了 blog 的配置之后,每次更新 theme 的文件,就能得到动态的皮肤了.
    整天折腾 blog 的不就爱折腾皮肤么.
    ChiangDi
    ChiangDi
    Nov 20, 2015 via Android
    12
    帅呆了,我也要用这个了。
    Moker
    Moker
    Nov 20, 2015
    13
    无刷新加载 是用了 vue 的双向数据绑定?
    viko16
    viko16
    OP
    Nov 20, 2015
    14
    @shunia 谢谢指正,错字已改。

    另外你这个想法,似乎 theme 也不止样式哦,还有 html 定制什么的,好像独立出来分层就有点多了,毕竟现在用着 vue.js 的 “单文件组件”
    http://cn.vuejs.org/guide/application.html#单文件组件


    @Moker ,是的,也用了 vue-router 做路由切换
    lijinma
    lijinma
    Nov 20, 2015
    15
    SEO 会有问题吗。嘿嘿
    viko16
    viko16
    OP
    Nov 20, 2015
    16
    @lijinma
    单页应用好像都会有问题的,不过好像 Google 有 sitemap 的规范可以利用,我有空研究下
    Moker
    Moker
    Nov 20, 2015
    17
    @viko16 前几天看了下 。。。发现还是没弄明白。。。。
    viko16
    viko16
    OP
    Nov 20, 2015
    18
    @Moker

    哈哈, vue-router 结合 vue component 挺好用的

    可以参考 https://github.com/viko16/vue-ghpages-blog/blob/gh-pages/src/main.js#L22-L34
    doublleft
    doublleft
    Nov 20, 2015
    19
    不错 一会儿整上 http://qinshou.me
    Moker
    Moker
    Nov 20, 2015
    20
    @viko16 start 了 改天有空看看
    wsph123
    wsph123
    Nov 20, 2015
    21
    唔,不错不错。
    lijinma
    lijinma
    Nov 20, 2015
    22
    @viko16 恩恩
    jokcy
    jokcy
    Nov 20, 2015
    23
    其实你这么做博客的一个问题就是你怎么做 SEO 。。。
    bayallen
    bayallen
    Nov 20, 2015
    24
    已 star ,最近准备开发一个 SPA 应用,看来看去,决定使用已上手的 Vue.js ,正愁没多少例子可以看呢。
    loading
    loading
    Nov 20, 2015 via Android
    25
    @viko16 哦,我也没留意到,感谢提醒
    viko16
    viko16
    OP
    Nov 20, 2015
    26
    @doublleft 这域名..很好..很好..


    @jokcy 的确如此,我去留意下这方面的
    djyde
    djyde
    Nov 20, 2015
    27
    4 格缩进,要烧了 233
    jswh
    jswh
    Nov 22, 2015
    28
    我也正在写一个累死的东西......,而然因为懒癌拖了好久
    jswh
    jswh
    Nov 22, 2015
    29
    @jswh 类似
    viko16
    viko16
    OP
    Nov 22, 2015
    30
    @djyde 并无所谓,自己习惯 && 又不上 npm


    @jswh 哈哈,相互分享相互交流呗
    fy
    fy
    Nov 23, 2015
    31
    这个博客啊, excited 。资慈楼主
    kingme
    kingme
    Nov 23, 2015
    32
    star & fork ,研究一下。没用过组件,哈哈。我就玩玩双向绑定。
    viko16
    viko16
    OP
    Nov 23, 2015
    33
    @kingme

    其实我自己也是练手的,主要参考了官方的那个示例项目 <(▰˘◡˘▰)>

    https://github.com/vuejs/vue-hackernews/tree/gh-pages/src/components
    xfack
    xfack
    Nov 23, 2015
    34
    现在问题来了...如果用独立 vps 的话,是不是一定要用 npm!?
    viko16
    viko16
    OP
    Nov 23, 2015
    35
    @xfack npm 的确逃不掉噢 (つд⊂)
    JoyNeop
    JoyNeop
    Nov 25, 2015
    36
    https://joyneop.xyz/blog/

    以前 sync AJAX 写的,最近 async 化重构了一次……
    原理类似,只是顺带加了一些 prefetch 。比较蛋疼的是不能删文章,下次重构会把文章列表数据结构从 array 改为 map 。
    viko16
    viko16
    OP
    Nov 25, 2015
    37
    @JoyNeop

    我看了一下你的库,似乎 list.json 和 sitemap.xml 是手动维护?
    JoyNeop
    JoyNeop
    Nov 25, 2015 via iPhone
    38
    @viko16 list.json 手动维护,其余用 node
    ooTwToo
    ooTwToo
    Dec 5, 2015
    39
    我能看懂的就只有 pjax/markdown/css 了。

    那么,弱弱的问一句,如果不依赖 Github Pages ,如何实现 读取 md 文件?

    还有,能分享下你的 markdown 的 css/js 插件吗?
    viko16
    viko16
    OP
    Dec 5, 2015
    40
    @ooTwToo

    如果不依赖 GitHub ,那么直接读取文件目录也是可以嘀(前提是得按具体情景去写哦,我目前的读取存储都写在 src/store/index.js 里


    另外 markdown 的解析我是使用了 marked 这个库,在 Vue 里当作 filter 使用
    https://github.com/chjj/marked


    至于 css ,自己定制了一些,我列一下位置吧

    https://github.com/viko16/vue-ghpages-blog/blob/gh-pages/src/components/PostView.vue#L76-L109
    https://github.com/viko16/vue-ghpages-blog/blob/gh-pages/src/components/App.vue#L70-L120
    metrue
    metrue
    Jan 5, 2017
    41
    @viko16

    看上去好清爽,已经 star

    但是没有搞清楚怎么 deploy

    npm run build 之后的 dist/* 是怎么到 master or gh-pages branch 的呢?
    viko16
    viko16
    OP
    Jan 5, 2017
    42
    @metrue 谢谢支持。

    按照我目前的工作流, dist/* 是靠 TravisCI 推送到 gh-pages 的,可以参考脚本:

    https://github.com/viko16/vue-ghpages-blog/blob/develop/.travis.yml#L15-L33
    metrue
    metrue
    Jan 5, 2017
    43
    @viko16

    也挺好的,我直接加一段 shell 好了

    git checkout master
    cp dist/* .
    git add build.js build.css index.html
    git commit -m "deploy"
    git push
    git checkout develop
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4928 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 87ms · UTC 01:23 · PVG 09:23 · LAX 17:23 · JFK 20:23
    ♥ Do have faith in what you're doing.