使用 Hexo 搭建静态博客

Posted 2021-06-18 胖福(hu)

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 Hexo 搭建静态博客相关的知识，希望对你有一定的参考价值。

Hexo 简介
一键部署 Hexo 站点到 github pages
一键部署到自己的云服务器

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 使配置生效。