静态博客：Hexo之Github Pages 部署

免费搭建 Hexo 博客： Github Pages 部署全攻略

前言

GitHub Pages 部署的博客是有空间限制的。一般来说，GitHub Pages 源仓库的推荐限制为 1GB，发布的 GitHub Pages 网站也不能超过 1GB。此外，还有每月 100GB 的带宽限制以及每小时 10 次的构建限制。对于大多数个人博客来说，1GB 的空间已经足够使用，但如果博客中包含大量的图片、视频等大文件，可能就需要注意空间的使用情况

前期准备

  • 注册Github账号：访问Github官网（https://github.com/），按照提示填写相关信息完成注册。
  • 安装相关软件：在本地安装 Node.js 和 Git，Node.js 可通过官网下载安装包进行安装，Git 可在其官网（https://git-scm.com/downloads）下载安装。
  • 安装 Hexo：在命令行工具中输入 npm install -g hexo-cli​ ，完成 Hexo 的全局安装。

详细说明：

  • Windows 系统：

    1. 访问 Node.js 官网（https://nodejs.org/） ，在首页会看到两个绿色按钮，初学者建议选择左侧的 LTS 版本下载按钮，点击即可开始下载安装包 。
    2. 下载完成后，双击安装包运行安装程序。
    3. 在安装向导中，依次点击 “Next”。在选择安装路径页面，可默认安装到 C 盘，也可根据自己需求更改路径，点击 “Next” 。
    4. 在选择安装功能页面，保持默认设置，直接点击 “Next”。
    5. 最后点击 “Install” 开始安装，等待安装完成后，点击 “Finish” 退出安装向导。

  • macOS 系统：

    1. 同样访问 Node.js 官网，点击 LTS 版本的下载按钮，下载 Mac 系统的安装包。
    2. 下载完成后，打开安装包，按照提示将 Node.js 图标拖移到 “Applications” 文件夹中，即可完成安装。

  • Linux 系统：推荐使用 Nodesource 安装包管理器来安装 Node.js。以 Ubuntu 为例，在终端中依次执行以下命令 ：

1
2
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

  • Windows 系统 ：

    1. 打开 Git 官网（https://git-scm.com/downloads），页面会自动识别你的操作系统并提供对应的下载链接，点击下载 Git for Windows 安装包。
    2. 下载完成后，运行安装程序，在安装向导中，除了选择安装路径外，其他步骤基本都可以保持默认设置，一直点击 “Next” 直到安装完成。
    3. 安装完成后，在开始菜单中找到 “Git Bash”，点击打开，输入 git version​命令，如果能显示 Git 版本信息，则说明 Git 安装成功。

  • macOS 系统 ：

    1. 对于 Mac 系统，Git 通常已经预装，如果没有预装或者需要更新版本，可以通过 Homebrew 来安装。在终端中输入以下命令安装 Homebrew：
1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. 安装完成后，再输入以下命令安装 Git：
1
brew install git
  1. 安装完成后，在终端中输入 git version​命令，若能显示 Git 版本信息，则表明 Git 安装成功。
  • Linux 系统：不同的 Linux 发行版安装 Git 的方式略有不同，以 Ubuntu 为例，在终端中输入以下命令即可安装 Git ：
1
sudo apt-get install git

[tab name=”安装 Hexo”]

在安装好 Node.js 和 Git 后，就可以安装 Hexo 了。打开命令行工具（Windows 系统可使用 Git Bash 或命令提示符，macOS 和 Linux 系统使用终端），输入以下命令进行 Hexo 的全局安装 ：

1
npm install -g hexo-cli

安装完成后，可以通过以下命令检查 Hexo 是否安装成功：

1
hexo -v

如果能显示 Hexo 的版本信息，则说明 Hexo 安装成功。

