HEXO博客构建教程


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/ 就可以看到效果了。


文章作者: 烽火戏诸诸诸侯
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 烽火戏诸诸诸侯 !
  目录