Gitee Page搭建个人博客

# Gitee Page搭建个人博客

# 说明

使用 vuepress + vuepress-theme-reco 框架作为博客模板

使用 码云 Gitee Page 服务作为博客仓库

# 创建仓库

登录码云，创建一个仓库，仓库名随意。（本次创建仓库名为 xiaoc-blog）
设置仓库属性。由于仓库存放 MD 源文件且本次脚本中存在登录凭证，建议选择私有。
创建第二个仓库，仓库名为自己的 自己码云的个性地址，本次创建仓库名为 xiaocJee。

Gitee Pages服务使用说明 (opens new window)

# 本地操作

下载博客模板，依据个人选择，本次选用码云上本人自定义的博客模板。

博客模板地址 (opens new window)
下载完成后，进入模板文件夹。
初始化

git init
设置仓库远程地址。这里选择第一个，存放 MD 文件源码的仓库，仓库地址从码云获取。(建议使用 ssh 链接。本次使用 ssh)

git remote add origin xx.git
安装依赖

npm install
本地运行

npm run dev

如无报错，即模板配置成功

# 项目配置

在 package.json中配置

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh", //添加执行脚本命令
    "update": "node update.js" // 添加码云Gitee Pages服务自动更新脚本
  },
}

项目根目录下创建 deploy.sh 脚本构建文件

#!/bin/bash

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
echo -e '\033[32m打包生成静态文件...\033[0m'
yarn build

time=$(date "+%Y-%m-%d %H:%M:%S")

cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME

echo -e '\033[32m执行Git...\033[0m'
git init
git add -A
git commit -m "deploy $time"

echo -e '\033[32mGit提交...\033[0m'
# 如果你想要部署到 https://USERNAME.gitee.io
git push -f git@xx.git master # 仓库地址配置为第二个仓库的地址，此时是将打包后的文件提交到 Gitee Page 仓库

echo -e '\033[32m脚本更新Pages...\033[0m'
yarn run update
# 如果发布到 https://USERNAME.gitee.io/<REPO>  REPO=github上的项目
# git push -f git@gitee.com:USERNAME/<REPO>.git master:gh-pages

cd -

项目根目录下创建 update.js 脚本文件

此文件为配置 Gitee Pages服务自动更新的，可根据自身需要考虑是否配置

// 此处安装版本为 1.8.0
const puppeteer = require('puppeteer');

async function giteeUpdate() {
  const browser = await puppeteer.launch({
      // 此处可以使用 false 有头模式进行调试, 调试完注释即可
        headless: false,
  });
  const page = await browser.newPage();
  await page.goto('https://gitee.com/login');
  // 1. 选中账号控件
  let accountElements = await page.$x('//*[@id="user_login"]') // 此处使用 xpath 寻找控件，下同
  // 2. 填入账号
  await accountElements[0].type('xx') // 码云登录账户
  // 3. 选中密码控件
  let pwdElements = await page.$x('//*[@id="user_password"]')
  // 4. 填入密码
  await pwdElements[0].type('xx') // 码云登录密码
  // 5. 点击登录
  let loginButtons = await page.$x('//*[@id="new_user"]/div[2]/div/div/div[4]/input')
  await loginButtons[0].click()
  // 6. 等待登录成功
  await page.waitFor(1000)
  await page.goto('https://gitee.com/xx/xx/pages'); // 自己的码云仓库的pages页面地址 比如： https://gitee.com/xiaocjee/xiaocjee/pages
  // 7.1. 监听步骤 7 中触发的确认弹框，并点击确认
  await page.on('dialog', async dialog => {
      console.log('confirm...')
      dialog.accept();
  })
  // 7. 点击更新按钮，并弹出确认弹窗
  // let updateButtons = await page.$x('//*[@id="pages-branch"]/div[7]')
  // let updateButtons = await page.$x('//*[@class="start_deploy"]/div[7]')
  // await updateButtons[0].click()

  page.click('div.update_deploy')
  // 8. 轮询并确认是否更新完毕
  while (true) {
      await page.waitFor(2000)
      try {
          // 8.1 获取更新状态标签
          deploying = await page.$x('//*[@id="pages_deploying"]')
          if (deploying.length > 0) {
              console.log('update...')
          } else {
              console.log('finish..')
              break;
          }
      } catch (error) {
          break;
      }
  }
  await page.waitFor(500);
  // 10.更新完毕，关闭浏览器
  browser.close();
}

giteeUpdate();

创建完成后需安装一个 node插件，执行： npm install puppeteer

# 操作流程

在本地编写 MD 文件后，使用 Git 提交到源码仓库
再在 git bash 中执行 deploy.sh 脚本，会触发构建操作，最后将打包的文件上传到 Gitee pages仓库
然后触发 update.js 脚本。自动登录 Gitee，进入 Gitee Pages服务页，自动更新仓库。

使用 CDN 加载项目静态资源 Github Pages 建立个人博客网站

xiaoc的博客

Choose mode

Gitee Page搭建个人博客

# Gitee Page搭建个人博客

# 说明

# 创建仓库

# 本地操作

# 项目配置

# 操作流程