使用GitHub+Hexo搭建个人博客网站

在正式部署之前先大体介绍一下GitHub和Hexo是什么？

GitHub是什么？

在这个组合中GitHub主要代码托管和网站托管平台的服务。

代码托管：

1.    GitHub 是全球最大的代码托管平台，基于 Git 版本控制系统。

想象 GitHub 就像一个巨大的、免费的、在线的保险箱（代码仓库/Repository）。 这个保险箱的特殊之处在于它不仅能存放东西，还能精确地记录你存放的每一件物品（文件）的所有修改历史。比如，你今天放了一个文件进去，明天修改了它，后天又修改了一点，GitHub 都会帮你记录下来每一次的改动，并且你可以随时查看任意一次修改前后的样子。这就是 Git 版本控制系统 的核心功能。

2.    你可以将 Hexo 博客的源代码（Markdown 文件、配置文件、主题文件等）存储在 GitHub 的代码仓库（Repository）中。这提供了版本管理和备份的功能。

Hexo 博客的“源代码”是什么？

当你用 Hexo 写博客时，你主要写的是 Markdown 文件（.md 文件），这些就是你博客文章的原始内容。

除此之外，还有：

配置文件（如 _config.yml）：决定了你博客的名字、副标题、使用的主题、菜单等等。
主题文件：决定了你博客的外观、布局、样式。

可能还有一些图片、自定义的代码等等。

所有这些东西（Markdown 文章 + 配置 + 主题 + 其他资源）合起来，就是你的 Hexo 博客的 “源代码”。它们是构成你整个博客项目的所有原始材料和设置。

网站托管 (GitHub Pages)：

GitHub 提供了一个名为 GitHub Pages 的免费静态网站托管服务。

你可以将 Hexo 生成的静态网站文件（即 public 文件夹中的内容）推送到 GitHub 仓库的特定分支（通常是 gh-pages 分支或 main 分支的特定目录），GitHub Pages 会自动将这些文件发布成一个网站，并提供一个免费的二级域名（如 username.github.io）。

Hexo 是什么？

1. 定义：
Hexo 是一个快速、简单且功能强大的博客框架。

2. 工作方式：
你使用 Markdown（或其它标记语言）来撰写文章，Hexo 会迅速生成包含精美主题的静态网页文件。

3. 核心优势：
（1）速度惊人：
由 Node.js 驱动，生成数百个文件只需几秒钟。
（2）简单易用：
安装和配置相对简单。
（3）功能强大：
•    • 支持 GitHub Flavored Markdown 的所有特性。
•    • 拥有强大的 API，可以无限扩展。
•    • 有丰富的插件支持大多数模板引擎（如 EJS, Pug, Nunjucks 等）。
•    • 可以轻松集成现有的 NPM 包（如 Babel, PostCSS, Less/Sass 等）。
（4）主题丰富：
拥有大量美观、功能丰富且可定制的主题供选择，也可以自己创建主题。就是原先的不好看还麻烦，可以用现成的
（5）部署便捷：
只需一条命令即可将生成的静态网站部署到 GitHub Pages、Heroku 或其他平台。hexo deploy

以上这些都不用记住，大概了解一下就可以
________________________________________
一、GitHub创建个人仓库
🚀 1. 准备工作
第一步  注册
先到GitHu上注册一个账号。 网址：https://github.com

第二步  创建一个存储库（repository）
登录成功之后，点击 GitHub 中的 New repository 创建新仓库，仓库名应该为：用户名 .github.io 。

✨ 2. 开始部署
第一步 下载Git，并创建ssh密钥
下载网址：https://git-scm.com/

下载好之后点击打开文件安装

其他默认就行。
安装好 Git 后，只需要进行下面的配置即可。
配置信息
1 git config --global user.name "你的GitHub用户名"
2 git config --global user.email "你的GitHub注册邮箱"

生成密钥
1 ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车即可，默认不需要设置密码。最后得到了两个文件(在C盘的.ssh文件夹中)：id_rsa和id_rsa.pub。


登上Github,右上角头像点设置

第二步 创建一个Github Pages repository
桌面右击Git bash here，键入以下命令：
git clone https://github.com/username/username.github.io

cd username.github.io
echo "Hello World" > index.html

git add --all
git commit -m "Initial commit"
git push -u origin main

详细的可以参考这个官方教程https://pages.github.com/ 写的更详细些。
按这个做完之后你就有了一个你的网址：
username.github.io
里面有一句 Hello World！然后就可以通过点击https://username.github.io. 访问你的网站！

