Contents

1. 1. 前提
2. 2. 安装
3. 3. 发布
4. 4. 其他

GitHub Pages本身可以托管静态页面，也绑定自定义域名，同时支持SSL证书；这里使用Hexo生成静态页面，然后托管在GitHub上。以下是折腾过程，做个备用。

前提

1. 本地安装Git；
2. 本地安装Node.js；

安装

1. 命令行执行npm安装Hexo，步骤可以参考：Hexo官方教程；
   加verbose参数是为了查看详细信息，以免中途挂掉：

   npm install hexo-cli -g -verbose
   

2. 在本地创建博客的根目录，会创建一个blog文件夹，这个文件夹就是Hexo的工作目录：

   hexo init blog
   

3. cd blog
   ls
   _config.yml  db.json        package.json       public/     source/
   CNAME        node_modules/  package-lock.json  scaffolds/  themes/
   

4. 安装Hexo缺失的依赖包:

   cd blog
   npm install -verbose
   

5. 生成html静态页面，本地查看效果：

   hexo generate
   hexo server
   

   或者使用简写命令：hexo g & hexo s

发布

1. 这里发布到GitHub Pages，还需要安装hexo-deployer-git包：

   npm install hexo-deployer-git --save
   

2. 打开_config.yml，修改deploy节点：

   deploy:
   type: git
   repo: https://github.com/imwower/imwower.github.io.git
   

3. 发布到GitHub：

   ##  这里其实就是把`public`文件夹里的所有静态页面提交到GitHub上了而已
   hexo deploy
   

4. 创建另一个Git repo，把当前文件夹(blog)内容提交，这样以后直接修改blog这个repo，就不需要再对Hexo进行配置，包括主题、包依赖等，同时可以随时修改博客内容了：

   工作目录(blog）: [https://github.com/imwower/imwower-blog.git](https://github.com/imwower/imwower-blog.git)
   博客内容: [https://github.com/imwower/imwower.github.io.git](https://github.com/imwower/imwower.github.io.git)
   

其他

1. 修改blog目录下的_config.yml，使用iceman主题：

   theme: iceman
   

2. 关闭自带的语法高亮插件，使用highlightjs：

   ##  将默认的`highlight`修改为`false`
   highlight:
    enable: false
    line_number: true
    auto_detect: false
     tab_replace: ''
    wrap: true
    hljs: false
   

3. 添加新的配置项：

   highlightjs: true
   

4. 进入主题所在的文件夹，找到/blog/themes/iceman/layout/_partial/footer.ejs模板，添加highlight.js的引用：

    <div id="footer">
    ...省略中间代码...
    </div>
   
    <% if (config.highlightjs) { %>
    <!-- Highlight.js -->
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-dark-reasonable.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js">
    </script>
    <script>
        hljs.initHighlightingOnLoad();
    </script>
    <% } %>
   

   参考：Hexo博客添加highlight-js代码高亮

5. 博客插入图片：
   这里是直接在/blog/source/images/文件夹下存放图片文件，在文章里插入图片时，使用相对路径：

   markdown代码：`![image](/images/2.png)`
   

   示例：