【hexo】安装与部署
前言
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 | $ npm install -g hexo |
使用如下命令测试有没有安装成功,出现版本号说明安装成功。
1 | $ hexo -v # 或 hexo --version |
初始化 hexo
在一个新的文件夹下执行如下命令,便可初始化一个hexo项目。以后我们称这个文件夹为整个项目的工程目录
,而该目录下的themes
文件夹下的某个主题文件夹则称为主题目录
,需要十分注意这两个目录的区别。
1 | $ hexo init |
hexo常用命令
1 | $ hexo g # 或 hexo generate -- 生成静态页面 |
至此,本地的hexo已经安装完毕,执行如下命令便会在工程文件下会生成 public 文件夹,就是最终的静态页面文件。
1 | $ hexo g |
然后打开http://localhost:4000
即可显示博客的主页。
以后将写好的.md
文件放在工程目录\source\_posts
目录下,重新generate一下即可发布博客到静态页面。
连接到github
新建github库
在 github 上新建一个仓库,仓库名为github_name.github.io
,其中github_name为你的github账号用户名。
连接到库
找到工程目录下的_config.yml
配置文件。找到deploy:
项,应该在文件的最后面,修改如下。
1 | deploy: |
其中 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 | $ hexo clean |
这个时候你的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 | $ npm install -g hexo |
同时需要安装所缺的插件即可,目前所需要安装的插件列表如下。
1 | $ npm install hexo-deployer-git --save # 部署到git的插件 |
1 | $ npm install gulp -g # 博文压缩插件 |
1 | $ npm install hexo-abbrlink --save # 设置文章永久链接插件 |
1 | $ npm install hexo-asset-image --save # 支持图片引用 |
注意不执行hexo init
就行了。此时再发布静态页面,也还是原来的静态页面仓库,不受影响。
日常工作流程
在本地修改某些文件后,先将原始文件推送到工程项目,即执行如下命令。
1 | $ git add . |
然后再生成静态页面并发布到博客项目。
1 | $ hexo clean && hexo g -d |
等价于
1 | $ hexo clean |
后记
至此,我们的hexo
已经完美地搭建出来了,而且很长一段时间内只需要搭这一次。从此和我们的博客过上了meixiumeizao的生活。
后面我们将从__功能__和__界面__两个方面优化我们的hexo
,使其最终成为居家旅游必备良品!
\(o)/