obsidian2web

Author

  • chenxuan

仓库地址

仓库说明

  • ==快速将你的obsidian笔记部署到网络上,并且根据git自动更新,或者生成笔记的静态资源文件的方法==

  • 使用 mdbook 和 obsidian-export 加上 github的cicd和page实现,并且进行优化,优化参考

  • 需要有一定的git和github的使用基础

Quick Start

视频教程

需要部署到github-page

  1. fork这个仓库

  2. 开启github-action 仓库界面 -> Actions -> Enable

  3. 添加token的权限:仓库界面 -> Setting -> Action -> General -> Workflow permissions -> 点击 Read and write permissions

  4. 设置page: 仓库界面 -> Setting -> Pages -> Build and deployment -> Source 设置为 Github Actions

  5. 将自己的obsidian笔记放入example下面(或者通过拷贝或者链接这种)

  6. 每次更改之后直接 push 到github会自动触发github page的部署流程

现有仓库需要使用

  1. 将这个仓库作为 submodule 添加

  2. cicd 中拉取时候携带 submodule 一起拉取

  3. 和上面相似步骤, 但是需要自己编写cicd文件, cicd文件参考

只需要生成静态文件,不需要部署

这个仅适用于linux(因为作者是linux系统)

  1. clone 这个仓库

  2. 运行 init.sh 下载mdbook和 obsidian-export 这一步默认下载linux版本的,如果需要其他系统版本的,请自行下载

  3. 运行 create.sh <你的仓库的路径>,此时生成的book文件夹就是需要的静态文件,你可以自己通过自己的服务器进行部署

特性

方式对比

  • 当前实现obsidian笔记在web展示的常用方法
方式支持仓库结构导出速度自动化程度自动化部署特性完整性支持国内访问是否收费
obsidian webpage插件
支持慢,在obsidian进行导出,必须打开obsidian需要手动点击按钮等待导出,必须打开obsidian只支持生成webpage,没办法直接实现自动化部署几乎完整支持obsidian所有特性引用了一些很慢的css资源导致加载速度很慢免费
obsius插件不支持,只能单偏文档快速,但是不稳定,取决于网络和服务器对某个笔记右键直接部署到别人服务器上,不一定稳定支持基本的obsidian的特性不稳定,因为是国外的网站免费,但是不稳定
obsidian2web支持快速,直接用md导出的和git结合,和git插件可实现无感化更新部署方式多种,可以选择githubpage部署,也可以选择生成静态webpage自己部署支持基本的obsidian的特性所有css和js文件全部内置,加载速度快免费
obsidian-digital-garden如支持,没有目录树快速,因为是单篇发布前期需要注册帐号等一系列麻烦操作,单篇发布和obsius插件类似支持基本的obsidian的特性引用了一些很慢的css资源导致加载速度很慢免费
官方发布服务支持快速高高支持全部特性正常,加载速度还可以8刀一个月

QA

如何更改网页book的名字和链接等

  • 在仓库的 book.toml 内是书籍的配置信息, 含义参考 mdbook
  • 如果你觉得这个仓库对你有帮助,可以给个免费的star⭐ ; )

obsidian2web

Author

  • chenxuan

Repository Address

Repository Description

  • ==Quickly deploy your obsidian notes to the web, and automatically update them according to git, or generate static resource files for notes==

  • Using mdbook and obsidian-export with GitHub's cicd and page implementation, and optimization, optimization reference

  • Requires a certain level of git and GitHub usage

Quick Start

Video Tutorial

Need to deploy to GitHub page

  1. Fork this repository

  2. Enable github-action repository page -> Actions -> Enable

  3. Add token permissions: Repository page -> Setting -> Action -> General -> Workflow permissions -> Click Read and write permissions

  4. Set page: Repository page -> Setting -> Pages -> Build and deployment -> Source set to Github Actions

  5. Put your obsidian notes under example (or copy or link)

  6. After each change, push directly to GitHub to automatically trigger the deployment process of the GitHub page

Repository in use

  1. Add this repository as a submodule

  2. Pull submodule along with repository in CI/CD

  3. Similar steps as above, but you need to write your own CI/CD file, CI/CD file reference

Only need to generate static files, no need to deploy

This is only applicable to linux (because the author is using a linux system)

  1. Clone this repository

  2. Run init.sh to download mdbook and obsidian-export. This step defaults to downloading the linux version. If you need another system version, please download it yourself

  3. Run create.sh <path to your repository>, at this point the generated book folder is the required static file, you can deploy it on your own server

Features

Comparison of Methods

  • Current implementation of commonly used methods for displaying obsidian notes on the web
