使用 Nginx(GitHub Pages) 与 Hexo 搭建个人博客

本文介绍使用 Nginx（或者 GitHub Pages） 与 Hexo 搭建个人博客的主要步骤。

在正文开始之前，先介绍上面提到的几个工具的功能：

  • Nginx：充当 Web 服务器的角色，在个人博客中，其主要功能是在公网服务器上提供 HTTP 或 HTTPS 服务，让用户能够访问你的博客网站。
  • GitHub Pages：在没有个人公网服务器时，使用 GitHub Pages 同样可以达到搭建个人博客的目的。具体而言，GitHub Pages 就是一个特殊的 GitHub 仓库，你可以在这个仓库内放一些 HTML、CSS 和 JS 文件等，从而搭建个人网站。
  • Hexo：Hexo 是一个静态博客框架，使用它可以搭建博客网站，让用户专注于博客内容，而不需要熟悉 CSS 和 Javascript 等前端内容。使用官方以及许多开源作者提供的主题，即可快速的构建美观的网页，而博客内容使用 Markdown 编写即可。

下面，介绍具体步骤。

1. 本地安装 Node.js

Node.js 官网为：https://nodejs.org/en/download/ ，打开链接，根据本地环境，选择合适的安装文件下载。Windows 平台与 Mac 平台选择二进制 installer 文件，安装时只需要点下一步即可。

Linux 平台安装稍微复杂些，推荐以下两种安装方式，可任选其一：

  • 源代码编译安装，无需配置 bash，但是编译耗时，参考
  • 二进制文件下载安装，需要配置 bash 环境，参考

安装完成后，在命令行输入以下命令：

1
2
$ npm -v
$ node -v

若都有输出，说明安装成功。

2. 本地安装 Hexo 并初始化博客环境

Hexo 安装命令参考官网即可，具体如下：

1
2
3
4
5
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

关于 Hexo 的更多信息，可参考官方文档：文档 | Hexo 。

为了让你的博客网站更加符合你的审美，可以选择一个合适的主题 Themes | Hexo 。本博客网站使用的是 Fluid，其 GitHub 仓库地址为：fluid-dev/hexo-theme-fluid: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo (github.com) ，官方文档地址为：配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)。

仔细阅读 Hexo 官方文档与你选择的主题的官方文档，根据自己的喜好配置好 yml 文件，搭建个人博客的路途就走完了一半。

下面，我们要解决的问题是：如何让互联网上的广大用户能够访问你的博客网站？

3、4 小节提供了两种方式，可根据自己的具体情况选择。

3. 建立 GitHub Pages 仓库

首先，在 GitHub 上建立一个仓库。这个仓库的命名有点讲究，举例说明如下：

我的 GitHub 个人主页地址为：https://github.com/UnpureRationalist ，其中，UnpureRationalist 表示我的用户名。

打开 GitHub 并选择创建仓库选项，将仓库命名为 用户名.github.io ，比如我的仓库命名则是：UnpureRationalist.github.io ，并设置仓库为公开可见。

然后，在该仓库上传一个名为 index.html 的文件，参考文件内容如下：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <p>Hello World.</p>
    </body>
</html>

在浏览器输入链接 用户名.github.io ，如我的博客地址为：UnpureRationalist.github.io ，然后，浏览器即可显示 index.html 文件的内容（可能需要等待一会）。

利用此仓库，我们就可以让其他用户访问自己的博客网站。

4. 服务器安装 Nginx

对于拥有个人云服务器的用户来说，可以直接在个人服务器上安装 Nginx 服务，将个人博客搭建在自己的服务器上。

首先，我们需要在服务器上安装 Nginx，这里以 Ubuntu 系统为例，步骤如下：

1
2
3
4
$ sudo apt update
$ sudo apt install nginx
$ sudo systemectl enable nginx	# 设置 nginx 开机启动
$ sudo systemctl start nginx	# 启动 nginx 服务

注意，为了让 Nginx 正常工作，需要在服务器的安全组设置中开放 80 or/and 443 端口，以让 HTTP or/and HTTPS 服务正常工作，具体参考自己使用的服务器提供商。

如果要使用 HTTPS 服务，则需要对 Nginx 进行一定的配置，具体参考链接：https://cloud.tencent.com/document/product/400/35244 。

5. 配置 Hexo 实现自动部署

经过上面的步骤，我们在本地有了一个存放个人博客的目录；在云端有了公网用户能够访问的目录。因此，我们只需要使用 Git 或 scp 等工具，将 Hexo 生成的 public 目录下的所有文件和文件夹上传到 GitHub 仓库或者服务器 Web 服务根目录下即可。但是，手动进行这些操作有些麻烦，我们可以使用 Hexo 提供的功能实现一条命令部署。详情参考链接：部署 | Hexo 。

具体而言，就是在 _config.yml 配置文件中进行适当的配置，然后运行如下命令即可将个人博客部署到云端：

1
$ hexo clean && hexo g && hexo deploy

不过，在本人实际使用过程中，发现一键部署功能不太好用，GitHub Pages 有时由于网络原因无法部署成功；部署到云服务器上则会报错。因此，本人使用 Hexo 提供的功能部署到 GitHub Pages；对于服务器，则使用朴实无华的 scp 命令进行手动同步。如果读者有更好的自动部署方式，欢迎交流讨论。

博客
#Hexo #博客
使用 Nginx(GitHub Pages) 与 Hexo 搭建个人博客
https://arcsin2.cloud/2023/02/18/搭建个人博客/
作者
arcsin2
发布于
2023年2月18日
许可协议