使用Hexo和github pages搭建博客

Posted by baicai on May 3, 2016

原文

<h2 id=”1-简介" style=”margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, ‘PingFang SC’, ‘Microsoft YaHei’, sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;”>1. 简介</h2><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">hexo是一个基于node.js的静态博客程序,可以方便的生成静态网页(纯html)支持多个平台(Windows/MAC/Linux),风格优雅,更适合写技术博客,与hexo类似的博客程序还有jekyll,jekyll被github着力推荐官方就提供了jekyll教程,但是jekyll是基于ruby写的,并且关于代码高亮没找到比较好的方案,就选择了用hexo</p><h2 id="2-配置环境" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;">2. 配置环境</h2><h3 id="2-1-安装git" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 18px; color: rgb(85, 85, 85); text-align: justify;">2.1 安装git</h3><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">作者用的是mac,可以使用<a href=”http://brew.sh/” target=”_blank” rel=”external” style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”>brew</a>下面命令安装</p>

<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">$ brew install git
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">也可以直接上git官网下载安装</p><h3 id="2-2-安装node-js" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 18px; color: rgb(85, 85, 85); text-align: justify;">2.2 安装node.js</h3><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">同样的,mac可以使用brew安装,新版的node.js已经包含npm工具,不需要再另外安装了</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">$ brew install node
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">可以通过下面命令检查是否已安装</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">$ node -v
$ npm -v
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">如果是windows用户可以通过官网下载 jode.js</p><h3 id="2-3-Hexo安装" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 18px; color: rgb(85, 85, 85); text-align: justify;">2.3 Hexo安装</h3><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">上面的安装完成后,接下来安装hexo</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">npm install hexo-cli -g #-g表示全局安装, npm默认为当前项目安装</span>
hexo init blog #在当前目录下新建blog目录初始化博客</span>
cd blog #进入blog目录
#npm install
hexo generate #根据当前配置生成静态页面</span>
hexo server #启动本地服务,默认为:http://localhost:4000/
</pre></td></tr></tbody></table></figure><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">接下来就可以通过http://localhost:4000/查看效果了<br>hello hexo</p><h2 id="3-配置github-pages" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;">3. 配置github pages</h2><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">每个github账户都可以有一个外部空间/Responsitory,可以直接通过用户名.github.io访问到该仓库的内容</p><ul style="color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;"><li style="list-style: circle;">在github上新增一个responsitory,仓库名为&nbsp;用户名.github.io 或&nbsp;用户名.github.com</li><li style="list-style: circle;">创建完成后,github会自动将 用户名.github.io指向该仓库,默认访问根目录下的<code style=”font-family: consolas, Menlo, ‘PingFang SC’, ‘Microsoft YaHei’, monospace; font-size: 13px; word-break: break-all; color: rgb(85, 85, 85); background: rgb(238, 238, 238);”>index.html</code>页面</li><li style="list-style: circle;">可以进入Responsitory的Setting页查看</li></ul><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">github会提供几个模板搭建站点,我们可以不用他提供的模板,可以在仓库里面,添加一个简单的index.html文件,如果能通过用户名.github.com访问,则表明创建成功了</p><h2 id=”4-写博客" style=”margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, ‘PingFang SC’, ‘Microsoft YaHei’, sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;”><a href=”http://bomobox.org/2016-04-18/hexo-for-blog/#4-写博客" class=”headerlink” title=”4. 写博客" style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”></a>4. 写博客</h2><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">hexo的文章存放在source目录下</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">├── source
| ├── _posts #存放文章
| └── _drafts #存放草稿
</pre></td></tr></tbody></table>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">$ hexo new post “postName” # 在source/_posts 目录下创建postName.md文件
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">创建文件的命名格式可以在_config.yml文件配置
</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);"># Writing
new_post_name: :year-:month-:day-:title.md
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;"></p><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">文件创建完成后会自动生成以下格式(可以自己添加)
</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">
title: 使用Hexo和github pages搭建博客
date: 2016-04-18 19:50:26
categories: blog # 分类
tags: [blogs, hexo] # 标签,格式:[标签, 标签2]

