0. Hexo+Github_Pages

前言

什么是Github_Pages

GitHub Pages 可以将我们托管在 GitHub 上的一个仓库中的 html、css 和 js 代码渲染成静态页面。当然，这个仓库是特殊的，所以每一个 GitHub 账户只能够育一个这样的仓库。将相应的博客内容上传到 GitHub 上之后，我们就可以通过 https://www.username.github.io 来访问自己的博客，这里的 username 要换成自己的用户名。

什么是Hexo

Hexo 是使用 nodejs 开发的一个快速、简洁、高效的静态博客生成器。Hexo 使用 Markdown 语法解析文章，然后渲染成相应的网页，然后我们将渲染好的网页代码上传到 GitHub 上就可以了。简单来讲，利用 Hexo，我们只需要使用 Markdown 语法写文章，剩下的事情全部交给 Hexo 去做，我们就可以看到想要的博客效果了。

配置这个你需要

  • Git&Github
  • nodejs&npm
  • hexo

1. 安装 Hexo

npm install hexo-cli -g

终端执行hexo -version出现 Hexo 版本号，说明安装成功

2. 本地建站

2.1. 初始化

找到要存放博客的目录，进入终端执行：

hexo init blogs
cd blogs
npm install

_config.yml 存放的是博客配置信息， source/_posts 是存放文章的地方。

2.2. 预览

打开终端，进入项目根目录执行：

hexo clean 		# 清除缓存文件，建议写完文章后执行一次
hexo g		# 生成 public 文件夹，写完文章执行
hexo s		# 启动 hexo 服务

浏览器访问 http://localhost:4000/ 出现下图说明启动成功

2.2.1. 关于修改hexo启动的端口

默认使用4000端口。

暂时修改启动端口：

hexo s -p 80

永久修改启动端口：

vim node_modules\hexo-server\index.js

修改其中默认的port值。

2.3. 更换主题

详细操作方式见相应主题文档。

3. 博客部署

登录 GitHub，新建一个 Repository，Repository name可以是yourusername.github.io，

打开博客目录下的_config.yml，拉到最后，填写deploy模块：repository 填写Github仓库的链接

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: 
  repository: git@github.com:yourusername/yourusername.github.io.git
  type: git
  branch: main

现在可以将博客部署上去了，执行

hexo clean
hexo g
hexo d  # hexo d 表示执行部署

执行成功可以通过 yourusername.github.io 来访问博客了，至此搭建博客并部署已全部完成。

4. 图床

该部分转载自：[https://blog.csdn.net/zyq55917/article/details/125182027]

Hexo 博客站点搭建完成之后，需要考虑如何在文章中添加图片或视频。创建图床的目的是为本地图片等资源生成一个超链，然后将此连接嵌入到 markdown 编写的博客文章中，以此来解决博客中图片等资源的显示问题。

4.1. 下载 PicGo

PicGo 是一款图片上传的工具，目前支持 SM.SM图床、微博图床，七牛图床，腾讯云COS，阿里云OSS，又拍云，Github 等图床，未来将支持更多图床。
点击 [https://github.com/Molunerfinn/PicGo/releases] 下载 PicGo 工具。根据操作系统选择对应的版本，安装到指定目录。

PicGo官方文档：https://picgo.github.io/PicGo-Doc/zh/guide/#picgo-is-here

4.2. 创建 Github 仓库

在新建仓库页面，填入仓库名称，如 resources，名称可以随意填写。仓库类型选择 public。

如果已有仓库，跳过这一步。

4.3. 生成 Github Token

  • 点击右上角的头像， 选择 Settings 进入设置页面。

  • 在打开的页面中， 点击 Developer settings 设置页面。

  • 进入到权限设置的页面中， 这里选择使用 Personal access tokens。

  • 并点击 Generate new token 生成一个新的 token。

  • 填写一个描述信息， 用于我们区分 token 主要是用于做什么， 多个不同的授权码最好分开使用。 这样即使泄露也只是这一个库。勾选 repo 选项， 点击 Generate token 生成授权码。

  • token 有时间限制，过了有效期后需要重新生成。

  • 记住这个授权码， 关闭页面就没有了， 只能重新生成了

4.4. 图床信息

  • 设定仓库名： 根据你刚刚创建的仓库加上你的用户名.

  • 设定分支： 这里使用主分支 main。

  • 设定Token：这里就是我们刚刚生成的授权码 token， 复制到这里即可。

  • 存储路径：这里就是你的图片实际存放的地址，可以自己定义。这里使用 images/。

4.5. 图床测试

上传一个图片进行测试。在上传区拖入一张图片。 然后就可以看到系统提示上传成功。

然后点击相册，可以看到我们刚刚上传的图片。

经过测试， 如果两个相同的文件上传， 第二次就会上传失败。

4.6. 配置 Markdown

4.6.1. 插入图片

本文使用 Typora 工具。在 “格式” 菜单中选择 “图像”，插入图像元素。
在图片路径中填入从 PicGo 中复制的图片链接。

4.6.2. 插入视频

以 B 站为例，在分享界面中复制嵌入代码。粘贴到 Markdown 文件中。

得到如下代码段：

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=113629097689624&bvid=BV13qqkYuEGo&cid=27276019315&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

直接嵌入后的视频窗口高度太小，我们调整如下：

height="500"

调整后的代码如下：

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=113629097689624&bvid=BV13qqkYuEGo&cid=27276019315&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" height="500" allowfullscreen="true"></iframe>

4.6.3.插入GIF

<iframe height=100 width=100 src="gif 图片地址">

4.6.4. 更新内容

在站点根目录下执行以下命令将站点内容更新到 Github Pages

hexo clean
hexo g
hexo d

执行完成后，稍等片刻，打开站点就可以看到了。

以上部分转载自：https://blog.csdn.net/weixin_46599489/article/details/135585622

5. CDN配置（可选）

jsDelivr：官方文档
https://www.jsdelivr.com/?docs=gh

CDN：内容分发网络

https://blog.csdn.net/weixin_45863010/article/details/139453879

设定自定义域名：可选。

这里就需要用到 jsDelivr 加速功能。 因为 GitHub 国内访问过慢， 所以使用它进行加速。

查看官方文档可知

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file

// load jQuery v3.6.4
https://cdn.jsdelivr.net/gh/jquery/jquery@3.6.4/dist/jquery.min.js

// use a version range instead of a specific version
https://cdn.jsdelivr.net/gh/jquery/jquery@3.6/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
https://cdn.jsdelivr.net/gh/jquery/jquery@3.6.4/src/core.min.js

// add / at the end to get a directory listing
https://cdn.jsdelivr.net/gh/jquery/jquery/

我们只要将PicGo 中复制的图片链接，按照官方文档要求修改为

https://cdn.jsdelivr.net/gh/user/repo@version/file

即可。然后重新部署到博客

6. 体会

一定一定一定要会看官方文档！

在建站的过程中，出现了各种问题，搜了各种别人写的博客资料，都很难解决问题。最后仔细看了看官方文档，发现官方文档内写的很清楚，问题也得到了很好的解决。看官方文档是解决问题的最佳方式。

另附：

hexo官方文档：https://hexo.io/zh-cn/docs/

butterfly主题官方文档：https://butterfly.js.org/

参考博客：https://blog.csdn.net/clearloe/article/details/139879493