上一篇我们创建并开启了 github
的 Github Pages
服务,已经可以通过指定路径访问博客内容了,这篇我们开始用 Hexo
管理和更新博客内容。
安装Hexo
Hexo的安装非常简单,当我们安装好 Git
和 Node.js
后,只需要在命令行工具中执行如下命令即可
$ npm install -g hexo
建站
安装好 Hexo
后,我们通过其提供的命令在指定文件夹中快速创建所需要的文件
$ hexo init
$ cd
默认情况下在初始化的时候会自动帮我们安装所有项目依赖包,如果没有可以在创建的目录下执行下面的命令进行安装
npm install
新建完成后,指定文件夹的目录如下:
/
┣━━ _config.yml
┣━━ package.json
┣━━ scaffolds
┣━━ source/
┃ ┣━━ _drafts
┃ ┗━━ _posts
┗━━ themes
此时我们已经完成了一个基本博客的创建,如果你迫不及待的想看下效果,可以执行下面的命令在本地模拟运行博客
$ hexo server
或
$ hexo s
运行后终端上会显示如下信息
现在我们打开浏览器,输入 http://localhost:4000/
并按下回车后,Hexo
默认的博客样式和内容就呈现出来了。
部署
上面我们只是在自己的机器上模拟运行了我们的博客网站,如果想要让其他人也可以浏览我们的博客则需要把它部署在可以提供公共访问的地方,这里结合我们之前介绍的Github Pages
服务就可以很简单的实现这个需求。
编译
首先我们需要先对源代码进行编译生成静态文件,执行如下命令:
$ hexo generate
或
$ hexo g
此时我们的博客所在文件夹下会多出一个 public
的目录,里面就是生成好的所有静态文件
上传
接着我们把生成的所有博客静态文件上传到指定的git仓库
Hexo
提供了方便的一键部署功能,只需要执行如下命令即可
$ hexo depoly
或
$ hexo d
在上传前我们还需要做些准备工作,比如我们需要告诉Hexo
需要上传到哪里。
首先安装插件hexo-deployer-git
来启用一键部署的功能,Hexo
在初始化的时候没有默认安装此插件
$ npm install hexo-deployer-git --save
注意:如果你的机器上安装了yarn
,在执行hexo init
初始化的时候会默认使用yarn
安装所有依赖包,这里必须用yarn add hexo-deployer-git
进行安装,否则会报错
打开项目中的_config.yml
配置文件,找到deploy
配置项,修改deploy
下的type
和repo
参数,最终效果如下:
deploy:
type: git
repo: https://github.com/yourGithubName/yourGithubName.github.io
在配置好对应参数后,执行 hexo d
即可将所有静态文件推送到远端git仓库
此时我们打开浏览器,输入 https://yourGithubName.github.io/
即可看到我们刚才部署成功的博客内容
如果你自己有购买专属域名,也可通过配置
CNAME
来使我们的域名关联到此地址上,具体内容可以参见手摸手教你用github和hexo搭建个人博客(番外篇)
在完成了博客的创建和部署后,下一篇我们会聚焦在HEXO
框架内的_config.yml
文件,看看这些设置项都能带来什么效果。
(完)