I created this Astro project to publish the notes I create in obsidian as websites. The goal when starting this project was to be able to add the files I created with obsidian to the repo and push to deploy, without needing to adjust frontmatter at all.
There is one optional frontmatter property built in called footer, which will put a footer at the bottom with social links.
Include footer: "true"
in the .md files frontmatter and it will render.
Astro (content collections) Tailwind and Tailwind Typography Rehype plugin (for accessibility tweaks)
I used CloudFlare Pages, but any static site service will work. I have included the Github Action created by Astro to deploy via GitHub Pages if you want, all you have to do is have the repo deploy via Actions and set the base:
in astro.config.mjs
- In the
astro.config.mjs
file set the site to your deployed URL - In
/src/components/Footer.astro
change the links from example.com to your socials - Put any .md or .mdx file you want to publish in
/src/content/notes/
- Deploy with your favorite service (Netlify, CF Pages, Vercel, Github Pages, etc...)
For a lot of services they won't give you a URL until you connect a repo and deploy it, in this case just deploy without setting the site:
in the astro config then get the deployed URL and then update the config and push to redeploy
Every note that is in the same directory will be linked together as "Related"
- For example
/content/notes/example.md
will be linked with/content/notes/example2.md
as will/content/notes/example/example.md
and/content/notes/example/example2.md
Every <h2>
or ##
with markdown will be considered a Heading
and get listed in the menu, no other subheadings will be included in the headings
I created a zsh alias for copying the notes in my Obsidian vault that I want to publish
rsync -av --exclude=".*" --delete "/path/to/obsidian/vault" "/path/to/your/repo/src/content/notes/"
I also created a zsh function called publishnotes
that will copy then add commit and push the repo to deploy the site via CD here: Deploy Gist
I made use of the tailwind config file to customize the typography for the footnote links, and the checkboxes ( [ x ]
in markdown)
I used styles.css
to make the scrollbars always visible on the menus and codeblocks as well as changing the codeblock styles ( because utility classes didn't let me select the code elements seperately when they were children of pre elements )
Everything else uses tailwind utility classes