利用Github Pages + Hexo搭建个人博客

hello world
对于我来说,今天是个重要的日子,因为今天是开始写博客的日子。理所当然,第一篇博客应该写自己是如何“折腾”出自己的博客的。之前我使用的主题是hueman,后来我又改成了raytaylorism,并不是说我不专一,只是说我在寻找适合我的^.^。我在Windows系统环境下搭建此博客的。
整个网络中已经有太多太多的人写过类似的教程了,按照他们的教程,你完全可以搭建出漂亮的博客,而我写这篇文章主要是对整个搭建过程进行适当总结,以及对主题中修改了的细节进行适当说明,希望对使用该主题的人有一定的帮助。

搭建过程(简易版)


环境配置,安装所需软件

需要用到的软件有:

安装Hexo

$ npm install hexo-cli -g
$ cd the_path_you_wanna_build_blog
$ hexo init <your_blog_name> # your_blog_name 可以缺省
$ npm install
$ hexo g # 或者hexo generate
$ hexo s # 或者hexo server,可以在http://localhost:4000/ 查看

Hexo主题设置

你可以在官网 或者 https://github.com/hexojs/hexo/wiki/Themes 选择你需要的主题
下载主题

$ git clone <repository> themes/<theme-name>

启用主题
修改your_blog_name目录下的_config.yml配置文件中的theme属性,将其设置为上面的 theme-name
修改设置后如果在浏览器中没有看到想要的效果,使用$ hexo clean来清除缓存,然后重新生成静态文件$ hexo g
修改主题
修改主题是在 theme\your_theme 目录下进行相关操作的,本节内容主要讲的是修改 raytaylorism 主题。使用 raytaylorism 主题的注意事项在该主题的官方 github 地址中已经说明得很清楚了,只需要严格按着开发者要求做,就不会出现什么大问题。

  1. 如果你想使用英文语言,建议将 languages 下的 default.yml 文件名修改为 en.yml,因为我在电脑上使用 default.yml 的时候,网页的语言会偶尔变成中文或者繁体,不知道什么原因。
  2. 如果你觉得正文在大屏幕下显得太窄(默认为700px定宽),可以修改 source\css\_base\lib_customize.styl 中的 .container 类的宽度设置,修改之后往往会出现右侧的目录栏与正文重叠的情况,继续修改 source\css\_partial\tablecontents.styl 里面的 left calc(50% + 350px) ,建议修为 350px 为你的正文宽度的一半,或者你自行调整直至满意。
  3. layout\_partial\plugin\reward.ejs 文件中可以替换转账二维码和显示的“打赏文本”。
  4. 站点分析工具我使用的是百度分析平台,在 _config.yml 配置文件中添加baidu_analytics:,然后将你的百度分析ID添加在后面。接着在 layout\_partial\plugin\analytics.ejs 文件后面添加如下代码:
    <% if (theme.baidu_analytics){ %>
    <script>
    var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?<%= theme.baidu_analytics %>";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
    })();
    </script>
    <% } %>
    
  5. 为 raytaylorism 主题添加统计站点访问量的功能:
    layout\_partial\after_footer.ejs 文件中添加如下代码:
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    然后将 layout\_partial\footer.ejs 文件中最后一个 <p> 元素替换成下面的代码:
    <p class="right" style="margin-top: 0;">
    <span id="busuanzi_container_site_uv" style="display: none;">
    您好,您是本站点的第 <span id="busuanzi_value_site_uv" style="color: yellow;"></span> 位访客,祝您生活工作愉快
    </span></p>
    
    如果想给每篇文章添加统计阅读量,我的做法是在 layout\_partial\aticle.ejs 文件中的 <%- partial('post/time') %> 行后面添加如下代码:
    <div style="float: right;color: #E91E63">
    <span id="busuanzi_container_page_pv" style="display: none;">
    阅读次数 <span id="busuanzi_value_page_pv"></span>
    </span></div>
    
    提醒,不要把上面的代码添加到 layout\_partial\post\time.ejs 文件后面,虽然说也可以到达目的,但是(但是来了),你会发现别人访问你首页的时候,会出现一个大大的、让你害羞、让别人尴尬的“阅读次数xxx”字样。更多细节可以访问不蒜子

创建github个人主页

在github上创建username/username.github.io的仓库,http://username.github.io/这以后就是你的个人主页
特别提醒一下,需要注意的是个人主页的网站内容是存在于master分支下的。

部署Hexo到Github Pages

修改your_blog_name目录下的_config.yml配置文件中的deploy属性:

deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master

使用下面的命令部署到Github Pages:

$ npm install hexo-deployer-git    --save  # 部署所需的插件,加上--save比较好
$ hexo deploy # 或者 hexo d

跨电脑使用Hexo


很多情况下,我们会在不同的电脑上写自己的博客,怎么才能同步使用呢?最简单的方法就是将your_blog_name目录下的所有文件推送至新建的某个远程仓库。
首先,删除你下载的主题文件夹里面的.git文件夹,这样才能将下载的修改后的主题推送至远程仓库。

$ cd your_blog_name
$ git init
$ git add -A
$ git commit -m "something"
$ git remote add origin git@github.com:username/new_repository.git
$ git push origin master

在别的电脑上写博客的时候,先按照前面的要求安装好所需的软件,然后执行如下命令:

$ git clone git@github.com:username/new_repository.git

# 然后进入该 git 仓库执行下面的命令:
$ npm install # 记得不需要执行 hexo init 这条命令!!!

接着安装你需要用到的 hexo 插件,比如 hexo-generator-feed 和 hexo-generator-sitemap等。
大功告成,又可以开始写博客了。

额外说明


当使用图床的时候,比如七牛云,如果你多次上传同名的文件,会出现资源不会更新的情况,比如你修改了一张图片之后重新上传到七牛云,然而你会发现你的网页中的图片依然没有更新。我们在开发中,需要更新 css,html 等静态资源。而且在七牛是同名资源覆盖,这就导致文件在七牛源站更新后,却取的是 cdn 的旧缓存。最好的解决办法是在使用资源链接的时候在链接后面加上?v=……,省略号是表示版本号,你自己定义。如果你带了?v=1234这样的查询参数在文件 url 后面,就变成了不同的 url,所以不会命中 cdn 的缓存,会去原站七牛拉资源,这时候拉取到的资源就变成了覆盖更新后的资源了。

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器