前言

这里以使用码云 Gitee Pages部署hexo博客为教程，虽然现在码云停止了这个服务，但是其他平台大同小异，都差不多，主要是学习一下hexo这个CMS！

前期准备

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

详细说明：

1
2

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

1

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

1

brew install git

1

sudo apt-get install git

1

npm install -g hexo-cli

1

hexo -v

创建项目

• 新建仓库：登录码云账号，点击头像旁边的 “+” 号，创建一个新的仓库，仓库名称必须与你的码云账号用户名相同 ，其他信息可根据需求填写，访问权限建议设置为公开。

配置 Hexo 项目

• 初始化项目：在本地选择一个合适的目录，打开命令行工具，执行 hexo init blog命令，其中 blog为项目文件夹名，可自定义，初始化完成后，该文件夹下会生成一系列 Hexo 项目文件 。
• 安装部署插件：在项目目录下的命令行中输入 npm install hexo-deployer-git --save ，安装 Hexo 的 Git 部署插件。
• 修改配置文件：打开项目目录下的 _config.yml文件，找到 deploy配置项，将其修改为以下内容 ：

1
2
3
4

deploy:
  type: git
  repo: git@gitee.com:yourusername/yourusername.git
  branch: master

其中 yourusername为你的码云账号用户名，需确保与仓库名称一致。

添加 SSH 公钥

• 生成 SSH 公钥：在本地命令行中输入 ssh-keygen -t rsa -C "your_email@example.com" ，其中 your_email@example.com为你注册码云账号时使用的邮箱地址，按回车键确认，一路默认设置即可生成 SSH 公钥对。
• 添加公钥到码云：登录码云账号，进入设置页面，找到 “安全设置” 中的 “SSH 公钥” 选项，点击 “新增部署公钥”，将上一步生成的公钥文件（一般在 C:\Users\你的电脑用户名.ssh\id_rsa.pub目录下）中的内容复制粘贴到公钥内容框中，公钥标题可自定义 。

生成静态文件并部署

• 生成静态文件：在 Hexo 项目目录下的命令行中输入 hexo generate ，或使用简写命令 hexo g ，Hexo 会根据你的文章和主题配置生成静态文件，存放在 public文件夹中 。
• 部署到码云：执行 hexo deploy ，或简写为 hexo d ，此时 Hexo 会将 public文件夹中的静态文件推送到码云仓库中。

开启 Gitee Pages 服务

• 进入服务页面：在码云仓库的主页找到 “服务” 选项，点击后可看到 “Gitee Pages”，点击跳转至 Gitee Pages 服务页面。
• 开启服务：在 Gitee Pages 服务页面中，点击 “启动” 按钮开启服务，服务开启后，你的博客即可通过 https://yourusername.gitee.io访问，其中 yourusername为你的码云账号用户名。

设置 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 等）。部署完成后，读者就可以通过博客的网址访问到新发布的文章。

绑定域名

打开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