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

爱意满满的作品展示区。

This topic created in 3862 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

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

Demo: http://ukn.me

43 replies • 2017-01-05 16:59:24 +08:00

loading

Nov 20, 2015 via Android

404

viko16

Nov 20, 2015

@loading 上面的链接我都戳了一次，似乎没有 404 呀

viko16

Nov 20, 2015

@loading 我明白了，爪机上不知为何 markdown 没解析了，然后我的链接都用尖括号包住了。。

您把链接后的半个尖括号去掉就好了 (つω⊂)

Hello1995

Nov 20, 2015 via Android

看起来挺 nice 的，不错。

PS:

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

点进去你的博客我就想吐槽《纯数字域名》一文，所谓的“纯数字”就是 32 位的 IP 地址写成十进制…而平时常见的 IPv4 的写法是“点分十进制”。最后，你还混淆了 IP 地址和域名的概念。(也就是说那篇博文标题也是错的)

Slienc7

Nov 20, 2015 via Android

@Hello1995
不算混淆概念吧，只是通俗的以吸引读者而已，没必要怎么较真。不过可以考虑加个""

Slienc7

Nov 20, 2015 via Android

@xgowex 翻到那个的贴子的 152 楼，我还加了几个~~

viko16

Nov 20, 2015

@Hello1995 @xgowex 感谢，

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

更加感谢你们指正了我的错误，现在修改过来了， Thank you

jinzhe

Nov 20, 2015

VUEJS 群： 240319632

woailuosj

Nov 20, 2015

我也想写个博客练习练习，来群吧！ 240319632

shunia

Nov 20, 2015

/src/setting/index.js:
```
config: {
repo: 'viko16/vue-ghpages-blog',
path: 'markdown',
brance: 'markdown'
}
```

brance -> branch

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

做的不错,顶楼主

shunia

Nov 20, 2015

另外有个想法,可以把样式文件独立出来,通过加载内容一样的原理从其他项目加载过来,达到动态换肤的目的.这样 fork 一个 blog,fork 一个 theme,改好了 blog 的配置之后,每次更新 theme 的文件,就能得到动态的皮肤了.
整天折腾 blog 的不就爱折腾皮肤么.

ChiangDi

Nov 20, 2015 via Android

帅呆了，我也要用这个了。

Moker

Nov 20, 2015

无刷新加载是用了 vue 的双向数据绑定？

viko16

Nov 20, 2015

@shunia 谢谢指正，错字已改。

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

@Moker ，是的，也用了 vue-router 做路由切换

lijinma

Nov 20, 2015

SEO 会有问题吗。嘿嘿

viko16

Nov 20, 2015

@lijinma
单页应用好像都会有问题的，不过好像 Google 有 sitemap 的规范可以利用，我有空研究下

Moker

Nov 20, 2015

@viko16 前几天看了下。。。发现还是没弄明白。。。。

viko16

Nov 20, 2015

@Moker

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

可以参考 https://github.com/viko16/vue-ghpages-blog/blob/gh-pages/src/main.js#L22-L34

doublleft

Nov 20, 2015

不错一会儿整上 http://qinshou.me

Moker

Nov 20, 2015

@viko16 start 了改天有空看看

wsph123

Nov 20, 2015

唔，不错不错。

lijinma

Nov 20, 2015

@viko16 恩恩

jokcy

Nov 20, 2015

其实你这么做博客的一个问题就是你怎么做 SEO 。。。

bayallen

Nov 20, 2015

已 star ，最近准备开发一个 SPA 应用，看来看去，决定使用已上手的 Vue.js ，正愁没多少例子可以看呢。

loading

Nov 20, 2015 via Android

@viko16 哦，我也没留意到，感谢提醒

viko16

Nov 20, 2015

@doublleft 这域名..很好..很好..

@jokcy 的确如此，我去留意下这方面的

djyde

Nov 20, 2015

4 格缩进，要烧了 233

jswh

Nov 22, 2015

我也正在写一个累死的东西......，而然因为懒癌拖了好久

jswh

Nov 22, 2015

@jswh 类似

viko16

Nov 22, 2015

@djyde 并无所谓，自己习惯 && 又不上 npm

@jswh 哈哈，相互分享相互交流呗

Nov 23, 2015

这个博客啊， excited 。资慈楼主

kingme

Nov 23, 2015

star & fork ，研究一下。没用过组件，哈哈。我就玩玩双向绑定。

viko16

Nov 23, 2015

@kingme

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

https://github.com/vuejs/vue-hackernews/tree/gh-pages/src/components

xfack

Nov 23, 2015

现在问题来了...如果用独立 vps 的话,是不是一定要用 npm!?

viko16

Nov 23, 2015

@xfack npm 的确逃不掉噢 (つд⊂)

JoyNeop

Nov 25, 2015

https://joyneop.xyz/blog/

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

viko16

Nov 25, 2015

@JoyNeop

我看了一下你的库，似乎 list.json 和 sitemap.xml 是手动维护？

JoyNeop

Nov 25, 2015 via iPhone

@viko16 list.json 手动维护，其余用 node

ooTwToo

Dec 5, 2015

我能看懂的就只有 pjax/markdown/css 了。

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

还有，能分享下你的 markdown 的 css/js 插件吗？

viko16

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

Jan 5, 2017

@viko16

看上去好清爽，已经 star

但是没有搞清楚怎么 deploy

npm run build 之后的 dist/* 是怎么到 master or gh-pages branch 的呢？

viko16

Jan 5, 2017

@metrue 谢谢支持。

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

https://github.com/viko16/vue-ghpages-blog/blob/develop/.travis.yml#L15-L33

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