how i made this site
my goal for the technical side of this site was to make it easy to post and also retain as much flexibility as possible. i’m a software engineer by day, so using some frontend framework was the obvious choice for customization. something like wordpress is easy to set up, but you’re restricted generally speaking to it’s conventions and plugins. I eventually decided on nextjs and tailwind because it’s straightforward to deploy and i wanted to get more experience with them.
the question, then, is how do I made it as easy as possible to create posts. I don’t want to have to write html, add to the repo, etc etc. my ideal world is one where I can write and format all my posts in obsidian, then when i’m ready, move it to a folder where they get automatically published. i’m not all the way there yet, but i’m close. i write an obsidian note as usual. when it’s ready, i move it to a folder called “publish”, then on my laptop all I have to do is run a command from my terminal. this syncs my obsidian notes with my site.
one final improvement would be to figure out a way to not have to deploy from my laptop. right now i use icloud to sync from my phone to my windows laptop, and i need a way to push notes to the repo whenever that icloud folder is updated. maybe i’ll switch to obsidian-git?
anyway, besides having to publish from my laptop, i don’t ever have to touch the code. all formatting, links, can be done in obsidian.
tech details
if you’re curious, here are more of the technical details.
so I used nextjs+tailwind for the frontend/backend. the server side rendering is good for sso and speed.
i’m hosting on vercel because it’s basically one click deployment and they handle the rest.
i bought my domain on cloudfare. seemed good enough to me. they charge ICANN prices.
my pipeline for getting from obsidian to my site is this:
- i have a util function that copies all the published notes from my obsidian directory to my repo, as well as doing some validations along the way (sluggable filenames, making sure required frontmatter is there, etc).
- when rendering posts, i use greymatter to parse the frontmatter, and then i use remark and remark-wiki-links to generate html from markdown.
- then, all i have to do it deploy to github and vercel handles the rest
- this is all put into one script that i put in PATH, so that i can run from anywhere in the terminal