【hexo】安装与部署

发表于 2015-01-01 更新于 2022-07-21 分类于 help_hexo 阅读次数：本文字数： 3.1k 阅读时长 ≈ 3 分钟

前言

hexo是一个轻量级的博客生成系统，用于根据博客文档生成静态界面。这里使用next作为其主题，搭建了一个易用的博客系统。具体的搭建流程如下。

安装git
安装node.js
安装hexo
连接github和hexo
部署

安装git

git的安装与配置可参考文档【工具】git安装与配置。

安装 node.js

去node.js官网下载对应版本安装包或二进制文件。这里以.msi安装包为例，打开node-v10.2.0-x64.msi进行安装即可。注意把安装过程中要添加环境变量。

最后使得命令行检查是否安装完成，出现版本号则说明安装成功。

1	$ node -v # 或 node --version

换源

安装完成后，我们需要给node.js换成国内的淘宝源，否则可能会安装缓慢或者有些包安装不下来。使用如下命令换源。

1	$ npm config set registry "https://registry.npm.taobao.org"

换源完成后，使用如下命令查看当前的源地址，用于检测是否换源成功。

1	$ npm config get registry

安装 hexo

使用npm安装hexo。注意同时安装hexo-deployer-git插件，以使其可以部署到github上去。命令如下。

1
2
3

$ npm install -g hexo
$ npm install
$ npm install hexo-deployer-git --save	# 部署到 github 上的插件

使用如下命令测试有没有安装成功，出现版本号说明安装成功。

1	$ hexo -v # 或 hexo --version

初始化 hexo

在一个新的文件夹下执行如下命令，便可初始化一个hexo项目。以后我们称这个文件夹为整个项目的工程目录，而该目录下的themes文件夹下的某个主题文件夹则称为主题目录，需要十分注意这两个目录的区别。

1	$ hexo init

hexo常用命令

$ hexo g				# 或 hexo generate -- 生成静态页面
$ hexo s				# 或 hexo server -- 打开 hexo 服务
$ hexo d				# 或 hexo deploy -- 发布到 github -- 后面会用

$ hexo n "title_name"			# 或 hexo new "title_name" -- 新文章
$ hexo new page "page_name"		# -- 新页面
$ hexo p				# 或 hexo publish -- 发布
$ hexo clean				# -- 清理页面缓存

至此，本地的hexo已经安装完毕，执行如下命令便会在工程文件下会生成 public 文件夹，就是最终的静态页面文件。

1 2	$ hexo g $ hexo s

然后打开http://localhost:4000即可显示博客的主页。

以后将写好的.md文件放在工程目录\source\_posts目录下，重新generate一下即可发布博客到静态页面。

连接到github

新建github库

在 github 上新建一个仓库，仓库名为github_name.github.io，其中github_name为你的github账号用户名。

连接到库

找到工程目录下的_config.yml配置文件。找到deploy:项，应该在文件的最后面，修改如下。

deploy:
  type: git 
  repository: git@github.com:github_name/github_name.github.io.git
  branch: master

其中 github_name 为你的 github 账号用户名。

使用hexo d命令即可将静态页面(即public文件夹里的内容)上传到github上去。此时在浏览器输入网址https://github_name.github.io/，即可看到你的网站已经成功发布了。

绑定外网域名

域名

在你的域名注册商那里，添加对github_name.github.io的域名解析。

主机名 www
记录类型 CNAME
记录值 github_name.github.io.

也可以设置一下主机名为 @ 时的值，这样前面就不用加www了。

绑定

在工程目录\source文件夹下新建一个名称为CNAME的文件，该文件没有后缀。在里面输入你的域名，注意输入的域名不带https://，最好也不要带www，但是有时候不带www不行。

使用下面的命令将修改deploy到github上去。

1
2
3

$ hexo clean
$ hexo g
$ hexo d

这个时候你的github项目目录下会有CNAME这个文件。过一会(一个TTL时间)刷新一下即可使用自己的域名访问。

部署

工程项目与博客项目

到现在为止，我们在github上的项目都是用来保存hexo生成的静态页面的，也就是工程目录的public文件夹。但是我们想把整个工程项目，包括生成public文件之前的.md文件，以后我们后面魔改的一些工程配置和代码。这是很有必要的。

于是我们需要另外建一个仓库，也可以两个分支，但是比较麻烦。这里建议再使用另外一个仓库。现在我们要做的事情很简单，就是把整个工程传到github上的这个新建的仓库中去即可。注意要配置一下.gitignore文件以排除一些生成文件，只保留我们需要的源码和配置文件。当然也要保留我们使用markdown写的.md博客文件。

这样不论换电脑还是异地工作，甚至是异地恋，都不用从零开始搭建了。

\(^o)/

部署流程

当我们重新装了系统，或者换了一个工作地点时，只需要clone一下工程项目，而非发布静态页面的项目。

1	$ git clone git@github.com:username/hexo_blog.git

在拷贝得到的工程目录下重新安装hexo但不进行初始化，即执行下面的代码。

1 2	$ npm install -g hexo $ npm install

同时需要安装所缺的插件即可，目前所需要安装的插件列表如下。

1	$ npm install hexo-deployer-git --save # 部署到git的插件

$ npm install gulp -g				# 博文压缩插件
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin gulp --save
# 如果出现找不到依赖的 plugin, 尝试执行下面的命令
$ npm install imagemin-jpegtran imagemin-svgo imagemin-gifsicle imagemin-optipng --save

1	$ npm install hexo-abbrlink --save # 设置文章永久链接插件

1	$ npm install hexo-asset-image --save # 支持图片引用

注意不执行hexo init就行了。此时再发布静态页面，也还是原来的静态页面仓库，不受影响。

日常工作流程

在本地修改某些文件后，先将原始文件推送到工程项目，即执行如下命令。

1
2
3

$ git add .
$ git commit -m "update"
$ git push origin master

然后再生成静态页面并发布到博客项目。

1	$ hexo clean && hexo g -d

等价于

1
2
3

$ hexo clean
$ hexo g
$ hexo d

后记

至此，我们的hexo已经完美地搭建出来了，而且很长一段时间内只需要搭这一次。从此和我们的博客过上了meixiumeizao的生活。

后面我们将从__功能__和__界面__两个方面优化我们的hexo，使其最终成为居家旅游必备良品！

\(^o)/