萱仔个人博客系列——hexo+github部署

由于本人前段时间和同专业得到好offer的同学之间的交流，发现博客其实对于找工作来说可以作为个人项目个人经历的展示，我创办cdsn博客的原因主要是为了自己学习使用，但是逐渐到现在也有了一些可爱的粉丝，非常感谢大家对我的点赞收藏和关注，我将继续精进自己的学习，学习理论和技术，刷力扣题，争取获得更好的offer。

csdn博客本身就是非常好的一个平台，但是我还是决定自己创建一个自己的博客，两边同时更新，在自己的博客那边可能会更加记录一下自己的学习过程，csdn这边尽量按照专栏进行更新，非常感谢各位大佬的支持和点赞！萱仔会加油的！

我的博客如下所示：

萱仔的学习小屋

我本人选择了简单的hexo+github部署，以下是创建的具体步骤，相当细节，但是由于当时我创建的时候忘记了截图，我会更加细致的介绍，然后会补充一些后面的图：

Hexo 是一个快速、简洁且高效的静态博客框架，适合用来搭建个人博客。下面是一个完整详细的 Hexo 搭建过程，涵盖从环境搭建到发布的所有步骤。

1. 安装环境准备

1.1. 安装 Node.js

Hexo 依赖于 Node.js，首先需要确保电脑上已经安装了 Node.js。通过以下步骤安装：

下载 Node.js ：前往 Node.js 官网，选择适合操作系统的版本进行下载。推荐安装长期支持（LTS）版本。
验证安装：安装完成后，打开命令行工具（Windows 用户打开 PowerShell 或命令提示符，macOS/Linux 用户打开终端），输入以下命令查看 Node.js 和 npm（Node.js 包管理器）的版本：
bash 复制代码
```
node -v npm -v 
```

1.2. 安装 Git

Hexo 使用 Git 进行版本控制与博客的部署。需要安装 Git：

下载 Git ：前往 Git 官网下载适合系统的版本。
验证安装：安装完成后，在命令行中输入以下命令，查看 Git 是否成功安装：
bash 复制代码
```
git --version 
```

1.3. 安装 Hexo

有了 Node.js 和 Git 后，就可以安装 Hexo 了。打开命令行工具，执行以下命令安装 Hexo：

bash 复制代码

npm install -g hexo-cli

安装完成后，输入以下命令查看版本确认安装成功：

bash 复制代码

hexo -v

2. 初始化 Hexo 博客

2.1. 创建博客目录

选择一个文件夹作为你的博客存放目录，然后在命令行中进入该目录：

bash 复制代码

mkdir myblog cd myblog

2.2. 初始化 Hexo 项目

在该目录中初始化一个新的 Hexo 博客项目，执行以下命令：

bash 复制代码

hexo init npm install

Hexo 会自动在该目录中生成必要的文件和文件夹结构。

2.3. 启动本地服务器查看效果

Hexo 提供了本地服务器，方便实时查看博客的效果。启动本地服务器：

bash 复制代码

hexo serve 
hexo s 也可以

然后在浏览器中访问 http://localhost:4000，你就能看到默认的 Hexo 博客页面了。

3. 配置 Hexo 博客

3.1. 修改 `_config.yml` 文件

Hexo的个人博客的配置信息都保存在那个项目根目录的 _config.yml 文件中。我这里是用了文本文件打开它，修改以下常见配置：

title: 博客标题
subtitle: 博客副标题
description: 博客描述
author: 博客作者名称
language : 博客语言，设置为 zh-CN 代表中文
url: 博客的网址（在发布时需要设置）

3.2. 安装主题

Hexo 默认主题是 landscape，但你可以选择更加个性化的主题。常见的主题包括 next、butterfly、fluid 等。

安装主题 ：比如安装 next 主题，进入博客目录执行以下命令：
bash 复制代码
```
git clone https://github.com/next-theme/hexo-theme-next themes/next 
```
修改配置 ：打开 _config.yml 文件，将 theme 改为 next：
bash 复制代码
```
theme: next 
```
安装依赖 ：主题可能有额外的依赖，进入 themes/next 目录后，运行：
bash 复制代码
```
npm install 
```

