使用Vitepress将Obsidian仓库发布为静态网站

喜欢用Obsidian，又不喜欢装插件的，有没有？

Obsidian配置

0插件

用ob两年了，一个插件都没装，不想折腾。

wiki链接

ob中的[[ ]] 双链语法，在vitepress中是不支持的，所以我在ob的设置中关闭了wiki链接这个选项，不过ob厉害的是，用纯markdown语法[]()也可以实现双链功能。

VitePress

初始化

参考官网：快速开始 | VitePress

目录配置

我的目录配置，一级目录有点多，不过没关系，这样也方便查找东西。

├─.vitepress
├─.vscode
├─node_modules
└─posts
    ├─.obsidian
    ├─assets
    ├─echarts
    ├─essay
    ├─Inerview
    ├─Java
    ├─kd-shop
    ├─public
    ├─React
    ├─scaffold
    ├─templates
    ├─Threejs
    ├─TypeScript
    ├─vue
    └─web
        ├─CSS
        ├─HTML
        └─javascript
    └─more。。。
package.json

配置srcDir目录为ob仓库文件夹名，下次使用ob编辑文档时，直接打开post目录，这样ob内就不会显示vitepress脚手架相关的配置内容。

export default defineConfig({
	srcDir: "./posts",
	//按需：不想让vitepress渲染的文档在这里配置
	srcExclude: [".obsidian", 'templates', 'Clippings'], 
})

自动生成侧边栏

安装vite-plugin-vitepress-auto-sidebar 插件

import AutoSidebar from 'vite-plugin-vitepress-auto-sidebar';

export default defineConfig({
  srcDir: "./posts",
  srcExclude: [".obsidian", 'templates', 'Clippings'],
	vite: {
	    plugins: [
	      AutoSidebar({
	        path: '/posts', 
	        //按需： 忽略自动生成侧边栏的目录
	        ignoreList: ['public', 'assets', '.obsidian', 'templates', 'Clippings'],
	        ignoreIndexItem: true,
	        titleFromFile: true
	      })
	    ]
  }
})

导航栏

我在每个一级目录下放了index索引文件，这样导航栏配置只需到一级目录的文件夹名即可，vitepress回默认渲染当前文件夹下的index.md文件

nav: [
      { text: "🚩导航", link: "/nav" },
      { text: '📚前端', items: [
        { text: 'HTML+CSS+JS', link: '/web' },
        { text: 'TypeScript', link: '/TypeScript' },
        { text: 'Vue', link: '/vue' },
	    //...
      ]},
      { text: '📚后端', items: [
        { text: 'Node', link: '/node' },
        { text: 'Java', link: '/Java' },
        { text: 'Nest', link: '/Nestjs' },
      ] },
      { text: "✍随笔", link: "/essay" },
      { text: "🙋‍♀️关于我", link: "/about" },
    ],

markdown语法高亮

ob中的==标记内容== 在vitepress中默认是不支持的，安装vitepress插件即可在页面上渲染== == markdown语法

pnpm add -D markdown-it-mark

import markdownMark from 'markdown-it-mark';

export default defineConfig({
	//other config...
	markdown: {
	    config: (md) => {
	      md.use(markdownMark)
	    },
	},
})

部署

首先需要新建一个GitHub仓库，（公共私有均可），注册Vercel账号，绑定新建的Github仓库，Vercel会自动监听仓库的代码提交动作，自动部署。

具体操作参考：部署 VitePress 站点 | VitePress，很简单。

自定义域名

我用的Vercel部署，Vercel会有一个免费的域名，但是免费的域名在国内访问很慢，所以我绑定了自己的域名

Git（可选）

ob中安装git插件，可以自动触发提交操作