个人blog workflow

主要是静态web搭建，需求是将markdown转为静态web，并且自动兼容各种assets资源。 当前采用的方案是 obsidian + quartz + git + github pages方案，部署的话除了使用github pages还有个人服务器+nginx方案，流程如下。

1 obsidian端

obsidian主要约定如下配置：

内部链接类型: 基于仓库根目录的绝对路径 #尽可能简短的形式   #quartz会自动解析obsidian的链接 虽然这样对其他的笔记软件不那么友好 但是够简洁  暂时定为这个方案
 
使用Wiki链接: 开启   #quartz当前支持Wiki链接
 
附件存放位置: 当前文件所在文件夹下指定子文件夹中 #这样其实对一些笔记软件和git仓库在线查看markdown不太友好 但是quartz附件默认都是复制到根目录 如果使用文件所在文件夹新建的assets目录下的话 内部链接形式需要改为绝对位置 这个同样有缺点 所以还是选择仓库根目录来的实在  TODO 还是改为子文件夹了

创建templates文件夹存放模板，模板中文档属性需要设置draft为true，防止被发布:

---
title: paper read
draft: true
tags:
  - templates
---
 
content....
 

2 quartz

💻源码地址：jackyzha0/quartz: 🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites (github.com)

配置流程

🌐官方文档：Welcome to Quartz 4 (jzhao.xyz) ✨requirement：Quartz requires at least Node v20 and npm v9.3.1

安装Node.js

🌐官网：Node.js — 在任何地方运行 JavaScript (nodejs.org) windows上推荐使用winget+fnm安装，方便管理版本，当然没有其他版本需求的话使用msi预构建安装程序直接安装也可(卸载也通过这个或者找到系统node创建的开始菜单卸载脚本)。 winget+fnm:

# layouts.download.codeBox.installsFnm
winget install Schniz.fnm
 
# layouts.download.codeBox.fnmEnvSetup
fnm env --use-on-cd | Out-String | Invoke-Expression
 
# layouts.download.codeBox.downloadAndInstallNodejs
fnm use --install-if-missing 21
 
# layouts.download.codeBox.verifiesRightNodejsVersion
node -v # layouts.download.codeBox.shouldPrint
 
# layouts.download.codeBox.verifiesRightNpmVersion
npm -v # layouts.download.codeBox.shouldPrint

quartz构建

$ git clone https://github.com/jackyzha0/quartz.git
$ cd quartz
$ npm i
$ npx quartz create

quartz使用

随后在content中编辑内容，可以把content文件夹作为仓库使用obsidian打开。内容修改好后使用quartz编译即可。

在quartz.config.ts简单配置一下忽略文件夹如.git和baseUrl

baseUrl: "betteryimi.top",
ignorePatterns: ["private", "templates", ".obsidian", ".git"],

编译markdown主要用到的指令是build，即(默认)将content文件夹中的markdown文件转化为html到public文件夹，同时根据配置添加布局、样式之类的:

$ npx quartz build

在这之前有几处小修改： ✨font加载阻塞(是google font，有的网络环境有问题)

• 全局搜索fonts.googleapis.com改为fonts.loli.net.

✨点击代码框copy按钮复制到剪切板

• 由于浏览器的限制，没有证书的网站会不允许navigator.clipboard.writeText一键复制到粘贴板，需要退回到其他方式。主要修改quartz\components\scripts\clipboard.inline.ts

	  //quartz\components\scripts\clipboard.inline.ts 
	
	  //添加新的函数
      function copyToClipboard(textToCopy: string): Promise<void> {
        // navigator clipboard 需要https等安全上下文
        if (navigator.clipboard && window.isSecureContext) {
          // navigator clipboard 向剪贴板写文本
          return navigator.clipboard.writeText(textToCopy);
        } else {
          // 创建text area
          let textArea = document.createElement("textarea");
          textArea.value = textToCopy;
          // 使text area不在viewport，同时设置不可见
          textArea.style.position = "absolute";
          textArea.style.opacity = "0";
          textArea.style.left = "-999999px";
          textArea.style.top = "-999999px";
          document.body.appendChild(textArea);
          textArea.focus();
          textArea.select();
          return new Promise<void>((res, rej) => {
            // 执行复制命令并移除文本框
            document.execCommand('copy') ? res() : rej();
            textArea.remove();
          });
        }
      }
 
      function onClick() {
		//navigator.clipboard.writeText(source)修改为如下
        copyToClipboard(source).then(
          () => {...//剩下的不变

发布

将public文件夹关联到远程仓库并且push，如果使用github pages则需要上传到指定的仓库，并且设置好需要展示的分支，整体流程如下：

git init
git remote add origin https://github.com/BetterYimi/BetterYimi.github.io.git
#验证是否成功
git remote -v
# 提交当前全部内容
git add .
git commit -m "commit"
# 修改分支名 以blog为例
git branch -m blog
# 初次push
git push -u origin blog
# 后续推送直接(记得先add和commit)
git push

Note

为了免除每次git push都需要手动验证，可以采用ssh形式或者配置好github的密钥，修改系统的验证方式为store(首次需要手动登录). git config --system credential.helper store

✨个人服务器搭建的话可以pull仓库下来然后使用nginx创建web服务，见nginx

可以编写脚本一键完成build和push:

# 获取当前时间
$currentDateTime = Get-Date -Format "yyyy-MM-dd HH:mm"
 
# 执行 npx quartz build
Write-Output "Executing 'npx quartz build' in the current directory..."
$npxResult = npx quartz build
Write-Output $npxResult
 
# 检查 public 目录是否存在
$publicDir = Join-Path -Path (Get-Location) -ChildPath "public"
if (Test-Path -Path $publicDir) {
    # 进入 public 目录
    Set-Location -Path $publicDir
 
    # 执行 git add .
    Write-Output "Executing 'git add .' in the public directory..."
    $commitResult = git add .
    Write-Output $commitResult
 
    # 执行 git commit
    $commitMessage = "$currentDateTime"
    Write-Output "Executing 'git commit  -m \"$commitMessage\"' in the public directory..."
    $commitResult = git commit -m "$commitMessage"
    Write-Output $commitResult
 
    # 执行 git push
    Write-Output "Executing 'git push' in the public directory..."
    $pushResult = git push
    Write-Output $pushResult
 
    # 返回到原始目录
    # Set-Location -Path (Get-Location).Parent
} else {
    Write-Output "The 'public' directory does not exist."
}