主要是静态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
配置流程
🌐官方文档: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."
}