创建项目

  1. 本地 Hexo 环境搭建：

    • 全局安装 Hexo：在命令提示符或终端中输入npm install -g hexo-cli​安装 Hexo 命令行工具。安装完成后，输入hexo -v​验证是否安装成功。
    • 初始化 Hexo 项目：选择一个磁盘位置，创建一个用于存放博客文件的文件夹，比如myblog​。进入该文件夹后，右键点击空白处，选择 “Git Bash Here”（如果是 Windows 系统且安装了 Git）或在终端中打开该文件夹。然后输入hexo init​初始化 Hexo 项目。初始化完成后，输入npm install​安装项目所需的依赖包。
    • 本地预览：输入hexo g​生成静态网页，然后输入hexo s​启动本地服务器。在浏览器中输入http://localhost:4000/​，即可预览博客效果。

  2. 创建 GitHub 仓库：

    • 登录 GitHub 账号，点击右上角的 “+”，选择 “New repository” 创建新仓库。
    • 仓库名称必须为你的 GitHub 用户名.github.io​，比如你的用户名是yourusername​，那么仓库名称应为yourusername.github.io​。勾选 “Initialize this repository with a README`” 选项，方便后续操作。

添加 SSH 公钥

使用 SSH 方式连接到 GitHub（推荐）

  1. 生成 SSH 密钥对：

    • 在命令提示符或终端中执行 ssh-keygen -t rsa -C "你的邮箱地址"​，然后按照提示操作，无需设置密码。

  2. 将公钥添加到 GitHub：

    • 用文本编辑器打开生成的公钥文件（通常是 ~/.ssh/id_rsa.pub​），复制其中的内容。
    • 登录 GitHub，点击右上角头像，选择 “Settings”，在左侧菜单中找到 “SSH and GPG keys”，点击 “New SSH key”，将公钥内容粘贴到 “Key” 文本框中，并为其设置一个标题，点击 “Add SSH key” 保存。

  3. 修改 Hexo 配置文件：

    • 打开 Hexo 项目根目录下的 _config.yml​ 文件，找到 deploy​ 部分，将其修改为：
1
2
3
4
deploy:
  type: git
  repo: git@github.com:demius782/demius782.github.io.git
  branch: master

  1. 重新安装部署插件（如果需要）：

    • 在命令提示符或终端中，进入 Hexo 项目目录，执行 npm install hexo-deployer-git --save​。

然后再次尝试执行 hexo clean​、hexo generate​ 和 hexo deploy​ 命令进行部署。

  1. 配置 Hexo 与 GitHub 的连接：

    • 用记事本或其他文本编辑器打开本地 Hexo 项目根目录下的_config.yml​文件。
    • 找到deploy​部分，修改为以下内容（注意冒号后面要有一个空格）：
1
2
3
4
deploy:
  type: git
  repo: https://github.com/你的用户名/你的用户名.github.io.git
  branch: master

将https://github.com/你的用户名/你的用户名.github.io.git​替换为你自己创建的 GitHub 仓库地址。

  1. 安装部署工具：

在命令提示符或终端中，进入本地 Hexo 项目文件夹，输入npm install hexo-deployer-git --save​安装部署工具。

  1. 部署到 GitHub：

在命令提示符或终端中，输入hexo clean​清除缓存，然后输入hexo g​生成静态文件，最后输入hexo d​部署到 GitHub。

部署完成后，在浏览器中输入http://你的用户名.github.io​，即可访问你的 Hexo 博客。如果后续对博客进行了修改，只需要重复hexo g​和hexo d​的操作，就可以将更新后的内容部署到 GitHub 上。

设置 Hexo 博客的主题

寻找主题

  • 可以在 Hexo 官方主题网站（https://hexo.io/themes/）查找官方推荐的主题。这些主题通常有详细的文档说明和示例展示。
  • 也可以在 GitHub 上搜索 Hexo 主题，有大量开发者分享的自定义主题。在搜索时，可以参考主题的星级、下载量和更新频率来判断主题的质量和受欢迎程度。

下载主题

  • 一般来说，主题是以代码仓库的形式存在的。以从 GitHub 下载主题为例，找到想要的主题仓库后，复制仓库的 URL。
  • 在本地 Hexo 博客项目的根目录下，打开命令行工具，使用 git clone [主题仓库URL] themes/[主题名称]​命令来下载主题。例如，git clone https://github.com/iissnan/hexo-theme-next themes/next​就是将 Next 主题下载到 themes​文件夹下，并命名为 next​。

启用主题

  • 打开 Hexo 博客项目根目录下的 _config.yml​文件，找到 theme​字段。
  • 将 theme​的值修改为刚刚下载的主题名称。例如，如果下载的主题命名为 next​，则将 theme: next​。

配置主题

  • 不同的主题有不同的配置选项，这些选项通常在主题文件夹下的 _config.yml​文件中进行设置。

  • 以 Next 主题为例，它的 _config.yml​文件中有关于菜单设置、侧边栏布局、社交账号链接等多种配置选项。

    • 如设置菜单，格式通常为：
1
2
3
4
5
6
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  • 这里 home​、about​等是菜单名称，/​、/about/​等是对应的链接路径，||​后面的是图标名称（如果主题支持图标的话）。
  • 还可以配置主题的颜色风格、字体等外观相关的内容。例如，Next 主题可以通过修改 _config.yml​中的 scheme​字段来改变主题的配色方案，如 scheme: Pisces​。

自定义主题（可选）

  • 如果对主题有更个性化的需求，可以修改主题的模板文件。主题的模板文件一般使用 EJS、Pug 等模板语言编写，存放在主题文件夹下的 layout​文件夹中。
  • 例如，想要修改文章页面的布局，可以在 layout/_post.ejs​（以 EJS 模板为例）文件中调整 HTML 结构、添加或删除元素。
  • 也可以通过添加自定义 CSS 来修改主题的样式。在主题文件夹下创建一个 source/css​文件夹（如果不存在的话），并创建一个自定义的 CSS 文件，如 custom.css​。在主题的 _config.yml​文件中，找到引入 CSS 文件的部分，将 custom.css​添加进去，然后在 custom.css​文件中编写自定义的样式规则，如：
1
2
3
body {
    background - color: #f5f5f5;
}

这样就可以将博客的背景颜色修改为 #f5f5f5​。

在hexo博客中编辑和发布文章

创建新文章

  • 使用命令行工具：在 Hexo 博客的根目录下，通过 hexo new [文章标题]​命令来创建新文章。例如，hexo new "我的第一篇博客"​，这会在 source/_posts​文件夹下生成一个以文章标题命名的 Markdown 文件（标题中的空格会被转换为连字符）。
  • 手动创建：也可以直接在 source/_posts​文件夹下手动创建一个 Markdown 文件来撰写文章。不过要注意文件的命名最好符合规范，且以 .md​为后缀。

撰写文章内容

  • 打开生成或创建的 Markdown 文件，使用 Markdown 语法撰写文章。
  • 标题设置：文章的标题一般在文件开头，以 # [文章标题]​的形式表示，例如 # 探索新技术​。
  • 段落编写：直接在标题后另起一行开始写段落内容，每段之间空一行即可。例如：
1
2
3
4
# 探索新技术
在当今快速发展的时代，新技术如雨后春笋般涌现。

这些新技术正在改变我们的生活方式。
  • 插入图片：如果要插入图片，可以将图片放在 source/images​文件夹（可自行创建）下，然后在文章中使用 ![图片描述](图片路径)​的语法来插入，例如 ![美丽的风景](images/landscape.jpg)​。
  • 添加链接：使用 [链接文字](链接地址)​的语法添加外部链接，如 [Hexo官方网站](https://hexo.io/)​。
  • 引用内容：使用 > [引用内容]​的语法来引用他人的观点或其他内容，例如：
1
> 马克·吐温曾说：“人的思想是了不起的，只要专注于某一项事业，就一定会做出使自己感到吃惊的成绩来。”

  • 列表排版：

    • 有序列表使用 1. [内容]​、2. [内容]​等形式，例如：
1
2
1. 首先，我们要明确目标。
2. 其次，制定计划。
  • 无序列表使用 - [内容]​、* [内容]​的形式，例如：
1
2
- 优点一：易于操作。
- 优点二：功能强大。
  • 代码块插入：如果要插入代码块，使用三个反引号（```）包裹代码，并在第一个反引号后注明代码语言，例如：