MethodRepository Structure SupportExport SpeedAutomation LevelAutomated DeploymentFeature Completeness SupportDomestic AccessFree
obsidian webpage plugin
SupportedSlow, must be done in obsidian, obsidian must be openRequires manual clicking and waiting for export, obsidian must be openOnly supports webpage generation, cannot be directly deployed automaticallyAlmost complete support for all obsidian featuresSlow loading due to slow css resourcesFree
obsius pluginNot supported, only single documentFast, but unstable, depends on network and serverRight-click on a noteDeploy directly to someone else's server, not necessarily stableBasic support for obsidian featuresUnstable, as it is a foreign websiteFree, but unstable
obsidian2webSupportedFast, exported directly from mdCombined with git, can be seamlessly updated and deployed with git pluginMultiple methods, can choose github page deployment, or generate static webpage for self-deploymentBasic support for obsidian featuresAll css and js files are built-in, fast loadingFree
obsidian-digital-gardenSupports, no directory treeFast, because it is a single-page releaseEarly registration and other troublesome operations are required for single-page releaseSimilar to the obsius pluginSupports basic obsidian featuresSlow loading speed due to referencing some slow css resourcesFree
Official release serviceSupportFastHighHighSupports all featuresNormal, loading speed is acceptable$8 per month

QA

  • The book's configuration information is in the repository's book.toml, meaning refer to mdbook
  • If you find this repository helpful, feel free to give it a star⭐ ; )
  • This section mainly displays and explains the special content of this repository.

Chinese Search Support

  • The static resources generated by mdbook do not directly support Chinese search and can only search in English.
  • I solved this problem by referring to and adding a JavaScript file below.

[!NOTE] Reference 小霖家的混江龙 (Xiaolin's Mixed Dragon) Support CJK (mutiple language) search · Issue #2052 · rust-lang/mdBook · GitHub

Issue with Chinese URLs not redirecting

  • The default obsidian-export had an issue where Chinese URLs could not redirect.
  • I modified its source code and compiled a solution myself.
  • Modified GitHub link

Adding a right-side outline

  • Similar to the outline system on the right side of Obsidian.

[!NOTE] Reference GitHub - JorelAli/mdBook-pagetoc: A page table of contents for mdBook

Other improved features

  • The issue of not recognizing the [[]] syntax was solved using obsidian-export for old.
  • Obsidian's built-in ==highlight settings==
  • Obsidian's tag recognition and search #tag
  • The problem of multi-line applications not breaking

example next line

[!important] Quotation syntax recognition Similar to this type

  • Math formula support, similar to $$a^2=b^2+c^2$$
  • 这部分内容主要展示和说明这个仓库的特别之处内容

中文搜索支持

  • mdbook 本身生成的静态资源并不直接支持中文搜索只能搜索英文
  • 我在下面的参考下通过添加js文件,解决了这个问题

[!NOTE] 参考 小霖家的混江龙 Support CJK (mutiple language) search · Issue #2052 · rust-lang/mdBook · GitHub

中文url无法跳转问题

  • 默认的 obsidian-export 出现了中文无法跳转的问题
  • 我更改了他的源代码自己编译了一份解决
  • 更改后的github链接

添加右侧大纲

  • 类似obsidian右边的大纲系统

[!NOTE] 参考 GitHub - JorelAli/mdBook-pagetoc: A page table of contents for mdBook

其他改进了的特性

  • 无法识别 [[]] 语法的问题,使用obsidian-export 解决了 old
  • obsidian本体的==高亮设置==
  • obsidian的tag识别和搜索 #tag
  • 多行应用不会换行的问题

example next line

[!important] 引用语法识别 类似这种

  • math公式支持, 类似 $$a^2=b^2+c^2$$

obsidian2web

Author

  • chenxuan

说明

  • 将obsidian的文档快速生成html的方法

使用方法

  1. 运行./init.sh,下载二进制(需要github连接,这一步可以自行下载)

  2. 运行./update.sh,生成book文件夹

  3. 进入./backend,执行make生成./gowebquick二进制文件,运行它

  4. 打开浏览器http://127.0.0.1:5203就可以看到效果

导出obsidian

中文搜索支持

文件内大纲支持

中文跳转支持

TODO

  • 目前跳转不支持中文

  • 文件内大纲支持

  • 设置github链接

  • 多行引用的换行

  • 高亮语法设计

  • tag支持

为什么我做这个仓库

现有方法

  1. obsidian webpage插件

    • 导出速度太慢了,特别是当出现大量文件的时候,而且必须打开obsidian,无法自动化部署

  2. obsius插件

    • 只适合单文件分享,不适合整个仓库作为web

我的预期

  1. 快速(总体在2s以内)而且无需打开obsidian,md格式本就是通用的,没必要依赖Obsidian

  2. 自动化,我使用git+github管理笔记,我希望推送到github之后自动部署到服务器上,不需要我去手动点击

  3. 准确,一些obsidian的插件特性我并不需要,我希望简单化和标准化

探索过程

  1. 决定使用mdbook作为md转html工具,因为真的非常快(1s以内)

  2. 但是mdbook有很多问题

    1. 无法识别[[]]这种Obsidian的语法

    2. 无法使用高亮

    3. 搜索不了中文

    4. 没有大纲

    5. 语法高亮不支持

    6. >引用语法不能换行

    7. 无法识别> [!info]这种语法

    8. 图片不能自动换行的问题

  3. 我使用obsidian-export解决了无法识别[[]]的问题,但是新的问题出现了

    1. 链接如果是中文会更改为拼音,导致mdbook生成之后无法跳转

  4. 我更改了export的源码重新编译解决了这个问题

  5. 通过放置js解决了搜索中文的问题

  6. 通过mdbook-pagetoc解决了大纲的需求

  7. 自己编写js解决引用和高亮的问题

  8. 目前已经基本可用