基于Hexo和Github搭建个人博客

参考文章：https://blog.csdn.net/yaorongke/article/details/119089190

一、准备工作

1. GitHub账号

需要有一个GitHub账号，没有的话到官网申请一个。
注册很简单，不懂的话可以参考 GitHub申请账号

2. 安装Git

在自己电脑上安装好Git，hexo部署到GitHub时要用。
网上找篇教程或者参考 Git安装(Windows)

3. 安装NodeJS

在自己电脑上安装好NodeJS，Hexo是基于NodeJS编写的，所以需要安装NodeJS和npm工具。
网上找篇教程或者参考 NodeJS安装及配置(Windows)

二、创建仓库

进入github主页，创建仓库

填写仓库名，格式必须为<用户名>.github.io，然后点击Create Repository

点击creating a new file创建一个新文件，作为我们网站的主页。

新文件的名字必须为index.html，内容先随便写一个简单的，内容示例如下，填写之后点击Commit changes提交。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Dre4m1nd</title>
</head>
<body>
    <h1>Dre4m1nd的个人主页</h1>
    <h1>Hello ~</h1>
</body>
</html>

GitHub Pages中找到我们主页的地址为https://dre4m1nd.github.io/

浏览器中访问，展示成功。

三、安装Hexo

我们采用Hexo来创建我们的博客网站，Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。点击进入官网。

安装 Hexo

选定一个文件，之后空白处右键

1	npm install -g hexo-cli

查看版本

hexo -v

创建一个项目 Blog-Hexo 并初始化

本地启动

1 2	hexo g hexo server

浏览器访问 http://localhost:4000 ，页面默认主图风格如下

四、更换主题

Fluid主题

安装主题

载最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 Fluid

指定主题

1 2	theme: Fluid # 指定主题 language: zh-CN # 指定语言，会影响主题显示的语言，按需修改

如下修改 Hexo 博客目录中的 _config.yml：

创建「关于页」

首次使用主题的「关于页」需要手动创建：

1	hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout属性。

修改后的文件示例如下：

---
title: about
date: 2024-10-28 21:09:02
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

本地启动

1 2	hexo g -d hexo s

浏览器访问 http://localhost:4000，Fluid主题风格页面如下

五、创建文章

如下修改 Hexo博客目录中的 _config.yml，打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

执行如下命令创建一篇新文章，名为《测试文章》

1	hexo new post 测试文章

本地启动

1 2	hexo g -d hexo s

浏览器访问 http://localhost:4000，页面如下，文章添加成功

六、个性化页面展示

页面的标题等位置显示默认的文字，可以改下显示一些个性化的信息。

1. 浏览器tab页名称

修改根目录下 _config.yml 中的 title 字段。

主题目录 themes\Fluid 下 _config.yml 中的 blog_title 字段。

主题目录 themes\Fluid 下 _config.yml 中的 text 字段。

修改好配置后，页面效果如下，可以看到现在显示的内容变成了我们的个人信息。

七、发布到GitHub Pages

方式一

安装hexo-deployer-git

1	npm install hexo-deployer-git --save

修改根目录下的 _config.yml，配置 GitHub 相关信息

deploy:
  type: git
  repo: https://github.com/Dre4m1nd/dre4m1nd.github.io.git
  branch: main
  token: 输入自己的token

其中 token 为 GitHub的 Personal access tokens，获取方式如下图

第一次部署可能出现如下问题

浏览器登录最后一个链接，会出现，登录页面，之后登录并允许就好了

参考文章:https://blog.csdn.net/crisschan/article/details/136866137

浏览器访问 https://dre4m1nd.github.io/，部署成功

方式二

直接将 public 目录中的文件和目录推送至 GitHub仓库和分支中。