V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
viko16
V2EX  ›  分享创造

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

  •  
  •   viko16 ·
    viko16 · 2015-11-20 14:33:51 +08:00 · 10242 次点击
    这是一个创建于 3051 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    Demo

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

    食用方式

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

    其他

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

    您把链接后的半个尖括号去掉就好了 (つω⊂)
    Hello1995
        4
    Hello1995  
       2015-11-20 14:46:45 +08:00 via Android
    看起来挺 nice 的,不错。

    PS:

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

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

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

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

    brance -> branch

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

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

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


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

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

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


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


    @jswh 哈哈,相互分享相互交流呗
    fy
        31
    fy  
       2015-11-23 00:40:42 +08:00
    这个博客啊, excited 。资慈楼主
    kingme
        32
    kingme  
       2015-11-23 12:36:29 +08:00
    star & fork ,研究一下。没用过组件,哈哈。我就玩玩双向绑定。
    viko16
        33
    viko16  
    OP
       2015-11-23 12:49:34 +08:00
    @kingme

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

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

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

    我看了一下你的库,似乎 list.json 和 sitemap.xml 是手动维护?
    JoyNeop
        38
    JoyNeop  
       2015-11-25 19:26:18 +08:00 via iPhone
    @viko16 list.json 手动维护,其余用 node
    ooTwToo
        39
    ooTwToo  
       2015-12-05 00:37:24 +08:00
    我能看懂的就只有 pjax/markdown/css 了。

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

    还有,能分享下你的 markdown 的 css/js 插件吗?
    viko16
        40
    viko16  
    OP
       2015-12-05 10:36:32 +08:00
    @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  
       2017-01-05 15:55:58 +08:00
    @viko16

    看上去好清爽,已经 star

    但是没有搞清楚怎么 deploy

    npm run build 之后的 dist/* 是怎么到 master or gh-pages branch 的呢?
    viko16
        42
    viko16  
    OP
       2017-01-05 16:11:01 +08:00
    @metrue 谢谢支持。

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

    https://github.com/viko16/vue-ghpages-blog/blob/develop/.travis.yml#L15-L33
    metrue
        43
    metrue  
       2017-01-05 16:59:24 +08:00
    @viko16

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

    git checkout master
    cp dist/* .
    git add build.js build.css index.html
    git commit -m "deploy"
    git push
    git checkout develop
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3259 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 11:30 · PVG 19:30 · LAX 04:30 · JFK 07:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.