基于vitepress搭建的博客网实践记录这是本人基于1.0.0-alpha.4vitepress搭建的博客网并部署的实

初衷

::: tip 写作初衷实不相瞒,其实我本人一直就想建一个自己的博客(原因嘛!懂的都懂),但是因为懒,这件事一直没去执行,现如今我打算去做这么一件事,而第一篇文章嘛，想了很久还是分享一下我的搭建博客网站经历吧，大佬们请多多指教 :::

开篇

技术选型这一块:我这边选择的是:vitepress

快速上手

创建并进入一个新目录
```
mkdir Boom && cd Boom
```
初始化
```
yarn init
```
本地安装 VitePress
```
yarn add --dev vitepress
```

创建你第一篇文档

mkdir docs && echo '# index' > docs/index.md

在 package.json.添加一些 script

{
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "serve": "vitepress build docs && vitepress serve docs"
  }
}

配置

如果没有任何配置，这个站点将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，你需要在你的文档目录下创建一个 .vitepress 目录。所有 vitepress 相关的文件都将会被放在这里, 创建一个 article 目录存放您写的博客文章, 创建一个 assets 目录存放博客文章引用到的静态资源, 你的项目结构可能是这样：
```
  .
  ├─ docs
  │  ├─ .vitepress
  │  │  └─ config.js
  │  ├─ article
  │  ├─ assets
  │  └─ index.md
  └─ package.json
```
一个 vitepress 站点必要的配置文件是 .vitepress/config.js, 它应当导出一个 JavaScript 对象：

module.exports = {
  title: "Boom",
  description: "This is descriptive information.",
};

额外的需要被注入到当前页面的 HTML <head> 中的标签，每个标签都可以以 [tagName, { attrName: attrValue }, innerHTML?] 的格式指定，举个例子，增加一个自定义的 favicon：

module.exports = {
  head: [["link", { rel: "icon", href: "/logo.png" }]],
};

接下来需要配置一下侧边栏，下面是我的配置（仅供参考,详细配置见官网）

// docs/.vitepress/config.js
import sidebar from "./sidebar";
module.exports = {
  themeConfig: {
    sidebar,
  },
};

// docs/.vitepress/sidebar.js
const fs = require("fs");
const path = require("path");
const { resolve } = path;

const getMsg = (path = resolve(__dirname, "../article")) => {
  let res = fs.readdirSync(path);

  if (res) {
    let arr = res.map((item) => {
      if (String(item).endsWith(".md")) {
        return {
          text: item.split(".")[0],
          link: resolve(path, item),
        };
      } else {
        return {
          text: item.split(".")[0],
          items: getMsg(resolve(path, item)),
        };
      }
    });
    arr = arr.map((item) => {
      if (item.link) {
        item.link = translateDir(item.link);
      }
      return item;
    });
    return arr;
  } else {
    console.warn("无文章");
  }
};

function translateDir(path) {
  return path.replace(/\\/g, "/").split("docs")[1].split(".")[0];
}

export default {
  "/": getMsg(),
};

接下来需要配置一下导航栏，下面是我的配置（仅供参考,详细配置见官网）

// docs/.vitepress/config.js
import nav from "./nav";
module.exports = {
  themeConfig: {
    nav,
  },
};

// docs/.vitepress/nav.js
const nav = [
  {
    text: "其他",
    icon: "reco-message",
    items: [
      {
        text: "gitee",
        link: "https://gitee.com/laipz/day-record",
        icon: "reco-github",
      },
    ],
  },
];

export default nav;

另外假如您担心将来网站的博客文章过多导致检索不便，还可通过 themeConfig.algolia 选项来使用 Algolia 搜索

// docs/.vitepress/config.js
themeConfig: {
  algolia: {
    apiKey: "your_api_key",
    indexName: "index_name",
  },
},

接下来就是申请 algolia apiKey 了: 申请地址

部署

部署的话,作为静态的博客网站我们完全可以选择免费的静态服务器就可以了, 这里我选择的是 Gitee Pages 服务。我们只需要将代码 push 到我们的代码仓库之后开启 Gitee Pages 服务就可以了。

Gitee Pages

注意: 如果你准备发布到 https://<USERNAME>.gitee.io/ ，你可以省略这一步，因为 base 默认就是 "/" 。
注意: 如果你准备发布到 https://<USERNAME>.gitee.io/<REPO>/ ，也就是说你的仓库地址是 https://github.com/<USERNAME>/<REPO> ，则将 base 设置为 "/<REPO>/"。

反思

::: tip 反思到了这一步之后,似乎网站已经搭建完成了,以后您只需要安心写你 Markdown 笔记就好了。但是呢每一次更新网站也太浪费小编的时间了,是否有优化空间呢 :::

集成 husky,每次 commit 之前执行 build

当我写完一篇文章之后,我正兴致勃勃的想发布的时候，发现我 push 之前没有 buildo(╥﹏╥)o,于是乎我赶紧集成 husky

注意: husky 5.0 版本之后配置和之前不一样的哦!这里我使用的是 4.0 版本

package.json 加入 husky 配置

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "yarn build && git add ."
    }
  },
},

使用 puppeteer,简化发布流程

作为一名懒到极致的我来说:每一次都让我登录 gitee,并点击发布。也是一件很麻烦的事，于是乎。。。安排!

package.json 添加发布命令

// package.json
{
  "scripts": {
    "push": "node ./publish.js"
  },
},

项目根目录新增 publish.js 文件

// publish.js
// puppeteer 我安装版本为 1.8.0
const puppeteer = require("puppeteer");

// 主要原理在于使用xpath获取html页面dom元素，脚本代替小手自动触发点击事件
async function giteeUpdate() {
  const browser = await puppeteer.launch({
    // 此处可以使用 false 有头模式进行调试, 调试完注释即可
    headless: false,
    defaultViewport: {
      width: 1920,
      height: 900,
    },
  });
  const page = await browser.newPage();
  await page.goto("https://gitee.com/login");

  // 1. 自动输入账号密码
  let accountElements = await page.$x('//*[@id="user_login"]');
  await accountElements[0].type(config.user);
  let pwdElements = await page.$x('//*[@id="user_password"]');
  await pwdElements[0].type(config.password);

  // 2. 获取登录按钮，触发点击事件
  let loginButtons = await page.$x(
    '//*[@class="git-login-form-fields"]/div[4]/input'
  );
  await loginButtons[0].click();

  // 3. 等待登录成功
  await page.waitFor(1000);
  await page.goto(config.giteePage);

  // 4. 监听触发的确认弹框，并点击确认
  await page.on("dialog", async (dialog) => {
    console.log("确认更新");
    dialog.accept();
  });

  // 5. 点击更新按钮，并弹出确认弹窗
  let updateButtons = await page.$x('//*[@id="pages-branch"]/div[6]');
  await updateButtons[0].click();

  //6. 轮询并确认是否更新完毕
  while (true) {
    await page.waitFor(2000);
    try {
      // 获取更新状态标签
      deploying = await page.$x('//*[@id="pages_deploying"]');
      if (deploying.length > 0) {
        console.log("更新中...");
      } else {
        console.log("更新完毕");
        break;
      }
    } catch (error) {
      console.log(error);
      break;
    }
  }
  await page.waitFor(500);

  // 7.更新完毕，关闭浏览器
  browser.close();
}

giteeUpdate();