[Hexo]Hexo+github搭建静态博客

1.简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章（经常玩CSDN上的人都知道），在几秒内，即可利用靓丽的主题生成静态网页。通过Hexo我们可以快速创建自己的博客，仅需要几条命令就可以完成。发布时，Hexo可以部署在自己的Node服务器上面，也可以部署github上面。对于个人用户来说，部署在github上好处颇多，不仅可以省去服务器的成本，还可以减少各种系统运维的麻烦事(系统管理、备份、网络)。所以，在这里我是基于github搭建的个人博客站点。

2. 环境配置

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

• Node.js

• Git

2.1 Git

Git安装参考博文：http://blog.csdn.net/sunnyyoona/article/details/51453880

2.2 Node.js

安装 Node.js 的最佳方式是使用 nvm。

1. wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

1. nvm install 4

2.3 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

一般情况下我们机器上没有安装npm，首先要安装npm：

1. sudo apt-get install npm

下面使用npm安装Hexo：

在使用npm安装hexo时，我们有可能会遇到上面的问题，我们运行下面的命令，才能安装成功：

再重新安装hexo:

3. 建站

3.1 目录和文件

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1. hexo init <folder>
2. cd <folder>
3. npm install

新建完成后，指定文件夹的目录如下：

scaffolds 脚手架，也就是一个工具模板

scripts 写文件的js，扩展hexo的功能

source 存放博客正文内容

source/_posts 文件箱

themes 存放皮肤的目录  themes/landscape 默认的皮肤

_config.yml 全局的配置文件

db.json 静态常量

备注：

（1）我们每次用到的就是_posts目录里的文件，而_config.yml文件和themes目录是第一次配置好就行了。

（2）_posts目录：Hexo是一个静态博客框架，因此没有数据库。文章内容都是以文本文件方式进行存储的，直接存储在_posts的目录。Hexo天生集成了markdown，我们可以直接使用markdown语法格式写博客，例如:hello-world.md。新增加一篇文章，就在_posts目录，新建一个xxx.md的文件。

3.2 全局配置

_config.yml配置信息：（网站的配置信息，可以在此配置大部分的参数）

• 站点信息: 定义标题，作者，语言

• URL: URL访问路径

• 文件目录: 正文的存储目录

• 写博客配置：文章标题，文章类型，外部链接等

• 目录和标签：默认分类，分类图，标签图

• 归档设置：归档的类型

• 服务器设置：IP，访问端口，日志输出

• 时间和日期格式： 时间显示格式，日期显示格式

• 分页设置：每页显示数量

• 评论：外挂的Disqus评论系统

• 插件和皮肤：换皮肤，安装插件

• Markdown语言：markdown的标准

• CSS的stylus格式：是否允许压缩

• 部署配置：github发布项目地址

1. # Hexo Configuration
2. ## Docs: https://hexo.io/docs/configuration.html
3. ## Source: https://github.com/hexojs/hexo/
5. # 站点信息
7. title: Yoona
8. subtitle:
9. description: Stay Hungry Stay Foolish
10. author: sjf0115
11. language:
12. timezone:
15. # URL
16. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
17. url: http://sjf0115.club/
18. root: /
19. permalink: :year/:month/:day/:title/
20. permalink_defaults:
23. # Directory 文件目录
24. source_dir: source
25. public_dir: public
26. tag_dir: tags
27. archive_dir: archives
28. category_dir: categories
29. code_dir: downloads/code
30. i18n_dir: :lang
31. skip_render:
34. # Writing 写博客配置
35. new_post_name: :title.md # File name of new posts
36. default_layout: post
37. titlecase: false # Transform title into titlecase
38. external_link: true # Open external links in new tab
39. filename_case: 0
40. render_drafts: false
41. post_asset_folder: false
42. relative_link: false
43. future: true
44. highlight:
45.  enable: true
46.  line_number: true
47.  auto_detect: false
48.  tab_replace:
51. # Category & Tag  目录和标签
52. default_category: uncategorized
53. category_map:
54. tag_map:
57. # Date / Time format 时间和日期格式
58. ## Hexo uses Moment.js to parse and display date
59. ## You can customize the date format as defined in
60. ## http://momentjs.com/docs/#/displaying/format/
61. date_format: YYYY-MM-DD
62. time_format: HH:mm:ss
65. # Pagination 分页设置
66. ## Set per_page to 0 to disable pagination
67.   per_page: 10
68.   pagination_dir: page
71. # Extensions 插件与皮肤
72. ## Plugins: https://hexo.io/plugins/
73. ## Themes: https://hexo.io/themes/   theme: landscape
75. # Deployment 部署配置
76. ## Docs: https://hexo.io/docs/deployment.html
77. deploy:
78.  type: git
79.  repo: git@github.com:sjf0115/hexo-blog.git

