Cyanix Blog

切换主题

Blog_nolebase ​

标签
Blog
字数
1086 字
阅读时间
5 分钟

个人博客网站，基于 markdown + obsidian + vitepress

网站：

1 设置 ​

  1. Fork Jackiexiao/nolebase-template

  2. 安装 Nodejs / pnpm 后

    shell
    pnpm install # 安装
pnpm docs:dev # dev模式,本地查看文档
pnpm docs:build # 构建网站发布所需要的资源, build之后在 .vitepress/dist 下, 保证在本地能构建成功后再发布比较好

  3. 修改配置

    • index.md & metadata/index.ts 配置首页
    • .vitepress/creators.ts 添加个人信息

2 部署 ​

2.1 Vercel/CF Pages 部署 ​

  • 修改构建命令为 pnpm docs:build
  • 修改构建的输出目录为 .vitepress/dist

2.2 Github Pages 部署 ​

WARNING

Github Pages 部署有 BUG ，不推荐使用

由于 Github Pages 部署到 https://<username>.github.io/<repo>/，而 vitepress 默认构建路径是根目录 /，使用环境变量调整 base 以更换构建目录适配 domain

  • .vitepress/config.ts 添加

    ts
    // 设置基础路径，默认为根路径
const base = process.env.BASE_PATH || '/'

export default defineConfig({
  base
})

  • .github/workflows/production-deployment-to-github-pages.yaml 中添加(假设仓库名为 Blog_nolebase)

    yaml
    jobs:
  # 构建工作
  build:
    runs-on: ubuntu-latest
    steps:
# 设置环境变量，指定基础路径
      - name: Set base path environment variable
        run: echo "BASE_PATH=/Blog_nolebase/" >> $GITHUB_ENV

    示例 workflow

    yaml
    # 构建 VitePress 站点并将其部署到 GitHub Pages
#
name: Deploy VitePress site to Pages

on:
  # 在针对 `main` 分支的推送上运行。如果你
  push:
    branches: [main]

  # 允许你从 Actions 选项卡手动运行此工作流程
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # 构建工作
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要

      # 安装 pnpm
      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 8.0.0 # 可以根据需要指定版本
          run_install: true

      # 配置 Node.js
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm # 使用 pnpm 缓存

      # 设置环境变量，指定基础路径
      - name: Set base path environment variable
        run: echo "BASE_PATH=/Blog_nolebase/" >> $GITHUB_ENV

      # 安装依赖
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      # 构建 VitePress 站点
      - name: Build with VitePress
        run: pnpm docs:build

      # 上传构建的站点文件作为工件
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: .vitepress/dist

  # 部署工作
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

2.3 其他方式部署 ​

其他部署方式见原仓库的说明

3 Obsidian 的设置 ​

3.1 关于图片链接问题 ​

如果你的 markdown 中的图片链接没有在当前文件所在目录下，会解析出错，无法在 vitepress 中正确渲染。nolebase 支持双链，没问题可忽略。

解决方法： 推荐的 Obsidian Setting => Files and links 设置如下

  • New link format => Relative path to file
  • Use [Wikilinks](Wikilinks) => False
  • Default location for new attachments => In subfolder under current folder
  • Subfolder name => assets

这么做有几个好处

  • 保持兼容性的 markdown: 可以让文档也能在 github 中被正确渲染（github 无法解析 [双链](双链)）
  • 方便迁移文件和图片，你只需要把图片文件夹和 markdown 文件一起复制就行（如果是全部汇总在某个文件夹下，以后复制比较麻烦）

额外的 tips

  • 对于已有的笔记和图片链接，你可以考虑使用 obsidian 插件 obsidian-link-converter 来帮你做自动的转换 [wikilink](wikilink) 为 relative_path 的 markdown link
  • 同时，我建议使用这个 clear-unused-image 插件来帮助你清除无用的图片（但记得不要运行 clear attachment ，否则 vitepress 相关代码会被移除）

4 开启 Giscus 评论功能 ​

giscus 利用 GitHub Discussions 实现评论系统

  1. 访问 Giscus 网站，参考网站上的说明，一步步操作，最后得到一个配置代码
  2. 在 ./vitepress/theme/index.ts 中修改 giscus 相关配置，在该文件中搜索 giscusTalk, 参考说明，修改配置即可

5 其他 ​

通过 Github Actions 把博客仓库中的笔记同步到其他仓库，方便后续转移构建