1
2
‍‍```python
print("Hello, World!")
1
2
3
4
5
6
7
8
9
10
11
12
13

3. **设置文章属性（可选）**
   - 在文章的Markdown文件开头，可以设置一些文章的属性，例如文章的分类（categories）、标签（tags）和发布时间（date）等。格式如下：
‍‍```yaml
---
title: 文章标题
date: 2024-10-24
categories:
  - 技术
tags:
  - Hexo
  - 博客
---
  • 这里 date​字段用于指定文章的发布日期，categories​字段用于设置文章所属的分类，tags​字段用于添加文章的标签。这些属性可以帮助读者更好地浏览和分类你的博客内容，同时也有利于搜索引擎优化（SEO）。

生成静态文件

  • 在完成文章撰写后，使用 hexo generate​（或 hexo g​）命令来生成静态文件。这个命令会将 Markdown 文件转换为 HTML、CSS 和 JavaScript 等静态文件，这些文件会被生成到 public​文件夹中。

本地预览（可选）

  • 在发布之前，建议使用 hexo server​（或 hexo s​）命令在本地启动一个服务器来预览博客的效果。运行这个命令后，你可以在浏览器中访问 http://localhost:4000​查看博客的样子。这一步可以帮助你检查博客的布局、样式、链接等是否符合预期，避免发布后出现问题。