</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;"></p><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">关与写作的各种参数可以参见:https://hexo.io/docs/writing.html</p><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">写完后预览的时候发现,文章在首页就全部显示出来了,如果不想全部显示,可以在文章中间添加下面标记,在首页列表就会出现Read More的标记</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);"><!–more–>
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">Hexo支持使用Markdown语法写文章,我比较习惯用Atom写Markdown,Atom有个hexo插件</p><h2 id="5-主题" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;">5. 主题</h2><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">官方自带主题基本够用,有能力可以自己改造,当然,网上已经有很多人做了一些很好看的主题了,我们可以直接拿来用,下面是官方列出的一些主题,找到喜欢的可以直接用</p><blockquote style="margin-bottom: 0px; padding: 0px 15px; color: rgb(102, 102, 102); border-left-width: 4px; border-left-color: rgb(221, 221, 221); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14px; line-height: 28px; text-align: justify;"><p style="margin-bottom: 25px;">https://github.com/hexojs/hexo/wiki/Themes
https://hexo.io/themes</p></blockquote><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">在hexo上,主题放在themes目录下,我们只需要把别人做好的主题clone下来就好了,然后在<code style=”font-family: consolas, Menlo, ‘PingFang SC’, ‘Microsoft YaHei’, monospace; font-size: 13px; word-break: break-all; color: rgb(85, 85, 85); background: rgb(238, 238, 238);”>_config.yml</code>修改一下配置<br>例如:我们可以<a href=”https://github.com/xiangming/landscape-plus” target=”_blank” rel=”external” style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”>https://github.com/xiangming/landscape-plus</a>这个主题clone下来</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">git clone git@github.com:xiangming/landscape-plus.git themes/landscape-plus
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">修改设置_config.yml</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">theme: landscape-plus
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;"></p><h2 id="6-添加多说评论插件" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;">6. 添加多说评论插件</h2><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">到<a href=”http://duoshuo.com/” target=”_blank” rel=”external” style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”>多说官网</a>注册和创建一个站点</p><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">修改配置
到<code style=”font-family: consolas, Menlo, ‘PingFang SC’, ‘Microsoft YaHei’, monospace; font-size: 13px; word-break: break-all; color: rgb(85, 85, 85); background: rgb(238, 238, 238);”>themes/landscape-plus/_config.yml</code>添加多说的配置,shortname即注册的站点名称</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);"># Duoshuo
duoshuo_shortname: bomo
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">参见官方说明,替换评论相关的代码http://dev.duoshuo.com/threads/541d3b2b40b5abcd2e4df0e9</p><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">完成,如下图评论有了
评论</p><h2 id=”7-部署到github上" style=”margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, ‘PingFang SC’, ‘Microsoft YaHei’, sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;”><a href=”http://bomobox.org/2016-04-18/hexo-for-blog/#7-部署到github上" class=”headerlink” title=”7. 部署到github上" style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”></a>7. 部署到github上</h2><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">修改配置_config.yml</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">deploy:
type: git
repository: https://github.com/zhengbomo/zhengbomo.github.io.git
branch: master
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">安装 hexo-deployer-git</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">$ npm install hexo-deployer-git –save
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">部署hexo到git上</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">$ hexo deploy
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">部署过程需要输入账号密码,然后会push到github上,参考:https://hexo.io/docs/deployment.html</p><blockquote style="margin-bottom: 0px; padding: 0px 15px; color: rgb(102, 102, 102); border-left-width: 4px; border-left-color: rgb(221, 221, 221); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14px; line-height: 28px; text-align: justify;"><p style="margin-bottom: 25px;">hexo部署时会把最终生成的博客文件(public目录下的文件)push到git远程仓库,而博客程序还是在本地,当我们切换电脑的时候,无法对博客进行重新编辑和发布,这个时候我们可以在git添加一个分支<code style=”font-family: consolas, Menlo, ‘PingFang SC’, ‘Microsoft YaHei’, monospace; font-size: 13px; word-break: break-all; color: rgb(85, 85, 85); background: rgb(238, 238, 238);”>hexo</code>用来存放博客程序和编写的内容,详情可以参见: git创建分支hexo存放博客程序</p></blockquote><h2 id="8-域名绑定" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;">8. 域名绑定</h2><blockquote style="margin-bottom: 0px; padding: 0px 15px; color: rgb(102, 102, 102); border-left-width: 4px; border-left-color: rgb(221, 221, 221); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14px; line-height: 28px; text-align: justify;"><p style="margin-bottom: 25px;">通常域名在<a href=”https://www.godaddy.com/” target=”_blank” rel=”external” style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”>godaddy</a>注册比较靠谱,这个是最大的域名提供商,而且不需要备案,支持支付宝付款,购买的时候可以使用优惠码会便宜一些,网上有很多优惠码,可以自行搜索,购买过程很简单,这里就不贴了</p></blockquote><ol style="color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;"><li><p style="margin-bottom: 25px;">注册和配置DNS服务器<br>Godaddy自带的域名解析服务器比较慢,在国内推荐使用<a href=”https://www.dnspod.cn/” target=”_blank” rel=”external” style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”>DNSpod</a>:快,免费,稳定。</p><ul><li style="list-style: circle;"><p style="margin-bottom: 25px;">到DNSpod注册登陆,然后到用户中心,添加域名,例如我的域名为<code style=”font-family: consolas, Menlo, ‘PingFang SC’, ‘Microsoft YaHei’, monospace; font-size: 13px; word-break: break-all; color: rgb(85, 85, 85); background: rgb(238, 238, 238);”>bomobox.org</code>
</p></li><li style="list-style: circle;"><p style="margin-bottom: 25px;">进入设置

