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

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

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

我的博客如下所示：

萱仔的学习小屋

---------------------------------------------------------------------------------------------------------------------

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

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

1. 安装环境准备

1.1. 安装 Node.js

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

1. 下载 Node.js： 前往 Node.js 官网，选择适合操作系统的版本进行下载。推荐安装长期支持（LTS）版本。

2. 验证安装： 安装完成后，打开命令行工具（Windows 用户打开 PowerShell 或命令提示符，macOS/Linux 用户打开终端），输入以下命令查看 Node.js 和 npm（Node.js 包管理器）的版本：

   node -v npm -v 

1.2. 安装 Git

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

1. 下载 Git： 前往 Git 官网 下载适合系统的版本。

2. 验证安装： 安装完成后，在命令行中输入以下命令，查看 Git 是否成功安装：

   git --version 

1.3. 安装 Hexo

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

npm install -g hexo-cli 

 

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

hexo -v  

 

2. 初始化 Hexo 博客

2.1. 创建博客目录

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

mkdir myblog cd myblog 

 

2.2. 初始化 Hexo 项目

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

hexo init npm install 

 

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

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

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

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 等。

1. 安装主题： 比如安装 next 主题，进入博客目录执行以下命令：

   git clone https://github.com/next-theme/hexo-theme-next themes/next 

2. 修改配置： 打开 _config.yml 文件，将 theme 改为 next：

   theme: next 

3. 安装依赖： 主题可能有额外的依赖，进入 themes/next 目录后，运行：

   npm install 

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

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

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

4. 编写博客文章

4.1. 创建新文章

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

hexo new post "文章一" 

 

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

4.2. 编辑文章

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

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

 

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

4.3. 生成静态页面

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

hexo generate 
hexo g 也可以

 

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

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

hexo serve 
（hexo s也可以）

 

5. 部署博客

5.1. 部署到 GitHub Pages

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

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

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

branch: main 

 

安装 hexo-deployer-git 插件：

npm install hexo-deployer-git --save 

 

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

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: 部署到远程服务器

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

最简单的就是
hexo g
hexo d

这样就部署上去啦

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