使用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那里你克隆下来得文件夹是什么名字就填什么名字
这里放上我自定义后的博客主题：
其他高级使用技巧
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
