Skip to content

Instantly share code, notes, and snippets.

@HiDeoo
Last active February 1, 2024 20:10
Show Gist options
  • Save HiDeoo/37566545a9668c8ba5fb9043461480af to your computer and use it in GitHub Desktop.
Save HiDeoo/37566545a9668c8ba5fb9043461480af to your computer and use it in GitHub Desktop.
Obsidian → Starlight

First, if you have any questions, issues, or feedback at any point, feel free to ask directly.

  1. You need a Starlight website. You can setup this by following the "Getting Started" guide. For the first pnpm create command:
    • You pick the folder you want (. for the current directory)
    • Say yes for TypeScript even tho you prolly won't ever write any
    • Pick the default Strict option
    • Install dependencies
    • And initialize a git repository
    • Right after the install, edit your package.json file newly created, and remove the astro check && part from the build script 1
    • You should have a basic Starlight website and can commit everything.
  2. Follow the Starlight Obsidian plugin "Getting Started" guide
    • I'm on purpose not giving you details here as I also want to know if the guide is clear enough
    • After that, you should have your vault in Starlight and be able to see it in your browser when running either pnpm dev or pnpm build && pnpm preview.
    • The Starlight Obsidian plugin docs contains a few more pages, feel free to read them if needed.
  3. You should once again be able to commit at this point.
  4. Customization
    • Remove example content folders:
      • src/content/docs/guides/
      • src/content/docs/reference
    • Edit the homepage by editing the src/content/docs/index.mdx file and add w/e you want.
    • Edit your configuration in the astro.config.mjs file.
      • The documentation reference is here.
      • Configure the website title using the title option.
      • Configure your sidebar using the sidebar option. I guess in your case, it'll be pretty basic, e.g. [{ label: "About these notes", link: "/" }, obsidianSidebarGroup].
      • Add your Discord, Twitch and Youtube channel using the social option
  5. Regarding publishing, no idea what your plan is. It's a basic static website so nothing fancy so no needs for adapters or anything. For example, on Vercel, it's just a matter of going to your dashboard, selecting the associated public or private GitHub repo and you're done. At every push, it will build and deploy your website.

Footnotes

  1. A bit useless in your case and will only take times for no reason and also temporarily has an annoying DX so removing it is just easier (for this specific case of a Starlight website)

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