发布文章

  • 当对文章内容和博客的整体效果满意后，使用 hexo deploy​（或 hexo d​）命令将博客部署到目标平台（如之前配置好的码云 Gitee Pages 等）。部署完成后，读者就可以通过博客的网址访问到新发布的文章。

绑定域名

  1. 购买域名

    • 首先，你需要在域名注册商处购买一个域名。常见的域名注册商有 GoDaddy、Namecheap、阿里云、腾讯云等。在注册过程中，按照注册商的要求填写相关信息，完成域名的购买。

  2. 配置域名解析（DNS）

    • 在域名注册商处操作：

      • 登录到你购买域名的注册商网站，找到域名管理控制台。

      • 查找域名解析设置选项，通常称为 “DNS 管理” 或 “域名解析”。

      • 添加两条记录：

        • A 记录：将主机记录（Host）设置为 @​（代表根域名，如 yourdomain.com​），记录类型为 A，记录值填写你的 GitHub Pages 服务器的 IP 地址。对于 GitHub Pages，这个 IP 地址通常是 185.199.108.153​、185.199.109.153​、185.199.110.153​、185.199.111.153​这几个中的一个。不过，最好参考 GitHub 官方文档确认最新的 IP 地址信息。
        • CNAME 记录（如果需要）：如果你的域名是二级域名（如 blog.yourdomain.com​）或者你想使用自定义子域名，添加 CNAME 记录。将主机记录设置为你想要的子域名（如 blog​），记录类型为 CNAME，记录值填写 your - username.github.io​（其中 your - username​是你的 GitHub 用户名）。

    • 等待 DNS 传播生效：域名解析的更改不会立即生效，需要等待一段时间，这个过程称为 DNS 传播。通常可能需要几分钟到几小时不等，具体取决于 DNS 服务器的缓存时间和网络情况。你可以使用在线的 DNS 检查工具来查看域名解析是否已经生效。

  3. 在 GitHub 仓库中设置

    • 登录到 GitHub，进入你的 Hexo 博客仓库（your - username.github.io​）。

    • 点击仓库的 “Settings” 选项卡。

    • 在 “Settings” 页面中，找到 “Pages” 部分。

    • 在 “Custom domain” 字段中，输入你的域名（如 yourdomain.com​或 blog.yourdomain.com​），然后点击 “Save” 按钮。

    • 启用https：在输入完域名下方有个小选择，勾选上启用。

    • GitHub 会自动检查域名是否正确配置。如果配置正确，你的 Hexo 博客就成功绑定了域名，之后访问这个域名就可以打开你的博客。

  4. 注意事项

    • 如果之前已经访问过你的 GitHub Pages 博客（未绑定域名时），浏览器可能会缓存旧的访问地址。在绑定域名后，可能需要清除浏览器缓存才能正确访问新的域名地址。
    • 确保域名的续费和配置信息及时更新，避免域名过期或者解析错误导致无法访问博客。同时，要遵守域名注册商和 GitHub 的相关规定和政策。

  5. 在 Hexo 项目中设置

  • 在本地 Hexo 项目的根目录下，找到 source​文件夹，在其中创建一个名为 CNAME​的文件（注意要大写，无文件扩展名） 。
  • 用文本编辑器打开 CNAME​文件，在其中填写您购买的域名，保存并关闭文件 。
  1. 部署 Hexo 项目

  • 在本地项目目录中打开命令行工具，依次执行以下命令生成静态文件并部署到码云 ：

    • ​hexo clean​：清理之前生成的静态文件。
    • ​hexo generate​（或 hexo g​）：生成新的静态文件。
    • ​hexo deploy​（或 hexo d​）：将静态文件部署到码云。
  1. 等待生效
  • 完成上述步骤后，需要等待一段时间，让域名解析生效以及码云服务器完成相关配置。一般来说，域名解析可能需要几分钟到几小时不等，具体时间取决于域名注册商和网络环境。

