Skip to main content

2 posts tagged with "github"

View All Tags

· 3 min read
xiezipei

概述​

Docusaurus 是一个非常不错的文档构建工具，而 Vercel 是一个体验极佳的站点托管服务网站，两者结合可以快速搭建出较为完备的个人站点。

详细介绍见各自官网，这里主要说下流程和注意事项。

准备​

  1. Github、Vercel 注册账号
  2. 本地 Node 开发环境
  3. 个人域名（可选）

生成​

  1. 先去 Vercel 上 New Project，选择 Docusaurus 2 网站模版，同时用 Vercel 账号关联 GitHub 账号，新建站点关联 GitHub 仓库
  2. 项目创建完成后，等待 Vercel 构建好就能用它给出的域名访问了
  3. 打开项目，去 Settings 选择 Domains 就可以把你的域名关联上（需要去域名服务商加解析记录）
  4. 去 GitHub 克隆项目到本地，就可以进入调试了

调试​

本地调试要做的事情：

  1. Vercel 提供的 Docusaurus 2 版本过时了（alpha 版本），首先就是要把它升级到 beta 版本（这里让我踩了不少坑，浪费了不少时间）
  2. 参考 Docusaurus 官方文档，了解两个关键配置文件的使用：docusaurus.config.js 和 sidebars.js
  3. 构思网站内容的目录结构、文档文件命名

Docusaurus 升级​

# 检查版本
npx docusaurus --version

# 更新核心依赖
yarn upgrade @docusaurus/core@latest @docusaurus/preset-classic@latest

ducusaurus.config.js 参考​

// ...
themeConfig: {
    navbar: {
      title: 'Zipei Xie\'s Blog',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {
          to: 'docs/wiki/wiki-intro',
          label: 'Wiki',
          position: 'right',
        },
        {
          to: 'blog',
          label: 'Blog',
          position: 'right'
        },
        {
          to: 'docs/newsletters/newsletters',
          label: 'Newsletters',
          position: 'right'
        },
        {
          to: 'docs/recommend/recommend',
          label: 'Recommend',
          position: 'right'
        },
        {
          href: 'https://github.com/xiezipei/',
          label: 'GitHub',
          position: 'right',
        },
      ],
    },
},
// ...

sidebars.js 参考​

module.exports = {
  wiki: [
    'wiki/wiki-intro',
    {
      type: 'category',
      label: 'Angular',
      items: [
        {
          type: 'autogenerated',
          dirName: 'wiki/angular',
        },
      ],
    },
    {
      type: 'category',
      label: 'TypeScript',
      items: [
        {
          type: 'autogenerated',
          dirName: 'wiki/typescript',
        },
      ],
    },
    // ...
  ],
  newsletters: [
    {
      type: 'autogenerated',
      dirName: 'newsletters',
    }
  ],
  recommend: [
    {
      type: 'autogenerated',
      dirName: 'recommend',
    }
  ],
//   ...
};

结束​

把本地内容推动到 GitHub main 分支，就会触发 Vercel 自动构建，稍等一会你的站点就完成更新了。

这里我的做法一般是在本地新建个 draft 分支，推到 GitHub 后然后手动合并到 main 分支。

至此，你的站点就搭建维护好了！

· 2 min read
xiezipei

背景​

在 vscode 装上 WakaTime 插件后，每周邮箱都会收到 wakatime 的定期邮件，报告一周代码时间统计，部分截图如下所示：

wakatime-email-shot

有一天，看到一位大佬的 GitHub 主页出现了一个 Weekly development breakdown 的玩意，背后的数据来源也是 wakatime，使用的工具是 waka-box，于是自己也折腾搞了一个。

使用​

waka-box 在其仓库有使用说明，但这里有几个地方需要注意：

  1. 当你 fork 之后，需要在 action 页签开启相关功能
  2. 注意替换相关 token，如：Gist ID, GitHub Token, Wakatime Token
  3. 当你弄完之后发现 action 并没有触发，这是因为此时触发事件只有一种：UTC 零点时间，可以手动加上 push 触发事件，修改 .github/workflows/schedule.yml：
on:
  push:
    branches:
      - master
    pull_request:
      branches:
        - master
    schedule:
      - cron: "0 0 * * *"

修改并推送后，你会发现事件触发了，然后回到你的 GitHub 主页看到效果如下：

waka-box-display

参考​