hexo+github page搭建博客

基本流程

• 参见这里：GitHub+Hexo 搭建个人网站详细教程

• 这篇文章把所有前期平台搭建的问题都讲得比较详细了，但是需要补充的几点是：

1. 所有的命令行操作都在使用hexo初始化博客之后自动生成的文件夹下进行；

2. 使用CNAME绑定个人域名时，注意将CNAME文件放在/source文件夹下，单独在github上创建会在下次提交时把该文件删除；

3. 如果想要使用https(什么是https？)，可以在github的仓库设置中勾选使用https，并在域名解析的控制面板中将下面ip中至少一个添加A记录:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
（这些IP地址可以在这个页面上找到）

4. 使用github page作为博客的仓库权限必须是公开（public）的；

5. 如果像笔者一样平时会需要使用多台设备的话，可以考虑将hexo博客的整个目录托管在github上，你可以新建一个分支（因为github page在这里只会解析master分支），也可以重新开一个仓库，笔者希望这些原始文件不被公开，因此选择了新建一个私有库；

6. 在托管原始文件时，自带的.gitignore文件会忽略/.deploy_git文件夹，因为这本身就是一个git仓库，而且会在执行“hexo g”时自动生成；

7. 基于和6一样的理由，如果你使用git clone方式下载主题文件，那么主题文件夹也不会被托管，所以可以考虑直接下载zip包的方式，不过也许你的主题活跃度比较高，经常更新，为了方便更新也可以自己取舍；

8. 在新的电脑上pull源文件之后，不再需要执行 “hexo init”

关于主题的选取

• 目前最为火爆的NEXT的主题是一个很好的主题，也有很多衍生的版本，笔者个人最开始对主题的想法是能有一个大尺寸的图片作为banner,在侧边栏最为明显的地方有完整的分类和标签统计，支持头像和友链等，在各个网站上逛了一圈，要么觉得太简洁，要么就是太花哨，转了一圈之后，我发现这个仁兄ANOSORA也是这么想的，而且他自己写了一套CUBE主题出来，虽然看起来在今年一月份左右作者就不再有什么更新的动静了，但是这套主题的设计理念我很喜欢，所以还是选用了这套主题，问题还是有的，如果有时间我也许会帮忙完善这套主题(说的好像我会一样)。

• 另外，还有一个Gal主题也很有意思,要不是觉得个人博客后面动态图片有些阅读影响体验，我都想整一个了（萌豚发言

使用该主题时遇到的问题：

1. 关于禁用音乐侧边栏插件

• 音乐插件这种东西我个人是不反对用在博客上的，但是大部分人去查技术类问题，点进别人的主页看文章，听到音乐的第一件事基本都是把它关掉，所以我个人还是不准备用的。这就带来两个问题，第一个就是如何禁用。

• 按照作者的说明，不用音乐就把music项留空就行，但是这么做在本地调试时就会抛出错误，主要原因看抛出的错误，应该是音乐曲目数量被写死了，删三行中的任何一个都会报错，保留项目名只删除参数，音乐播放插件依然会存在，但是曲目会变成null。

• 之后发现只要在主题的_config.yml里注释music即可关闭插件显示。

widgets:
# - search
- author
# - music
- recent_posts
- categories
- tagcloud
- links
- friend_links

2. 关于生成tags和categories页面的问题

• “标签”，“分类”以及“关于我”页面时默认没有的，需要使用 “hexo new page xxx”命令才能生成对应的目录和index文件。

• 步骤参考：Hexo使用攻略-添加分类及标签

• 需要注意的是，我在这么做之后，分类和标签的统计功能并没有正常运行，似乎是要在设置时添加layout: tags才能正常计数；

• 测试时似乎是生成出错，在我的tags目录下没有index文件，重新clean 之后再生成并部署恢复正常，如果遇到404错误可以检查一下目录下的index文件是否正常；

3. 关于关闭右边栏“开启歌词”按键的问题

• 音乐插件关闭了，但是右边栏的“开启歌词”空间依然还存在，作者并没有提到如何关闭这个控件，经过对代码的整理，在主题文件下的/layout/_partial/menu.ejs中注释下面的代码即可：

<!-- 
<% if (theme.music.length > 0) { %>
<li>
    <a class="lrc-control"><%= __('open_music_lrc') %></a>
</li>
<% } %>
--> 

4. 关于调整Hexo语系的问题

• Hexo似乎不填language选项会默认使用英语，按官方文档来看，需要设置成zh-Hans才能变成中文，主题文件里提供了zh-CN.yml文件，这里需要重命名成zh-Hans.yml才能正常完成设置。

5. 关于设置网站icon小图标的问题

• 这个主题里默认并没有设置网站的favicon，但是作者给的demo站点又明显有favicon，笔者仔细找了下没看到相关代码，估摸着是作者在github发布的版本里忘记写了，就用三脚猫的功夫看了下代码结构。

• 在/layout/_partial/head.ejs里的这里：

 <!-- inject:style -->
    <link href="<%- url_for('css/style.css') %>" rel="stylesheet" type="text/css">
    <!-- endinject -->

• 加上一行

 <!-- inject:style -->
    <link href="<%- url_for('css/style.css') %>" rel="stylesheet" type="text/css">
    <link href="<%- config.root %>images/favicon.ico" rel="icon" type="image/x-ico">
    <!-- endinject -->

• 然后将icon文件favicon.ico放在主题文件的source/images/中去，即可正常显示。

6. 关于代码高亮没有生效的问题

• 需要关闭站点配置文件中的highlight功能：

    highlight:
    enable: false
    line_number: true
    auto_detect: true
    tab_replace:

7.修改代码块中的默认字体

• 找到了两种途径：

• 1. 直接在style.css中添加一句code { font-family: "font_name"},这种方法不需要再去获取作者的生成器项目自己生成，但是不能改变markdown的样式（默认vs2015）；
• 2. 如果需要修改主题风格和代码字体，获取作者的CUBE主题生成器项目的源码，在\source\sass\_markdown.scss中找到下面代码：

    pre {
    code {
        padding: 20px;
        font-size: 1.2em;
        line-height: 1.1;
        border-radius: 5px;
}

• 添加一行变成：

    pre {
    code {
        padding: 20px;
        font-size: 1.2em;
        line-height: 1.1;
        border-radius: 5px;
        font-family: "font_name";
}

• 之后按说明生成主题文件，主要取出style.css和script.js文件进行替换，其他可以不用修改，然后重新使用hexo命令生成.

• （持续更新中）