基于Hexo主题Fluid搭建GitHub博客

  使用 Hexo 框架和 GitHub Pages 上的 Fluid 主题创建博客，是创建个性化、专业化博客的好方法。

第一步：GitHub配置

1. 进入Git官网下载并安装。

git --version

2. 部署本地Git与GitHub连接

• 生成SSH-Key

ssh-keygen -t rsa -C *********@gmail.com

• 查看.pub文件(.文件隐藏文件，使用ls -a显示隐藏文件)

cd ~/.ssh # 切换目录到这个路径
vim id_rsa.pub # 将这个文件的内容显示到终端上

  也可以直接前往.shh文件所在的路径（前往~/.ssh这个路径），然后打开.pub这个文件，同样可以看到里面的内容。

• 将KEY添加到GitHub的SSH-Key里
• 右键打开git bash，设置用户名和电子邮箱（注：这里的用户名和邮箱为你的GitHub名称和绑定的邮箱）

git config --global user.name "****"
git config --global user.email "*********@gmail.com"

• 通过GitHub创建一个新的respository，名称为

GitHub_name.github.io

第二步：Node.js安装和环境配置

1. 进入Node.js官网下载并安装。

2. 查看版本号验证是否安装成功

node -v
npm -v #nodejs安装默认附带安装npm

3. 配置环境变量

• 在nodejs安装目录下创建node_global，node_cache两个文件夹（全局安装的模块路径和缓存路径）

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
# 如显示权限不够，用管理员打开cmd

  右键此电脑，点击属性，打开高级系统设置，环境变量，编辑系统变量，新建NODE_PATH变量，变量值为node_modules地址

• 再将用户变量下Path的

C:\Users\ruyic\AppData\Roaming\npm

修改为

D:\nodejs\node_global

第三步：下载Hexo并配置Fluid主题

1. 下载Hexo

  通过cmd用npm安装hexo并初始化本地博客文件夹

npm install -g hexo-cli
hexo init my-blog
cd my-blog  # 进入本地的博客文件夹
npm install
hexo server # 打开本地服务器预览

  之后通过浏览器查看http://localhost:4000是否成功

2. 配置Fluid主题

  详细步骤见：https://github.com/fluid-dev/hexo-theme-fluid

3. 部署到GitHub

  安装部署插件

npm install hexo-deployer-git --save

  修改博客根目录下的_config.yml文件

deploy:
  type: git
  repo: https://github.com/your-username/your-repo.git
  branch: main  # 注意自己创建的分支，我的是main，有可能是master

  再安装hexo-deployer-git自动部署发布工具，将hexo部署到 git page 的 deployer

npm install hexo-deployer-git --save
hexo d  # hexo deploy，如果本地服务器没问题就可以上传到github上

  更新博客之后，可以通过如下命令就行上传GitHub

# 清空缓存，有时候博客页面显示不正常也可以常试
hexo clean
# hexo generate的简写，把刚刚做的改动生成更新一下
hexo g
# 在本地服务器看看博客有没有更新：https://localhost:4000
hexo server
# hexo deploy，如果本地服务器看了没问题就可以上传到GitHub网站
hexo d    
# 一行同时实现清空缓存，生成静态文件，上传部署
hexo clean && hexo g && hexo d

第四步：美化

1. 背景图片网站：
   • https://pixabay.com
   • https://www.wallpaperhub.app