vehrka/publish_static_html_from_obsidian.md

## publish_static_html_from_obsidian.md

      
    Raw
  

              publish_static_html_from_obsidian.md
            
          
    Main steps


Use obsidian-export to filter the obsidian Vault «source folder» that we want to publish into a «destination folder» also in the same Vault.
Re-create Listings and Index page using the Templater plugin
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 GitHub.
Upload the content to GitHub in a repo with GitHub pages enabled.

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 Webpage HTML Export plugin.
Installing

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

Install the Rust toolchain from https://www.rust-lang.org/tools/install
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 file below)
frontmatter-always (as recommended by Brandon)
origin folder (LIVE_VAULT_TO_PUBLISH_FOLDER)
destination folder (OE_COPY_OF_THE_VAULT_FOLDER)

The destination folder must exist beforehand.
Important
It is highly recommended to pause the Obsidian synch before starting the process.

Full bash script

We launch the command through a bash script with other preparation ops.
#!/bin/bash

cd YOUR_REPO_LOCAL_PATH
rm -fr YOUR_REPO_LOCAL_PATH/content/*
rm -fr OE_COPY_OF_THE_VAULT_FOLDER/*
obsidian-export --ignore-file YOUR_REPO_LOCAL_PATH/.export-ignore --frontmatter=always LIVE_VAULT_TO_PUBLISH_FOLDER OE_COPY_OF_THE_VAULT_FOLDER
Ignore list

We use the following ignore list for the .export-ignore file
z_configuration_folder/
main_campaign_landing.md
campaign_dynamic_index.md
leaflet_map_with_spoilers.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.
Create index page

The index page is based on this template
AMAZING INTRO.

# Sessions

# Maps

![[COPY_OF_THE_VAULT_FOLDER/player_facing_map]]

# Quests

# Notes

Under each of the sections we call a template (Templater Insert Template) to generate the contents
Sessions

<%*
	const dv = app.plugins.plugins["dataview"].api;
	const query = `
		LIST WITHOUT ID 
		FROM "COPY_OF_THE_VAULT_FOLDER"
		WHERE campaign = "CAMPAIGN_NAME" 
		 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 "COPY_OF_THE_VAULT_FOLDER"
		WHERE campaign = "CAMPAIGN_NAME" 
		  AND contains(type, "quest")
		SORT name 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 "COPY_OF_THE_VAULT_FOLDER"
		WHERE campaign = "CAMPAIGN_NAME" 
		 AND entry_id
		SORT name ASC
	`
	let out = await dv.queryMarkdown(query)
	tR += out.value
%>
NOTE: we are exporting the notes with the tag visited from the corresponding folder
NOTE: we are only interested in notes that have a entry_id in the frontmatter
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 going to export the folder generated by the obsidian-export program into YOUR_REPO_LOCAL_PATH/content/ folder (this one is outside the Vault), this is the ona that is going to be published in GitHub.
In Obsidian, right click on the COPY_OF_THE_VAULT_FOLDER and select Export to HTML selecting theYOUR_REPO_LOCAL_PATH/content/ folder as destination.
Once it finishes rendering the webpages, the contents will be ready to publish in GitHub.
Plugin config

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

Inline CSS: yes
Inline JS: no
Inline Images: yes
Make names web style: yes
Include Plugin CSS:

Obsidian leaflet
tor2e Statblock


Adding the contents with git

For adding and pushing the contents with git you can follow these steps:
cd YOUR_REPO_LOCAL_PATH
git add .
git commit --message 'This is the YYYYMMDD version'
git push origin --all
The content could take some time to upload and show up.
Github config

The last step is publishing the export, this can be achieved with any content server because the result are static HTML pages; but we are setting this to work in Github which is pretty easy.
Just create a new repository and upload all the exported content.
Then go to GitHub and in the settings of the repository check the Pages section.
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


Brandon Boswell blog post with his configuration