添加两个A记录指向github提供的ip,参见<a href=”https://help.github.com/articles/setting-up-an-apex-domain/” target=”_blank” rel=”external” style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”>这里</a></p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">192.30.252.153
192.30.252.154
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px;">添加一个CNAME记录指向自己的github域名:<code style=”font-family: consolas, Menlo, ‘PingFang SC’, ‘Microsoft YaHei’, monospace; font-size: 13px; word-break: break-all; color: rgb(85, 85, 85); background: rgb(238, 238, 238);”>username.github.io</code>
把其他的删除</p></li></ul></li><li><p style="margin-bottom: 25px;">注册域名和配置DNS</p><ul><li style="list-style: circle;"><p style="margin-bottom: 25px;">到<a href=”https://www.godaddy.com/” target=”_blank” rel=”external” style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”>Godaddy</a>购买域名完成后完成后进入MyAccount
</p></li><li style="list-style: circle;"><p style="margin-bottom: 25px;">进入DNS Manager修改DNS服务器</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">f1g1ns1.dnspod.net
f1g1ns2.dnspod.net
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px;"></p></li></ul></li><li><p style="margin-bottom: 25px;">到github仓库的根目录添加CNAME文件,文件内添加自己的域名,否则会出现404访问错误,也可以在hexo的<code style=”font-family: consolas, Menlo, ‘PingFang SC’, ‘Microsoft YaHei’, monospace; font-size: 13px; word-break: break-all; color: rgb(85, 85, 85); background: rgb(238, 238, 238);”>source</code>目录下添加,然后不熟到github
</p></li></ol><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">上面步骤设置完成后可能会有几个小时的延迟,才能生效,总的来说还是比较简单的</p><h2 id="9-问题" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;">9. 问题</h2><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">在使用别人的主题的时候可能会报错或者有些功能用不了,原因可能是部分插件没有安装,例如RSS用不了,那可能是hexo-generator-feed没安装,下面列举一些常用的插件,建议都安装,没有用到也没有关系,需要先到hexo程序目录下在执行命令,插件位于<code style=”font-family: consolas, Menlo, ‘PingFang SC’, ‘Microsoft YaHei’, monospace; font-size: 13px; word-break: break-all; color: rgb(85, 85, 85); background: rgb(238, 238, 238);”>node_modules</code>目录下</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">$ npm install hexo-generator-feed –save #支持RSS
$ npm install hexo-generator-sitemap –save #生成站点地图
$ npm install hexo-generator-baidu-sitemap –save #生成百度站点地图
$ npm install hexo-html-minifier –save #HTML 压缩
$ npm install hexo-uglify –save #JavaScript 压缩
$ npm install hexo-clean-css –save #CSS 压缩插件
$ npm install hexo-generator-seo-friendly-sitemap –save #SEO优化
$ npm install hexo-deployer-git –save #git部署插件
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">并在博客配置文件_config.yml配置plugin
</p>
<table style="margin: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed; word-wrap: break-word;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="code" style="text-align: left; vertical-align: middle; border: none;"><pre style="font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', monospace; margin-bottom: 0px; padding: 1px; color: rgb(204, 204, 204); line-height: 1.6; border: none; background: rgb(45, 45, 45);">Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
</pre></td></tr></tbody></table>
<p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;"></p><blockquote style="margin-bottom: 0px; padding: 0px 15px; color: rgb(102, 102, 102); border-left-width: 4px; border-left-color: rgb(221, 221, 221); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14px; line-height: 28px; text-align: justify;"><p style="margin-bottom: 25px;">更多插件可以在<a href=”https://hexo.io/plugins/” target=”_blank” rel=”external” style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”>https://hexo.io/plugins/</a>找到</p></blockquote><h2 id="10-Atom插件" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;">10. Atom插件</h2><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">由于我编写md使用的是Atom,这里推荐几个Atom上的插件</p><ul style="color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;"><li style="list-style: circle;">markdown-scroll-sync:Markdown预览实时滚动,自带的预览不支持实时滚动</li><li style="list-style: circle;">markdown-writer:Markdown协作工具</li><li style="list-style: circle;">Date:快速插入当前时间的工具</li><li style="list-style: circle;">atom-hexo:快速添加draft,post,publish,deploy</li></ul><h2 id="11-总结" style="margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;">11. 总结</h2><p style="margin-bottom: 25px; color: rgb(85, 85, 85); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 28px; text-align: justify;">使用hexo搭建博客环境还是非常方便的,基本上都是自动的,当然还有一些详细的配置,例如分页,分类,评论等,Hexo支持的插件也相当多的,接下来可以好好写博客了,以后再慢慢完善了,今天先到这里</p><h2 id=”12-参考链接" style=”margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding: 10px 0px 0px; font-weight: bold; line-height: 1.5; font-family: Lato, ‘PingFang SC’, ‘Microsoft YaHei’, sans-serif; font-size: 20px; color: rgb(85, 85, 85); text-align: justify;”><a href=”http://bomobox.org/2016-04-18/hexo-for-blog/#12-参考链接" class=”headerlink” title=”12. 参考链接" style=”color: rgb(85, 85, 85); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(153, 153, 153);”></a>12. 参考链接</h2><p></p><blockquote style="margin-bottom: 0px; padding: 0px 15px; color: rgb(102, 102, 102); border-left-width: 4px; border-left-color: rgb(221, 221, 221); font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 14px; line-height: 28px; text-align: justify;"><p style="margin-bottom: 25px;">https://hexo.io</p></blockquote>