Astro and Obsidian
easy editing
- tags
- obsidian
- astro
Contents
I like obsidian a lot as an editor, and I wanted to see if I could use it to manage an astro site. Also, I've never built an astro site.
Obsidian has a built in publishing feature, but I'm not sure that I fully understand how it works. Specifically I don't like the links between, the graph thing, and I'm not really sure how it thinks of how the content is managed. It could be amazing – I haven't really looked at it.
Anyway, lets figure it out. First you need node, then you need obsidian.
Create the site and add tailwind
|
|
Say blank, whatever you want to typescript, and install dependancies and a git repo.
Then cd my-project
and
|
|
And then make sure that you have the typography plugin installed in
tailwind.config.mjs
:
|
|
Create the BaseLayout
And start up the dev server
|
|
Make a layout in src/layouts/BaseLayout.astro
:
|
|
You can test out if tailwind is working right by changing the content
of src/pages/index.astro
and adding some tailwind classes, like
|
|
Add astro-rehype-relative-markdown-links
One of the fun things is to link between notes. Lets set that up so astro understands obsidian links. First the astro side:
|
|
And so your astro.config.mjs
looks like:
|
|
Now on the Obsidian side, go to Manage Vaults
and then create a new vault.
Call the vault posts
and put it the my-project/src/content
directory.
In preferences, under Files and Links
, turn off "wikilinks".
Make the post page templates
Then create src/pages/posts/[...slug].astro
:
First we define getStaticPaths
, which returns a list of pages that we
want to render. The slug
is the name of the url (basically) and entry
is the post itself. This is what tell astro that these urls exist and
need to be rendered.
Then in the html part, we put the title, date, and a list of tags that may or may not be defined.
|
|
If you run the dev server, and don't have the BaseLayout specify the right charset you might see smart quotes all funky.
|
|
So make that that is in the header (which probably should be there anyway.)
Create a few pages
Back in obsidian, lets create some pages. In the Welcome page, remove everything and then create a new link to a new page.
You can drag images into Obsidian and they will get optimized and deployed as needed.
Add support for callouts
|
|
And inside of astro.config.mjs
:
|
|
Adjust your blockquote styles as needed.
Create a template for a post
Create a templates
folder and create post.md
inside.
|
|
Inside of your obsidian settings select templates
as the template
folder.
Create a blog index
Get all the posts from the post collection, and sort them by date.
src/pages/blog.astro
:
|
|
This links to the posts/
pages that we defined above.
Tags
How about tags?
First lets create src/pages/tags.astro
to display the list of tags.
We get all of the posts, then all of the tags in each post and add them to a map of arrays. We could list out each post here, or just show the count of posts with that specific date.
|
|
And then we can create src/pages/tags/[...slug].astro
to render each of the tag pages:
|
|
RSS
First lets add the package:
|
|
src/utils/posts.js
:
|
|
And then create src/pages/rss.xml.js
:
|
|
References
- https://stackoverflow.com/questions/76163067/using-markdown-wiki-links-in-astro-framework
- https://github.com/vernak2539/astro-rehype-relative-markdown-links
- https://www.npmjs.com/package/remark-obsidian-callout
- https://help.obsidian.md/Editing+and+formatting/Callouts
- https://docs.astro.build/en/guides/rss/
Previously
Next