Hexo 是一个快速、简洁且高效的博客框架,其使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
下面介绍一下如何构建 HEXO
服务并部署至 GitHub
。
一、环境安装
1. Node
Node
的安装比较简单,打开 Node官网 下载,安装无脑下一步即可。
安装完成后在命令行窗体输入如下命令,能正常显示版本信息则说明安装成功。
node -v # 查看 Node 版本
npm -v # 查看 NPM 版本
2. Git
由于后续需要使用到 GitHub
,所以需要安装 Git。
安装步骤同上,下载完成之后无脑下一步即可,详细的 Git
配置可参考另一篇文章:GitHub入门教程
3. Hexo
在创建 Hexo
工程前需要先安装其脚手架依赖,输入下行命令安装。
其中 -g
表示全局安装,之后在任意目录下都能执行相应命令。
npm install -g hexo-cli
hexo -v # 查看 hexo 版本
二、工程创建
1. 初始化
完成上述基本的环境安装之后就可以正式开始创建 Hexo
工程了。在选择合适目录新建命令行窗口,输入下行命令进行工程初始化。
hexo init # 初始化博客
等待初始化完成之后即会在目录下生成如下内容:
2. 依赖下载
通过 hexo init
命令会自动在工程目录下生成 node_module
文件夹,里面存放博客的 node
依赖包,但如果在其它计算机上则需要重新下载相关的依赖包。
在博客根目录运行如下命令,完成后将在根目录下生成 node_module
文件夹。
npm install hexo-util # 依赖下载
3. 访问测试
在上述的目录下新建命令行窗体,输入 hexo s
若出现下图说明启动成功,默认访问端口为 4000
,可通过 -p
指定端口。
博客启动成功之后打开浏览器访问 localhost:4000
即可看到网站内容。
4. 文章管理
Hexo
创建之后默认会存在一篇 hello-world
的文章,可根据需要自行新建文章。
在博客根目录下命令行窗体中输入 hexo n '<blog name>'
创建新文章,输入命令后将会在 /source/_posts
下生成同名的 md
文件。
创建之后重新刷新博客站点即可看见你新建的文章。
三、主题美化
1. 下载主题
Hexo 提供丰富的自定义个性化,下面介绍如何更换主题样式。
打开站点根目录下的 theme
目录右击选择 git bash here
,然后输入下行命令。
git clone https://github.com/blinkfox/hexo-theme-matery.git
这里我选则 matery
主题,可以根据你的喜欢更改,完成之后即可看到目录多了一个 hexo-theme-matery
文件夹。
2. 修改配置
下载完主题之后需要更改 Hexo
的主题设置,在根站点目录下的 _config.yml
文件中找到 theme
替换为 hexo-theme-matery
。
theme: hexo-theme-matery # 更换主题
完成之后 hexo s
重启之后访问页面即可看到样式已经发生改变,更多的主题设置不作过多介绍,后续有机会单独出篇教程。
四、部署工程
1. 仓库创建
在 GitHub
中新建一个公开仓库,仓库名称为你的 GitHub ID
加 .github.io
。
2. 工程配置
打开工程根目录下的 _config.yml
文件,添加如下命令,将其中的链接换成你自己的 GitHub
仓库地址。
deploy: # 配置部署仓库
type: git
repo: https://github.com/ibudai.xyz.git
branch: master
3. 部署插件
在服务部署之前需要先安装相应部署插件,在博客根目录运行如下命令:
npm install --save hexo-deployer-git
4. 服务推送
完成上述配置之后,在站点根目录下新建命令行窗口运行如下命令部署服务。
hexo clean && hexo g -d
浏览器访问:https://xxx.github.io/
就可以看到效果了。