0%

部署博客

闲来无事搭建了博客,只为有趣,结果费了很多事。一开始用了最流行的jekyll,但发现这个东西还是挺复杂,如果ruby不在你的技术栈里还是不要轻易尝试了。这篇博客随着我部署的过程逐渐变长,想着只是写给自己看的,写着写着变成了大而全的东西。于是索性编成一个教程,怕链接失效把原有的许多链接内容也抄了过来,如果有侵犯版权,请告知,必定删除。其实hexo官方文档写的已经很详细了。

其实大部分步骤都能百度到,文章目的是整理下搭建博客的流程。没有用域名还是因为没找到好的域名。。没有增加文章置顶还是因为需要修改hexo-generator-index的源码,但是travis构建的时候却没有效果,还是等待官方给出具体解决方案吧。

  1. 首先你得有一个github账号,不用多说。新建一个工程名为your_github_name.github.io,把静态页面提交至master分支,github会自动在https://your_github_name.github.io/ 生成页面。
  2. 安装git。下载地址
  3. 安装nodejs。下载地址
  4. 安装hexo。npm install -g hexo-cl,这句话相当于在全局安装hexo-cl,-g是global的简写,默认npm是会将库文件安装至当前文件夹下的node-modules,需要用-g参数指定全局安装。
  5. 初始化hexo。切换到workspace文件夹,执行以下命令初始化hexo并安装hexo所需要的库。
    1
    2
    3
    hexo init <folder>
    cd <folder>
    npm install
  6. 本地调试。在<folder>文件夹下运行hexo server命令可以启动一个本地的服务器,打开页面可以本地调试,修改源文件刷新即可看见效果。命令hexo generate会在<folder>下生成一个public文件夹,存储了静态页面。
  7. 同步至github。有两种手段。
    (1)使用命令npm install hexo-deployer-git --save安装hexo-deployer-git扩展,然后在文件夹下生成的__config.yml中修改。
    1
    2
    3
    4
    deploy:
    type: git
    repo: https://github.com/walio/walio.github.io.git
    branch: master
    文件夹下执行hexo deploy命令,应当会弹出git的图形界面要求输入用户名和密码。完成以后就会把生成的静态页面自动部署至githubpages了。
    (2)持续部署。毕竟每一次这样修改了之后都要同步两个分支太麻烦,用travis CI可以帮助我们同时同步。参考这篇文章。GH_TOKEN写成GH-TOKEN结果查了半天都没搞明白,还是要注意拼写。
  8. 修改<folder>文件夹下的__config.yml文件,看着改就行,主要是title、author、description等。
  9. 添加作者邮箱。因为没有评论,总要有一个别人联系我的方式(并不会有人联系)。
  10. 添加图标。图片制作为ico图标
  11. optional 更改主题。个人感觉hexo默认的主题landscape不是很好看。换了next主题,这是官方示例。安利一波next主题,灵活性好,开放性强,贡献者多,对于我辈不会自己造轮子的前端小白来说是福音。同样官方文档也很详细。官方wiki。这里下载也有学问。直接下载,每次更新覆盖无疑是最麻烦的,如果作为子模块引入,修改了config.yml之后父模块无法同步提交。比较好的方法。可以从头至尾看一遍theme\next\__config.yml按需要修改。
  12. optional 安装echarts。(1)插件(方便)(2)手动(不优雅,但通过cdn能保持最新版echarts)。
  13. optional 取消sidebar自动弹出

如果你的travis-CI构建运行npm install的时候遇到了Invalid version: “https://registry.npmjs.org/hexo-util/-/hexo-util-0.6.0.tgz“的问题,有可能是你的package-lock.json出了问题。package-lock.json是根据package.json自动创建的,删掉会重新创建,不用担心会出错。