3.3 创建新文章

接下来，我们开始新博客了，创建第一博客文章。Hexo建议通过命令行操作，当然你也可以直接在_posts目录下创建文件。

下面我们创建一篇名为hexo的文章：

在_post目录下，就会生成文件：”hexo.md“

然后，我们编辑文件：”hexo.md”，以markdown语法写文章，然后保存。

1. ---
2. title: hexo
3. date: 2016-05-17 17:39:17
4. updated: 2016-05-17 17:54:04
5. tags:
6. - hexo
7. categories: diary
8. ---
11. this is a hero test
12. welcome to **yoona** world!!
14. ```{bash}
15. xiaosi@Qunar:~/blog$ hexo new hexo
16. Native thread-sleep not available.
17. This will result in much slower performance, but it will still work.
18. You should re-install spawn-sync or upgrade to the lastest version of node if possible.
19. Check /usr/local/lib/node_modules/hexo-cli/node_modules/hexo-util/node_modules/
20. cross-spawn/node_modules/spawn-sync/error.log for more details
21. INFO  Created: ~/blog/source/_posts/hexo.md
23. ```
25. [Yoona博客](http://blog.csdn.net/sunnyyoona)
28. 2016.05.17

在命令行，启动服务器:

通过浏览器打开， http://localhost:4000/ ，就出现了我们新写的文章。

4. 发布项目到github

4.1 静态化处理

写完文章之后，可以发布到github上面。hexo是一个静态博客框架。静态博客，是只包含html, javascript, css文件的网站，没有动态的脚本。虽然我们是用Node进行的开发，但博客的发布后就与Node无关了。在发布之前，我们要通过一条命令，把所有的文章都做静态化处理，就是生成对应的html, javascript, css，使得所有的文章都是由静态文件组成的。

在本地目录下，会生成一个public的目录，里面包括了所有静态化的文件。

4.2 发布到github

接下来，我们把这个博客发布到github。

在github中创建一个项目hexo-blog，项目地址：https://github.com/sjf0115/hexo-blog

编辑全局配置文件：_config.yml，找到deploy的部分，设置github的项目地址。

1. # Deployment
2. ## Docs: https://hexo.io/docs/deployment.html
3. deploy:
4.  type: git
5.  repo: git@github.com:sjf0115/hexo-blog.git

然后，通过命令进行部署:

出现上述问题，可以使用配置ssh秘钥解决。

如果出现deployer找不到git: ERROR Deployer not found: git错误，使用下面方式解决：

再来一次hexo deploy：

到目前为止这个静态的web网站就被部署到了github，检查一下分支是gh-pages。gh-pages是github为了web项目特别设置的分支。

然后，点击”Settings”，找到GitHub Pages，提示“Your site is published at http://sjf0115.github.io/hexo-blog”。

打开网页，就是我们刚刚发布站点：

可以看到网页样式出现问题，不用担心，我们设置域名之后就OK了。

4.3 设置域名

在dnspod控制台，设置主机记录@，类型A，到IP 23.235.37.133（github地址）。

对域名判断是否生效，对域名执行ping：



在github项目中，新建一个文件CNAME，文件中写出你要绑定的域名sjf0115.club。通过浏览器，访问http://sjf0115.club，就打开了我们建好的博客站点。