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 仓库中。
通过以上的一番操作,自己编写的文章就可以一键发布到云服务器上,并通过域名进行访问啦。