V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
viko16

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

  •  
  •   viko16 ·
    viko16 · Nov 20, 2015 · 11364 views
    This topic created in 3812 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
        1
    loading  
       Nov 20, 2015 via Android
    404
    viko16
        2
    viko16  
    OP
       Nov 20, 2015
    @loading 上面的链接我都戳了一次,似乎没有 404 呀
    viko16
        3
    viko16  
    OP
       Nov 20, 2015
    @loading 我明白了,爪机上不知为何 markdown 没解析了,然后我的链接都用尖括号包住了。。

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

    PS:

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

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

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

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

    brance -> branch

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

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

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


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

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

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


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


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

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

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

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

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

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

    还有,能分享下你的 markdown 的 css/js 插件吗?
    viko16
        40
    viko16  
    OP
       Dec 5, 2015
    @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
        41
    metrue  
       Jan 5, 2017
    @viko16

    看上去好清爽,已经 star

    但是没有搞清楚怎么 deploy

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

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

    https://github.com/viko16/vue-ghpages-blog/blob/develop/.travis.yml#L15-L33
    metrue
        43
    metrue  
       Jan 5, 2017
    @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   ·   Solana   ·   3940 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 81ms · UTC 05:13 · PVG 13:13 · LAX 22:13 · JFK 01:13
    ♥ Do have faith in what you're doing.