一、环境要求

• Git
• NodeJs

这两个就根据自己的系统，到网上找教程进行安装吧！

二、开始搭建

1.安装hexo

npm install -g hexo

#如果没有速度就使用淘宝镜像
npm install --registry=https://registry.npm.taobao.org

2.初始化hexo

#在电脑上创建一个文件夹Hexo
cd Hexo

#初始化
hexo init

3.更换主题

• 我使用的是hexo-theme-fluid
• 更换主题的步骤请看使用说明就行了

4.配置博客

• 找到根目录下的_config.yml然后设置站点的名称、主题的名字、作者名称

5.本地预览博客

#编译项目
hexo g

#运行项目
hexo s

#在浏览器上就可以看到效果

三、部署博客到Gitee

1.首先创建一个仓库

• 公开即可
• 不用readme初始化

2.得到仓库的地址

3.配置文件中填写git信息

• 在_config.yml中填写git信息

# URL，为了防止博客样式不对
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://pixiao.gitee.io/blog/
root: /blog

#自动部署
deploy:
  type: git
  repo: https://gitee.com/pixiao/blog.git
  branch: master

4.发布项目到gitee

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

#发布博客，首次发布需要在shell中输入账号和密码
hexo clean && hexo g && hexo d 

#本地运行
hexo clean && hexo g && hexo s

5.Gitee Pages设置

• 在gitee项目处点击服务-GiteePages

• 部署分支选择master

• 部署目录为空

• 强制开启https

• 启动

6.Gitee更新博客

• 这样就完成了整个博客的搭建和部署

• 之后在source/_posts目录下写博客然后再部署到gitee即可

  hexo clean && hexo g && hexo d

四、自动化部署与更新

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

• 在博客目录下安装自动部署插件

  sudo npm i puppeteer

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

  // 此处安装版本为 1.8.0
  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('XXXXXXXXX')
      // 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[2]/div/div/div[4]/input')
      await loginButtons[0].click()
      // 6. 等待登录成功
      await page.waitForTimeout(3000)
      await page.goto('https://gitee.com/pixiao/blog/pages');
      // 7.1. 监听步骤 7 中触发的确认弹框，并点击确认
      await page.on('dialog', async dialog => {
          console.log('确认更新')
          dialog.accept();
      })
      // 7. 点击更新按钮，并弹出确认弹窗
      let updateButtons = await page.$x('//*[@id="pages-branch"]/div[7]')
      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();

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

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

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

五、报错&修复

TypeError [ERR_CONSOLE_WRITABLE_STREAM]: Console expects a writable stream instance for stdout

这个是node版本问题导致的，升级下node版本即可

使用n进行版本控制

安装

npm install -g n

下载完成后就可以使用 n 了。

利用 n 下载所需node

n 版本号

下载最新版本

n latest

删除某个版本

n rm 4.4.4

查看当前 node 版本

node -v

切换版本

$ n

  6.9.4
ο 7.4.0
  4.4.4

以指定的版本来执行脚本

$ n use 7.4.0 index.js