使用 Hexo 搭建静态博客

2023-6-17 16 6/17

使用 Hexo 搭建静态博客

大家好,我是源智君!

今天分享一下我自己使用 Hexo 搭建的静态博客站点。

目录

  • 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[1](或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

更多的信息可以查看 Hexo 官网[2]

使用 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:主题[3] 文件夹。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[4] 才能使用。

npm install hexo-server --save

服务器安装完成后,通过以下命令启动服务器:

hexo server

浏览器中可以通过 http://localhost:4000 来对站点进行预览。

Hexo 生成与发布

生成静态站点:

hexo generate

以上命令会生成静态的站点页面,内容位于 public 目录下。

通过以下命令来实现站点的部署:

hexo deploy

🔥一键部署 Hexo 站点到 github pages

Github 仓库准备

使用 你的github用户名.github.io 创建一个仓库,进入设置 -> pages:

使用 Hexo 搭建静态博客

设置好要发布为 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 静态站点发布到自己的云服务器。

还是再画一张部署架构图:

使用 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

使用 Hexo 搭建静态博客
使用 Hexo 搭建静态博客
配置 GIT 钩子

post-receive 钩子会在收到 git 仓库收到推送内容之后触发。这里将更新以后的站点内容复制到 Nginx 代理的目录下。

大家注意看这里的 git clone 之后的仓库地址是一个文件路径,多数大家看到的是 http 或者 git 协议的地址。想想为什么?

发布服务到 git 仓库

参见上一节,安装 hexo-deployer-git 插件,准备好 git 仓库,修改 _config.yml 配置。

通过执行 hexo deploy -g 将生成的静态站点内容上传到 git 仓库中。

通过以上的一番操作,自己编写的文章就可以一键发布到云服务器上,并通过域名进行访问啦。

参考资料

[1]

Markdown: http://daringfireball.net/projects/markdown/

[2]

Hexo 官网: https://hexo.io/zh-cn/docs/

[3]

主题: https://hexo.io/zh-cn/docs/themes

[4]

hexo-server: https://github.com/hexojs/hexo-server

 

- THE END -

非特殊说明,本博所有文章均为博主原创。

共有 0 条评论