Hexo静态博客搭建（Windows）

环境

node 16.12.0
npm 6.14.10

安装cnpm

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

查看是否安装成功cnpm -v

全局安装hexo

1	cnpm install -g hexo-cli

查看是否安装成功hexo -v

初始化hexo

进入自己创建的一个文件夹初始化hexo

启动hexo

访问本地4000端口

创建文章

之后可直接找到博客打开直接编辑（markdown格式）

三连环本地启动hexo

初步解决图片上传问题

修改博客配置

修改博客根目录中的_config.yml文件的配置项post_asset_folder为true

完成此设置后，当你通过hexo new 文件名新建博客后，会产生一个和文件同名的文件夹。之后将图片放入该文件夹即可
下载插件

在博客根目录中下使用npm安装插件（科学上网）

npm install https://github.com/CodeFalling/hexo-asset-image --save
重新三连环

hexo clean

hexo g

hexo s
效果

Gitee创建仓库

仓库名称得跟用户名保持一致，不然后面会有不必要的麻烦。例如页面没有样式包括图片也不会有（这个坑已经被我踩过了），应该是路径的问题导致的。

开启page服务

Gitee仓库开启page服务，需上传身份信息

上传身份信息

开启page服务

在gitee项目处点击服务-GiteePages
部署分支选择master
部署目录为空
强制开启https
启动：如果之前仓库名称随便取，io后面还会跟上/仓库名。估计就是这个路径问题导致的样式图片加载不了

关联hexo与gitee

配置根目录_config.yml文件，将url改成page服务的地址，repo为gitee的仓库克隆地址。

注意：配置项k，v之间需加上空格

这样就完成了整个博客的搭建和部署
之后在source/_posts目录下写博客然后再上传到gitee即可

将项目上传到gitee

#在根目录下运行如下命令安装自动发布工具
npm install hexo-deployer-git --save

#上传项目
hexo clean && hexo g && hexo d

更新page服务

效果：

这时博客已经可以被访问了

自动化部署与更新

每次写完博客都要进行代码的上传同步，然后在GiteePages下更新才能看到之后的效果（更新之后浏览器要清除缓存），为了避免这个麻烦的操作，使用如下脚本进行简化

在博客目录下安装自动部署插件
1
npm i puppeteer

在Hexo博客的根目录下创建一个gitee.js文件，内容如下（填写自己的账号和密码）

const puppeteer = require("puppeteer");

async function giteeUpdate() {
  const browser = await puppeteer.launch({
    // 此处可以使用 false 有头模式进行调试, 调试完注释即可
    // headless: false,
  });
  const page = await browser.newPage();

  //刚刚push完等待2秒
  await page.waitForTimeout(2000);
  //进入Gitee的登录页面
  await page.goto("https://gitee.com/login");
  // 1. 选中账号控件
  let accountElements = await page.$x('//*[@id="user_login"]'); // 此处使用 xpath 寻找控件，下同
  // 2. 填入账号
  await accountElements[0].type("xxxxxxxxxxxx");
  // 3. 选中密码控件
  let pwdElements = await page.$x('//*[@id="user_password"]');
  // 4. 填入密码
  await pwdElements[0].type("xxxxxxxxxx");
  // 5. 点击登录
  let loginButtons = await page.$x(
    '//*[@id="new_user"]/div[1]/div/div/div[4]/input'
  );
  await loginButtons[0].click();
  // 6. 等待登录成功
  await page.waitForTimeout(3000);
  // 改成博客pages服务页面
  await page.goto("https://gitee.com/non_existent/non_existent/pages");
  // 7.1. 监听步骤 7 中触发的确认弹框，并点击确认
  await page.on("dialog", async (dialog) => {
    console.log("确认更新");
    dialog.accept();
  });
  // 7. 点击更新按钮，并弹出确认弹窗
  let updateButtons = await page.$x('//*[@id="pages-branch"]/div[6]');
  await updateButtons[0].click();
  // 8. 轮询并确认是否更新完毕
  while (true) {
    await page.waitForTimeout(2000);
    try {
      // 8.1 获取更新状态标签
      deploying = await page.$x('//*[@id="pages_deploying"]');
      if (deploying.length > 0) {
        console.log("更新中...");
      } else {
        console.log("更新完毕");
        break;
      }
    } catch (error) {
      break;
    }
  }
  await page.waitForTimeout(2000);
  //10.更新完毕，关闭浏览器
  browser.close();
}

giteeUpdate();

实现原理就是通过xpath通过对应页面id修改对应或者点击标签。

例如点击登录按钮就是查找id为new_user的表单，之后逐层往下找div，之后找到想要的input就是登录按钮。后面如果官网页面改变了，换汤不换药。

然后在桌面创建一个UpdateBlog.sh自动更新脚本，博客的根目录根据自己的实际情况填写

路径注意是 / 而不是 \\

#!bin/bash
cd D:/Projects/hexoblog
echo "已经切换到hexoblog目录"
hexo clean && hexo g && hexo d
echo "博客Push完毕！"
node ./gitee.js
read -p "按任意键退出！"

最后每次更改完博客之后，在桌面上双击运行shell脚本即可自动更新博客，免去手动重新部署的烦恼。
测试

更改hello-world

双击shell

效果