目录
Hexo 简介
什么是 Hexo?
Hexo 安装
Hexo 建站
Hexo 配置
Hexo 自定义主题
Hexo 写作
Hexo 服务器
Hexo 生成与发布
一键部署 Hexo 站点到 github pages
Github 仓库准备
安装 hexo-deployer-git 插件
修改 _config.yml 配置
部署站点
一键部署到自己的云服务器
配置 Nginx 反向代理
新建 git 仓库,并配置 git hooks
发布服务到 git 仓库
Hexo 简介
什么是 Hexo?
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
更多的信息可以查看 Hexo 官网。
使用 Hexo,我们可以用 Markdown 来编写博客文章,然后通过将文章解析成静态网页,部署到 github pages、自己的云服务等等地方。
Hexo 安装
安装 hexo 之前,需要有 git 和 nodejs。大家自行在网上搜索解决。
安装完 nodejs,通过以下命令,就可以安装 Hexo:
npm install -g hexo-cli
Hexo 建站
以下命令会初始化一个 my-blog
的 hexo 站点目录。
hexo init my-blog
cd my-blog
npm install
目录结构如下:
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml:用于配置站点的信息
source:资源文件夹是存放用户资源的地方。除 _posts
文件夹之外,开头命名为 _
(下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public
文件夹,而其他文件会被拷贝过去。
themes:主题 文件夹。Hexo 会根据主题来生成静态页面。
Hexo 配置
Hexo 的配置,主要通过 _config.yml 文件实现。包括网站、网址、目录、文章、分类&标签等等。此外还包含一些扩展,如自定义主题等。
Hexo 自定义主题
创建 Hexo 主题非常容易,您只要在 themes
文件夹内,新增一个任意名称的文件夹,并修改 _config.yml
内的 theme
设定,即可切换主题。一个主题可能会有以下的结构:
├── _config.yml
├── languages
├── layout
├── scripts
└── source
_config.yml 这是主题的配置文件。
Hexo 写作
可以通过以下命令来创建新文章:
hexo new [layout] <title>
或者直接在 source/_posts
目录下新建文件。
Hexo 服务器
Hexo 3.0 把服务器独立成了个别模块,您必须先安装 hexo-server 才能使用。
npm install hexo-server --save
服务器安装完成后,通过以下命令启动服务器:
hexo server
浏览器中可以通过 http://localhost:4000 来对站点进行预览。
Hexo 生成与发布
生成静态站点:
hexo generate
以上命令会生成静态的站点页面,内容位于 public 目录下。
通过以下命令来实现站点的部署:
hexo deploy
一键部署 Hexo 站点到 github pages
Github 仓库准备
使用 你的github用户名.github.io
创建一个仓库,进入设置 -> pages:
设置好要发布为 pages 服务的分支,目录等。
安装 hexo-deployer-git 插件
npm install hexo-deployer-git --save
修改 _config.yml 配置
deploy:
type: git
repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch]
message: [message]
repo:设置为准备好的仓库地址
branch:设置为发布为 pages 的分支
部署站点
hexo deploy -g
以上命令会自动生成静态站点,并部署到 github 仓库。
在通过 http://你的github用户名.github.io 就可以访问你的 Hexo 站点了。
一键部署到自己的云服务器
众所周知,github 目前在国内访问非常的慢,替代的方式是可以发布到 gitee、coding 等的 pages 服务上。如果你有自己的云服务器,那博客站点就可以部署到云服务器上,还可以自由配置域名等等。
在上一篇文章中讲到,我在云服务器上使用 docker 方式安装了 nginx,对 Web 服务进行反向代理。同时服务器上还安装了 gogs 提供私有的 git 服务。基于以上基础设施,可以很方便将 hexo 静态站点发布到自己的云服务器。
还是再画一张部署架构图:
配置 Nginx 反向代理
在 nginx 配置目录下新增 blog.uprogrammer.cn.conf
文件,内容如下:
server {
listen 80;
# 静态博客站点的域名
server_name blog.uprogrammer.cn;
# Add index.php to the list if you are using PHP
location / {
index index.html;
# 由于是静态站点,直接通过 alias 配置到资源文件夹
alias /path/to/blog.uprogrammer.cn/;
}
}
重启 nginx 使配置生效。
docker restart nginx
新建 git 仓库,并配置 git hooks
在 gogs 中新建一个仓库,仓库设置 -> 管理 Git 钩子 -> 编辑 post-receive
post-receive
钩子会在收到 git 仓库收到推送内容之后触发。这里将更新以后的站点内容复制到 Nginx 代理的目录下。
大家注意看这里的 git clone 之后的仓库地址是一个文件路径,多数大家看到的是 http 或者 git 协议的地址。想想为什么?
发布服务到 git 仓库
参见上一节,安装 hexo-deployer-git
插件,准备好 git 仓库,修改 _config.yml 配置。
通过执行 hexo deploy -g
将生成的静态站点内容上传到 git 仓库中。
通过以上的一番操作,自己编写的文章就可以一键发布到云服务器上,并通过域名进行访问啦。