使用 Hexo + github 搭建我的博客

来自：http://www.cnblogs.com/fengzheng/p/8031518.html

Hexo 是什么

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其余渲染引擎）解析文章，在几秒内，便可利用靓丽的主题生成静态网页。

安装部署步骤

本地部署 Hexo

一、安装 nodejs ，不作介绍；

二、安装 git ，不作介绍；

三、安装 hexo-cli ，命令以下：

npm install hexo-cli -g

四、新建一个本地目录，例如/Users/fengzheng/fengzheng-blog，进入此目录cd /Users/fengzheng/fengzheng-blog

五、执行 Hexo 初始化命令：

//其中 blog 是本身定义的博客根目录名称，能够自定义 例如 hexo init my-blog hexo init blog

六、进入目录 blog ，cd blog；

七、安装依赖模块，执行命令 npm install；

八、清理 hexo ,相似于清理编译结果，例如 mvn clean, 执行命令 hexo clean；

九、生成静态页面, 执行命令hexo g；

十、启动服务，执行命令hexo s ,默认在 4000 端口启动，访问本地4000端口便可查看本地网站；

更换主题 NexT

NexT 主题是 Hexo 最流行的主题了，界面简洁，作技术博客再适合不过了。

一、下载 NexT，此时仍是在 blog 目录下，执行以下命令：

$ mkdir themes/next $ curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

二、修改网站 _config.yaml 配置文件，设置 theme: next ，next 即为主题名称。顺便修改一下网站的基本属性（标题、描述、做者、语言等），例如：

title: 古时的风筝 subtitle: description: 一个不仅是关注技术的技术人的技术博客。 author: 风筝 language: zh-Hans

请注意，每一个 key 的冒号后面须要一个空格（必须的），不然会报错。

三、以后执行命令，从新生成并启动网站：

hexo clean hexo g hexo s

四、NexT 主题自带 4 中不一样的风格，稍有不一样，能够依次看一下效果，选一个你喜欢的，分别是：

#scheme: Muse #scheme: Mist scheme: Pisces #scheme: Gemini

部署到 github

一、首先要有 github 帐号，而后建立一个名称为 {用户名}.github.io 的仓库，其中用户名是你的 github 帐号名称，例如个人就是 huzhicheng.github.io。这是一个固定的格式，必需要这么建立，才能配合 Github Pages 使用，而且每一个帐号只能有一个这种仓库。

二、设置部署类型和 github 仓库位置和主分支，到网站配置文件 _config.yml 中修改以下：

表示部署类型为 git；

仓库为 git@github.com:huzhicheng/github.io.git ，替换成你的仓库便可；

分支为 master 主分支；

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

三、安装 git 扩展模块 hexo-deployer-git，到 blog 目录中执行命令：

npm install hexo-deployer-git --save

四、执行命令hexo d ，部署到上面建立的 github 仓库中。

这一步就是向 github 仓库的master 分支提交文件，因此本地要有权限向你的 github 仓库提交。须要 sshkey,至于怎么添加 sshkey，若是不清楚，查一下就知道了。

最后执行成功显示以下：

To github.com:huzhicheng/github.io.git * [new branch] HEAD -> master Branch master set up to track remote branch master from git@github.com:huzhicheng/github.io.git. INFO Deploy done: git

五、到这一步，经过地址 https://huzhicheng.githubio 就能够访问了。

分类、标签页和新文章

添加分类页

一、新建一个分类页面，命名为 categories。命令以下：

hexo new page categories

二、编辑刚新建的页面，将页面的类型设置为 categories ，主题将自动为这个页面显示全部分类。

--- title: 分类 date: 2017-12-10 12:39:04 type: "categories" ---

三、在菜单中添加连接。编辑主题的 _config.yml ,即 themes/next 下的配置文件，区别于网站根目录下的配置文件，将 menu 中的 categories: /categories || th 注释去掉，以下:

menu:  home: / || home #about: /about/ || user  tags: /tags/ || tags  categories: /categories/ || th  archives: /archives/ || archive

添加标签页

一、建立一个名为 tags 页面。命令以下：

hexo new page tags

二、编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示全部标签。

--- title: 标签 date: 2017-12-09 22:06:51 type: "tags" ---

三、在菜单中添加连接。编辑主题的 _config.yml ,即 themes/next 下的配置文件，区别于网站根目录下的配置文件，将 menu 中的 tags: /tags || tags 注释去掉，以下:

menu:  home: / || home #about: /about/ || user  tags: /tags/ || tags  categories: /categories/ || th  archives: /archives/ || archive

添加新文章

一、Hexo 中有 Front-matter 这个概念，是文件最上方以 --- 分隔的区域，用于指定文件的属性。例如， 在 hexo new post "Spring AOP 和 动态代理技术" 时会生成 Spring-AOP-和-动态代理技术.md 文件，文件生成好的文章属性。

--- title: Spring AOP 和 动态代理技术 date: 2017-12-10 17:57:14 tags: ---

二、在其中添加categories属性，再部署以后就能够在分类页看到分类了

--- title: Spring AOP 和 动态代理技术 date: 2016-03-16 08:12:43 tags: categories: Java --- 

三、再为其添加 tag，就能够把它和标签关联起来

--- title: Spring AOP 和 动态代理技术 date: 2016-03-16 08:12:43 tags:  - Spring  - Java  - AOP  - 动态代理 categories: Java --- 

增长 about 页面

一、建立一个名为 about 页面。命令以下：

hexo new page "about"

二、修改生成的 md 文件，修改 title，例如关于我