3.3. 配置菜单、链接、社交媒体

主题通常会提供配置菜单、友情链接、社交媒体图标等功能。你可以在主题的 _config.yml 文件中找到相应的配置。

例如，Next 主题下的 _config.yml 可以找到 menu 和 social 相关配置，修改这些参数可以自定义菜单和社交媒体链接。

4. 编写博客文章

4.1. 创建新文章

Hexo 通过 Markdown 格式编写文章。你可以使用以下命令创建新文章：

bash 复制代码

hexo new post "文章一"

文章会生成在 source/_posts 目录下，文件名为 我的第一篇文章.md。

4.2. 编辑文章

使用你喜欢的文本编辑器打开该 Markdown 文件，进行编辑。文章的头部会有如下信息：

bash 复制代码

title: 我的第一篇文章 
date: 2024-09-02 10:00:00 
tags: ---

可以根据需要修改标题、日期、添加标签等。

4.3. 生成静态页面

完成文章编辑后，你可以生成静态页面，执行以下命令：

bash 复制代码

hexo generate 
hexo g 也可以

4.4. 启动本地服务器查看效果

再次启动本地服务器查看新文章效果：

bash 复制代码

hexo serve 
（hexo s也可以）

5. 部署博客

5.1. 部署到 GitHub Pages

然后就是将博客部署到 GitHub Pages 上，需要先创建一个 GitHub 仓库，并将其命名为 自己的名字.github.io。

然后修改 _config.yml 文件中的 deploy 部分，配置如下：

bash 复制代码

deploy: 
type: git 
repo: https://github.com/自己的名字/自己的名字.github.io.git 

branch: main

安装 hexo-deployer-git 插件：

bash 复制代码

npm install hexo-deployer-git --save

执行以下命令部署博客到 GitHub Pages：

bash 复制代码

hexo clean 
hexo generate 
hexo deploy

5.2. 部署到其他平台

除了 GitHub Pages，你也可以将博客部署到其他平台，比如 Coding Pages 或者自建服务器。只需要根据平台的部署方式修改 _config.yml 配置即可。

6. 备份博客

建议你将博客的源代码和配置文件备份到 GitHub 或者其他版本控制工具中，防止数据丢失。你可以将整个项目目录提交到一个独立的仓库进行管理。

7. 常用 Hexo 命令总结

hexo init: 初始化一个 Hexo 项目
hexo new "文章标题": 创建新文章
hexo generate: 生成静态文件
hexo serve: 本地启动服务器
hexo clean: 清理缓存文件
hexo deploy: 部署到远程服务器

bash 复制代码

hexo init: 初始化一个 Hexo 项目
hexo new "文章标题": 创建新文章
hexo generate: 生成静态文件
hexo serve: 本地启动服务器
hexo clean: 清理缓存文件
hexo deploy: 部署到远程服务器

最简单的就是
hexo g
hexo d

这样就部署上去啦

通过以上步骤，我成功搭建一个 Hexo 博客，并通过 GitHub Pages 等平台发布你的博客内容。如果你有更多自定义需求，还可以进一步探索 Hexo 的插件和配置文件。

萱仔个人博客系列——hexo+github部署

1. 安装环境准备

1.1. 安装 Node.js

1.2. 安装 Git

1.3. 安装 Hexo

2. 初始化 Hexo 博客

2.1. 创建博客目录

2.2. 初始化 Hexo 项目

2.3. 启动本地服务器查看效果

3. 配置 Hexo 博客

3.1. 修改 _config.yml 文件

3.2. 安装主题

3.3. 配置菜单、链接、社交媒体

4. 编写博客文章

4.1. 创建新文章

4.2. 编辑文章

4.3. 生成静态页面

4.4. 启动本地服务器查看效果

5. 部署博客

5.1. 部署到 GitHub Pages

5.2. 部署到其他平台

6. 备份博客

7. 常用 Hexo 命令总结

3.1. 修改 `_config.yml` 文件