Hexo+Github Pages搭建个人博客(超详细教程)

GitHub创建个人仓库

第一步 注册

登录到 GitHub ，如果没有 GitHub 帐号，请使用你的邮箱注册 GitHub 帐号：https://github.com

第二步 创建一个存储库（repository）

登录成功之后，点击 GitHub 中的 New repository 创建新仓库，仓库名应该为：用户名 .github.io 。

第三步 下载Git，并创建ssh密钥

安装好 Git 后，只需要进行下面的配置即可。

配置信息

1 git config --global user.name "你的GitHub用户名"
2 git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥

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 master

详情可以参考这个官方教程 GitHub Pages 写的十分好懂，按这个做完之后你就有了一个你的网址 username.github.io，里面有一句 Hello World！然后就可以通过点击https://username.github.io.访问你的网站！

Hexo

现在离一个好网站只差一步了，接下来就是把某个好网站的所有文件拷贝到你的库里面。
GitHub官方建议你使用博客生成工具 Jekyll 。GitHub在库的设置里面还提供Jekyll主题选择。而我推荐使用Hexo生成工具。
要使用Hexo，需要在你的系统中支持Node.js以及Git，Git我们前面已经装好了，只要装Node.js就好了！
https://nodejs.org/en/download/
安装完成后，即可使用 npm 安装 Hexo。
桌面右击Git bash here，然后键入指令：

#在d盘放Hexo
cd d:/hexo
npm install -g hexo-cli

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

 hexo init myBlog

接着，输入以下命令以启动服务器，你的网站会在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，无须重启服务器。

hexo s

Hexo 提供了快速方便的一键部署功能，只需一条命令就能将网站部署到服务器上。
在开始之前，必须先在 _config.yml 中修改参数，一个正确的部署配置中至少要有 type 参数，例如：

1 deploy:
2   type: git

接着，键入

hexo d

即可部署到服务器了。

Hexo 主题

hexo自带的主题是很朴素的！所以你博客一看就充满了贫穷的气味！咦~
所以，要想拥有一个炫酷的博客，那自然要换上一个高大上的主题喽~
博主使用的是hexo-theme-matery 这款主题。
从github git clone 下主题到hexo的themes文件夹中，

然后在hexo根目录中的_config.yml更换主题：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-matery

然后，更新到服务器就能看到更换后的主题了！
当然，更详细的DIY,可以通过https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/，进行细致自定义。
这里放上我自定义后的博客主题：

其他高级使用技巧

绑定独立域名

最后还可以去腾讯云买一个独属于自己的域名。
这里贴上一个博主的教程。https://blog.csdn.net/heimu24/article/details/81159099

图床

图床可以去七牛云，但是，博主我偷了个懒，直接在CSDN发一个只粘贴了图片的博文，直接拿CSDN作为我的图床了。

live2d看板娘

发现好多的博客页面上有这样一个看板娘，身为老二刺螈，怎么可能放过呢？
嘿嘿嘿~
首先，先去github搜刮一遍，找到一个Star 3k 的live2d 开源包。
https://github.com/EYHN/hexo-helper-live2d
然后，根据它的readme,博主劈里啪啦操作了一番，简易步骤如下：

1、安装模块

在hexo根目录执行命令：

npm install --save hexo-helper-live2d

2、挑选中意的看板娘

live2d提供了一些现有的看板娘模型，当然，最好是自己捏，这里贴上live2d的官方网站，有兴趣的可以去学习一下如何捏老婆：https://www.live2d.com/
博主这里就直接使用官方提供的看板娘了!具体模型有：
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
当然看名字是看不出啥的啦！所以博主我，贴心的找了一给博主放的预览图：
Live2D看板娘+模型预览

3、下载模型及配置

挑选了自己中意的看板娘，下一步当然就是抱回家啦！
博主相中了live2d-widget-model-shizuku这名小可爱。

首先，下载模型：

---博主使用的模型shizuku
# npm install live2d-widget-model-shizuku

接着配置_config.yml 文件：
在Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置.
参阅 live2d-widget.js API

# 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

最后更新博客到github就好了！

看到没？我家的看板娘超级可爱！！！

总结

好了，大概过程就是这样了！最后贴上我的小破站地址。
青枫阁
欢迎诸位客官大老爷~~
完结撒花~