使用码云 Pages 自带的 HTTPS 功能

  • 前提条件：确保你的码云 Pages 服务已正常开启 ，且博客已成功部署到码云 Pages 上1 。
  • 操作步骤：在码云仓库的设置中，找到 Pages 服务相关设置选项，查看是否有直接开启 HTTPS 的按钮或选项。若有，直接点击开启即可。开启后，等待一段时间，让证书生效，一般短时间内可能会出现不安全的提示，稍等片刻即可 。

打开hexo博客的后台

通过命令行启动本地服务器（本地预览）

  • 在 Hexo 博客的根目录下，使用命令 hexo server​（或简写为 hexo s​）来启动本地服务器。这会在本地开启一个服务，方便你预览博客的效果。
  • 启动后，在浏览器中输入 http://localhost:4000​，就可以访问你的博客了。这个本地预览界面其实就相当于一个简单的后台界面，你可以在这里查看文章布局、样式、链接等是否符合预期。
  • 在这个本地预览状态下，如果你对博客内容或设置进行了修改（比如修改了文章、主题配置等），保存文件后，刷新浏览器页面就能看到更新后的效果。不过要注意，这只是本地预览，外部用户还无法访问这个地址，只有你自己在本地电脑上能通过这个方式查看博客。

部署后的后台管理（内容更新）

  • Hexo 本身并没有像一些动态网站那样有一个专门的图形化后台管理界面。它主要是通过在本地编辑文章和配置文件，然后重新生成和部署来更新博客。
  • 文章编辑：你可以在本地的 source/_posts​文件夹下找到文章对应的 Markdown 文件进行编辑。例如，添加新文章就使用 hexo new [文章标题]​命令创建一个新的 Markdown 文件，然后在里面撰写内容。修改完文章后，按照之前部署博客的流程（hexo clean​、hexo generate​、hexo deploy​）重新生成并部署静态文件到服务器上，这样博客内容就更新了。
  • 主题和配置修改：如果要修改博客的主题或者其他配置，如添加新的插件、修改主题颜色等。对于主题修改，需要在本地的主题文件夹（themes​文件夹下对应的主题目录）中进行操作，例如修改主题的 _config.yml​文件或者模板文件。对于全局配置修改，在 Hexo 项目根目录下的 _config.yml​文件中进行。同样，修改完成后，需要重新生成和部署静态文件来使修改生效。

使用1panel面板部署hexo博客

前期准备

  • 云服务器：确保你已经拥有一台云服务器，并且已经安装好 1panel 面板 。
  • 本地环境：在本地计算机上安装好 Node.js、Git 等必要软件，以便生成和推送 Hexo 博客的静态文件 。

安装相关软件

  • 登录 1panel 面板：使用浏览器访问云服务器的 1panel 面板地址，登录到面板管理界面。
  • 安装 Git：在 1panel 面板的软件商店中，找到 Git 并进行安装 。
  • 安装 Node.js：同样在软件商店中找到 Node.js 并安装 。

创建 Git 仓库与站点目录

  • 创建 Git 仓库：在服务器上通过 1panel 面板的文件管理器，创建一个用于存储博客代码的 Git 仓库。例如，在 /var/repo​目录下创建 blog.git​裸仓库。
  • 创建站点目录：创建一个用于存放博客静态文件的目录，如 /var/www/hexo​，并设置好相应的权限，确保 Web 服务器用户能够访问该目录。

配置 Git 钩子与 Web 服务器

  • 配置 Git 钩子：在 /var/repo/blog.git/hooks​目录下创建一个 post-receive​文件，内容如下 ：
1
2
#!/bin/bash
git --work-tree=/var/www/hexo --git-dir=/var/repo/blog.git checkout -f

保存文件后，赋予其可执行权限。

  • 配置 Web 服务器：如果使用 Nginx 作为 Web 服务器，可以在 1panel 面板中配置 Nginx 站点，将服务器域名或 IP 指向 /var/www/hexo​目录 。

本地设置与部署

  • 修改 Hexo 配置文件：在本地的 Hexo 项目目录中，找到 _config.yml​文件，修改其中的 deploy​部分，设置部署类型为 git​，并填写服务器上的 Git 仓库地址，例如：
1
2
3
4
deploy:
  type: git
  repo: git@your_server_ip:/var/repo/blog.git
  branch: master
  • 生成并部署博客：在本地终端中，进入 Hexo 项目目录，依次执行以下命令生成静态文件并将其部署到服务器上 ：
1
2
3
hexo clean
hexo generate
hexo deploy