二、Hexo

1.    接下来就是把某个好网站的所有文件拷贝到你的库里面【最后一步】

GitHub官方建议你使用博客生成工具 Jekyll ， 我推荐使用Hexo，虽然Jekyll原生支持GitHub。

看看它们的对比：

（1）部署方式：
•    • Jekyll + GitHub Pages：可以直接推源码，由 GitHub 自动构建。
•    • Hexo + GitHub Pages：你需要在本地先运行 hexo generate 命令生成静态文件（通常在 public 文件夹中），然后通过命令hexo deploy将这个 public 文件夹的内容推送到 GitHub 仓库（通常是 gh-pages 分支或者 main 分支的根目录/特定目录下），GitHub Pages 才会发布这些静态文件。
或者，你可以配置 GitHub Actions 等 CI/CD 工具来自动完成“生成”和“部署”这两个步骤。

（2）技术栈：
•    • Jekyll：主要由 Ruby 语言编写。
•    • Hexo：主要由 Node.js (JavaScript) 编写。

（3）生成速度：
•    • Jekyll：生成速度通常较慢，特别是对于包含大量文章的网站。
•    • Hexo：正如其官方文档所述，由 Node.js 驱动，生成速度非常快，即使是数百个文件也只需几秒钟 (Webpage )。

（4）本地运行：
Jekyll：需要在本地安装 Ruby 环境及其依赖（如 Bundler）。Hexo：需要在本地安装 Node.js 环境及其包管理器 npm/yarn。Node.js 的安装通常比 Ruby 环境更简单、更轻量。

所以，要使用Hexo，需要在你的系统中支持Node.js以及Git，Git我们前面已经装好了，只要装Node.js就好了！

第一小步 安装Node.js
网址：https://nodejs.org/en/download/
安装完成后，即可使用 npm 安装 Hexo。

第二小步 用npm安装Hexo
前提，先在D盘或者自己喜欢的盘符新建一个目录Hexo。
Hexo目录下右击Git bash here，然后键入指令：
npm install -g hexo-cli

第三小步 初始化博客
安装好 Hexo 后，马上就能使用了。首先初始化博客，在E盘新建一个文件夹MyBlog，用来放博客的文件，进入MyBlog文件夹，右击Git bash here，输入：
hexo init myBlog

第四小步 生成预览网页
接着，输入以下命令以启动服务器，你的网站会在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，无须重启服务器。
hexo s

第五小步 部署到GitHub服务器上
Hexo 提供了快速方便的一键部署功能，只需一条命令就能将网站部署到服务器上。但是必须 先在 _config.yml 中修改参数，一个正确的部署配置中至少要有 type 参数，例如：
1 deploy:
2  type: git

接着，键入
hexo d

就算完成了。

2.    Hexo 主题

hexo自带的主题是很朴素的！所以你博客一看就充满了贫穷的气味！咦~

所以，要想拥有一个炫酷的博客，那自然要换上一个高大上的主题喽~ 本博主使用的是hexo-theme-matery 这款主题。

在你的themes文件夹下单击右键Git Bash here 从github git clone 下主题到hexo的themes文件夹中。

git clone https://github.com/blinkfox/hexo-theme-matery.git

然后在hexo根目录中的_config.yml更换主题：
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-matery

注意一下啊theme那里你克隆下来得文件夹是什么名字就填什么名字

相关配置可以到https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/#toc-heading-18 自己定义。

这里放上我自定义后的博客主题：



其他高级使用技巧

1. 绑定独立域名
最后还可以去腾讯云买一个独属于自己的域名。 【这个的意思就是将username.github.io换成你自己的域名，相当于一个人换了另一个称呼，可以不用管啦，但是要买的话也不贵，便宜的一年也就十几块钱】

本博主买的是.top的那个，但是本博主懒，不配了。

2. live2d看板娘
本来想选她的，

但是跟着一位博主弄着弄着也成呆萌看板娘了不过还是不错滴， 后面有空懂得多了有空再改回来，先这样凑活凑活~如果有大佬非常希望能被指点指点

步骤是这样滴：
第一步 安装模块
npm install --save hexo-helper-live2d

第二步 下载模型
npm install live2d-widget-model-shizuku

第三步 配置_config.yml 文件
在Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置：
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  enable: true
  #enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-shizuku
    # use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 145
    height: 315
  mobile:
    show: true # 是否在移动设备上显示
    scale: 0.5 # 移动设备上的缩放
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.8