一、什么是Hexo
用Hexo官网的介绍https://hexo.io/zh-cn/docs/,Hexo是一个快速、简捷且高效的博客框架。Hexo使用Markdown解析文章,可以在很短的时间内生成静态网页。
二、快速构建Hexo
安装Hexo之前需要先安装Node.js和Git,如果电脑中尚未安装,请自行查询并进行安装。
安装Hexo:
$ npm install -g hexo-cli
安装Hexo完成后,执行以下命令:
$ hexo init myFirstHexo #创建并初始化项目
$ cd myFirstHexo
$ npm install #安装依赖
文件夹下的目录和文件如下:
文件/目录 |
内容 |
_config.yml |
网站配置文件 |
package.json |
应用程序的信息 |
scaffolds |
模板文件夹 |
source |
模板文件夹 |
themes |
主题文件夹 |
$ hexo new myFirstSrticle #新建一篇文章
$ hexo g #生成静态文件
$ hexo s #启动服务器。默认情况下,访问的是本地的端口,http://localhost:4000/
浏览器打开http://localhost:4000/,就可以看到生成的网站。
三、部署到Github Pages
1.创建Repository
在github中创建一个repository,创建的格式为:
<github用户名>.github.io
如图所示:
(由于笔者之前创建过,所以显示仓库已存在)
2.修改配置文件
打开**_config.yml**文件,添加如下配置:
deploy:
type: git
repo: git@github.com:MaoJiu0916/MaoJiu0916.github.io.git
branch: master
repo后面的内容为刚才创建仓库的地址,一般有两种形式:
https://github.com/MaoJiu0916/MaoJiu0916.github.io.git
或者
git@github.com:MaoJiu0916/MaoJiu0916.github.io.git
这里笔者推荐第二种,由于github是国外的网站,所以使用第一种访问起来比较慢,部署可能会不成功.但是使用第二种时需要配置SSH密钥,可以自行查询解决.
3.一键部署
$ npm install hexo-deployer-git --save #安装插件
$ hexo d #一键部署
打开(https://maojiu0916.github.io/)查看效果,如图所示:
(因为使用Github Pages部署的,所以加载比较慢,稍等片刻就好)