Skip to content

Instantly share code, notes, and snippets.

@vehrka
Last active August 13, 2024 06:50
Show Gist options
  • Save vehrka/c0066bb86871e924a974c6a3f49f8dee to your computer and use it in GitHub Desktop.
Save vehrka/c0066bb86871e924a974c6a3f49f8dee to your computer and use it in GitHub Desktop.
tags
obsidian, html, export, favourite

Main steps

  1. Use obsidian-export to filter the obsidian vault «source folder» that we want to publish into a «destination folder» also in the same vault.
  2. Re-create Listings and Index page using the Templater plugin
  3. Export the «destination folder» in the vault using the Webpage HTML Export plugin to a «to publish directory» (outside the vault) that is going to be published in Git Hub.

obsidian-export

Rationale

obsidian-export is a RUST program that converts the Obsidian Markdown to a more standard Markdow.

It has two features that makes it useful in this process:

  • Can export a given folder or file
  • Uses an ignore list and resolves automatically the links to the ignored pages

What we are going to do is to use it to filter the obsidian folder that we want to publish. The destination folder is going to be also in the vault to take advantage of the [[Obsidian vault export to static HTML#Webpage HTML Export|Webpage HTML Export]] plugin.

Installing

Follow the page instructions, but the TL;DR is:

  1. Install the Rust toolchain from https://www.rust-lang.org/tools/install
  2. Run: cargo install obsidian-export

obsidian-export cli command

For exporting the contents you should invoke the command through the cli:

$ obsidian-export --help

We are going to provide the following arguments:

  • ignore-file (see full file below)
  • frontmatter-always (as recommended by Brandon)
  • origin folder
  • destination folder

The destination folder must exist beforehand.

Full bash script

We launch the command through a bash script with other preparation ops.

#!/bin/bash

cd ~/Documents/dev/lcdor_export
rm -fr ~/Documents/dev/lcdor_export/lcdor_export/*
rm -fr ~/Documents/doc/rpg/obsidian/sessions/rpg_sessions/lcdor_export/*
obsidian-export --ignore-file ~/Documents/dev/lcdor_export/.export-ignore --frontmatter=always ~/Documents/doc/rpg/obsidian/sessions/rpg_sessions/Worlds/1.\ La\ Caza\ del\ Ojo\ Rojo ~/Documents/doc/rpg/obsidian/sessions/rpg_sessions/lcdor_export/
sed -i 's@Worlds/1. La Caza del Ojo Rojo@lcdor_export@' ~/Documents/doc/rpg/obsidian/sessions/rpg_sessions/lcdor_export/Mapa\ lcdor\ jugadores.md
find ~/Documents/doc/rpg/obsidian/sessions/rpg_sessions/lcdor_export/ -name "*.md" -exec sed -i -e 's/\\\[/[/' {} \;
find ~/Documents/doc/rpg/obsidian/sessions/rpg_sessions/lcdor_export/ -name "*.md" -exec sed -i -e 's/\\\]/]/' {} \;
find ~/Documents/doc/rpg/obsidian/sessions/rpg_sessions/lcdor_export/ -name "*.md" -exec sed -i -e 's/ > $//' {} \;

I have added la last 3 commands to fix the support for Callouts, which are not Markdown standard, but I want them in the final result.

Important

It is highly recommended to pause the Obsidian synch before starting the process

Ignore list

We use the following ignore list for the lcdor_export in the .export-ignore file

z_conf/
Campaña\ de\ La\ Caza\ del\ Ojo\ Rojo.md
lcdor\ Note\ Index.md
Mapa\ lcdor.md

Templater tricks

As we are using the obsidian-export script to generate a folder in the same vault, all of the Dataview listings and tables are not going to point to the «correct» Note, as there are many that relay only on tags or have specific FROM clauses that we don't want to rewrite.

We are going to reproduce some of the Lists as static lists using the Templater obsidian plugin.

Call the Plugin via CTRL+P, then Templater: Open Insert templater modal, and then selecting the Template for the section (they begin with list_)

Create index page

The index page is based on this template

Estas son las notas de campaña de la Aventura de la Comunidad de la Caza del Ojo Rojo, la partida de El Anillo Único RPG que jugamos los Barrilungos desde 2017.

# Sesiones

# Mapa

![[lcdor_export/Mapa lcdor jugadores]]

# Quests

# Notas

Under each of the sections we call a template to generate the contents

Sessions

<%*
	const dv = app.plugins.plugins["dataview"].api;
	const query = `
		LIST WITHOUT ID 
		FROM "lcdor_export"
		WHERE campaign = "La Caza del Ojo Rojo" 
		 AND type = "session" 
		SORT session ASC
	`
	let out = await dv.queryMarkdown(query)
	tR += out.value
%>

Quests

<%*
	const dv = app.plugins.plugins["dataview"].api;
	const query = `
		LIST WITHOUT ID
		FROM "lcdor_export"
		WHERE campaign = "La Caza del Ojo Rojo" 
		  AND contains(type, "quest")
		SORT quest ASC
	`
	let out = await dv.queryMarkdown(query)
	tR += out.value
%>

Notes

<%*
	const dv = app.plugins.plugins["dataview"].api;
	const query = `
		LIST WITHOUT ID
		FROM #visited AND "lcdor_export"
		WHERE campaign = "La Caza del Ojo Rojo" 
		 AND entry_id
		SORT title ASC
	`
	let out = await dv.queryMarkdown(query)
	tR += out.value
%>

Webpage HTML Export

This is a Community Plugin for Obsidian that can be found in the official repository. and also in the development web.

We are goint to export the folder generated by the [[Obsidian vault export to static HTML#obsidian-export|obsidian-export]] program to a directory (outside the vault) that is going to be published in GitHub.

In the plugin select the destination folder (i.e. ~/Documents/dev/lcdor_export) it will create a folder inside that folder (~/Documents/dev/lcdor_export/lcdor_export)

You have to move the index.html file from lcdor_export/lcdor_export to lcdor_export/.

Check the reference of the Player's map inside the index.html it may be wrong.

Plugin config

Review the plugin config and set the export options to your liking, this are the settings for the lcdor_export:

  • Inline CSS: yes
  • Inline JS: no
  • Inline Images: yes
  • Make names web style: yes
  • Include Plugin CSS:
    • Obsidian leaflet
    • tor2e Statblock

Github config

The last step is publishing the export, this can be achieved with any content server because the result are static HTML pages.

Setting this to work in Github is pretty easy, just create a new repository and upload the html with an index.html file to serve as entry point.

Then go to the settings of the repository and check the Pages section:

![[github_pages_section.png]]

Select Deploy from a branch set the name of the branch in the dropdown and press Save

The contents will be accessible through username.github.io/repo_name

Custom DNS

You can also access the content through s custom DNS.

You should set a new CNAME record to point to username.github.io in your Domain provider.

Then in the Github repo settings you should activate the custom DNS and set your new domain name.

References

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment