Hexo + Github 搭建博客

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装前提

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

  • Node.js (Should be at least nodejs 6.9)
  • Git

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

如果您的电脑中尚未安装所需要的程序,请根据以下安装指示完成安装。

1. 安装 Node.js

由于 Hexo 博客系统是基于 Node.js 编写的,所以要安装 Node.js 。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码。

安装过程不要修改配置,一路确认下一步


确认安装结束

打开终端输入

1
2
node -v
npm -v


显示出版本号即安装成功

2. 安装 Git

使用 git 将代码/文章提交到 GitHub 托管,不需要购买服务器和域名就能够实现博客的运行和访问。

打开终端输入

1
git --version

显示出版本号即安装成功

Github账号注册:https://github.com/

仓库创建:

  • 仓库名一定是你的用户名(以下用 MerlinAhh 代替), 例:MerlinAhh/MerlinAhh.github.io

访问 MerlinAhh.github.io,如果可以正常访问,那么 Github 的配置已经结束了。

到此搭建 Hexo 博客的相关环境配置已经完成。

安装 HEXO

打开终端输入

1
npm install -g hexo-cli

运行结束后输入

1
hexo -v

显示版本号等信息即安装成功

创建本地项目

创建本地项目并安装依赖

1
2
3
4
5
hexo init MerlinAhh.github.io

cd MerlinAhh.github.io

npm install

安装结束后可见项目结构

.
├── .deploy        #需要部署的文件
├── node_modules    #Hexo插件
├── public          #生成的静态网页文件
├── scaffolds      #模板
├── source          #博客正文和其他源文件等
| ├── _drafts      #草稿
| └── _posts        #文章
├── themes          #主题
├── _config.yml    #全局配置文件
└── package.json    #npm 依赖等

打开 package.json 可见 scripts 中为 npm 命令

执行

1
npm server

即可,或者

1
hexo server 或 hexo s

打开 http://localhost:4000/ 显示该界面,即说明你的hexo本地博客搭建成功。

本地项目关联 GitHub Page 项目

本地项目根目录找到 _config.yml 文件最后一行,修改

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: git@github.com:MerlinAhh/MerlinAhh.github.io.git (自己的仓库地址)
branch: master

删除旧的 public 文件

1
hexo clean

打包新的 public 文件

1
2
3
hexo generate
或者
hexo g

开始部署

1
2
3
hexo deploye
或者
hexo d

部署结束后,浏览器中输入你的网址 MerlinAhh.github.io 查看 (此时可能有一两分钟延迟,耐心等下)

更换主题

下载主题到你的 theme 目录,项目根目录下 _config.yml

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: merlintheme

theme 修改成新下载的主题目录名即可!

总结

HEXO + GitHub Pages 的优势是无需购置服务器,免服务器费的同时还能做负载均衡,并且 github pages有300M免费空间。只做个人文章展示,完全够用的!