三、修改 themes/next/_config.yaml 文件中的 menu 下的菜单配置，以下：

menu:  home: / || home #about: /about/ || user  tags: /tags/ || tags  categories: /categories/ || th  archives: /archives/ || archive

社交媒体、头像和文章底部二维码

打开 themes/next/_config.yaml 文件，修改内容以下：

social 是社交媒体连接，能够配置更多的例如 微博、Twitter 等等；

avatar 是头像图片地址；

wechat_subscriber 是设置每一个文章底部的二维码连接，这里就能够配置上本身的微信公众号二维码了，省去每发一篇文章都要在文章内容里本身添加二维码的麻烦，须要 NexT 5.1 版本以上才支持。

social:  GitHub: https://github.com/huzhicheng || github 知乎: https://www.zhihu.com/people/moonkite/activities avatar: http://wx2.sinaimg.cn/small/0070QarDly8fm5qpcu0ljj30hs0hsgmc.jpg wechat_subscriber:  enabled: true  qcode: /uploads/wechat-qcode.jpg  description: 欢迎您扫一扫上面的微信公众号，订阅个人博客！

配置评论功能

配置 disqus 评论

一、登陆 https://disqus.com/ ，注册帐号；

二、点击 GET STARTED ,如图：

三、点击 “I want to install Disqus on my site”

四、而后按提示填写信息，其中最重要的是Website Name，对应着要在配置文件中 disqus 的 shortname

一、配置 themes/next/_config.yaml 中的 disqus 配置以下：

disqus:  enable: false  shortname: your_shortname  count: true

二、以后重启服务便可。

注意：disqus 虽然好用，可是在国内被墙的厉害，若是指望有不FQ的用户能够评论，建议仍是放弃他。

配置 hypercomments 评论

hypercomments 也是 NexT 默认支持的评论系统，并且比起 disqus 来，能够不FQ。

一、到 https://www.hypercomments.com/ 注册帐号，仅支持 Google 帐号注册。

二、按提示一步步往下走。

三、完成以后，在设置页面，找到 Widget ->code 中的 widget_id 值。

四、以后在 themes/next/_config.yaml 中配置，以下：

hypercomments_id: widget_id

配置图床

文章里常常须要配图，图片存储在什么地方呢，我这里使用的是七牛云存储，注册并认证一个我的帐号能够有免费10G的容量，足够我的博客使用了。并且做为专业的图片存储服务商，访问速度和服务质量有保障，能够配置本身的域名解析到七牛 bucket 。具体的操做能够到七牛官网上查看相应的文档。

另外，若是不用七牛的话，微博相册功能也能够做为图床使用。可是因为一些缘由，若是帐号被封，则相册也就没法访问了，并且也不排除微博有可能封了相册外链的功能，到时候就麻烦了。

配置独立域名

前面经过 https://huzhicheng.github.io 能够访问博客网站。配上一个本身个性化的域名是否是更有个性呢。

这里以阿里云万网域名为例，个人域名是在阿里云购买的。

一、登陆阿里云帐号，在域名管理中找到须要绑定的域名；

注意绑定了两个记录类型为 A、主机记录为 www 的记录到 192.30.252.154 和 192.30.252.153 ，这两个 IP 是 GitHub Pages 的 IP，表示把域名解析到 GitHub Pages。

另外添加一个记录类型为 CNAME ,主机记录为 @ 的记录到本身的 {username}.github.io. ,注意 io 后面还有一个点。这条记录的意思是将域名转向到 {username}.github.io 。

二、进入到网站的 source 目录中，添加一个名称为 CNAME 的文件（没有后缀名，必须大写），在里面添加记录你的个性化域名，例如个人是：

fengzheng.pub

只须要这一行就好，不用 www 。

三、稍等域名解析生效，最后的效果就是访问 fengzheng.pub 或 www.fengzheng.pub 都会解析到 github.io 那个网站上。

固然别忘了使用 hexo g，hexo d 部署网站了。

统计分析

网站跑起来了，天天与多少人看，用户画像是什么样的，就须要用相应的统计分析工具了，这里用到百度统计功能，也是 NexT 主题默认支持的。

一、首先须要注册百度统计帐号；

二、进入帐号，添加一个网站，设置好对应的网站域名；

三、获取统计代码，例以下面这样的,找到 hm.js? 后面的一串 id;

<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?bssfdfff9050f68a2d014c30fea8878"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>

四、打开 themes/next/_config.yaml 配置文件，找到 baidu_analytics，配置上这串 id 便可，例如：

baidu_analytics: bssfdfff9050f68a2d014c30fea8878

配置阅读量

默认的状况下，每篇文章的阅读量是没有显示的，须要作一下配置。这里用的是最简单的 busuanzi_count ，配置以下：

busuanzi_count: # count values only if the other configs are false  enable: true # custom uv span for the whole site  site_uv: false  site_uv_header: <i class="fa fa-user"></i> 访问人数  site_uv_footer: # custom pv span for the whole site  site_pv: false  site_pv_header: <i class="fa fa-eye"></i> 总访问量  site_pv_footer: # custom pv span for one page only  page_pv: true  page_pv_header: <i class="fa fa-file-o"></i> 浏览  page_pv_footer: 次

固然还能够用功能更丰富的 LeanCloud ，调研过 APP 消息推送功能的可能了解过，具体的集成能够搜索一下。

除了以上说到的这些，还有其余的一些能够定制的东西，例如动画效果、搜索服务、404页面、代码高亮样式等等，丰富多样的服务，均可以很是方便的集成上去。