Skip to content

Opinionated starter site to make Astro sites with content from Notion, Markdown, and more

License

Notifications You must be signed in to change notification settings

ekafyi/astronotion-starter-ssg

Repository files navigation

Astronotion starter site

Opinionated starter site ("theme") to get you up and running with an Astro site + Notion content.

  • Uses Astronotion to fetch, transform, and render data from Notion with Astro components
  • Fast, accessible, and SEO-friendly
    • Sitemap, metadata, web manifest
    • Semantic HTML markup
    • Lazy loaded images
    • A+ Lighthouse score
  • Multiple customizable colour modes with Tailwind and daisyUI
  • Markdown examples provided for non-Notion use cases

Currently only available in SSG.

Quick start

Deploy with Vercel Deploy with Netlify

Or create a new repo from this template.

Commands

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying

You may also use yarn or pnpm instead of npm.

Configure

  1. Edit the config file for basic site content/data

https://github.com/ekafyi/astronotion-starter-ssg/blob/main/src/configs/an-starter-config.mjs

  1. Replace the static assets with your own (presumably non-feline) branding assets

https://github.com/ekafyi/astronotion-starter-ssg/tree/main/public

What to modify:

  • favicon.ico
  • manifest.json
  • images/branding/icon-192x192.png
  • images/branding/icon-512x512.png
  1. Replace the sample Notion page ids

⚠️ Make sure the Notion page is shared to public

Example for standalone page

https://github.com/ekafyi/astronotion-starter-ssg/blob/main/src/pages/kitchen-sink-notion.astro#L8

Notion source page: https://ekafyi-playground.notion.site/Plants-1cf6f82effc24ad4aea5a50f88198a7b

Example for collection ("parent" and "child") pages

Notion source page: https://ekafyi-playground.notion.site/2ba80ec3d84d46479f23ec15ba5e39b0

Deploy

Run the build command (see "Commands" above) and deploy your dist directory to your hosting service.

If you use Netlify or Vercel, you can:

  • run the deploy command from the CLI: netlify deploy or vercel deploy --prebuilt, and/or...
  • trigger automatic deployment when you push to your connected repository

About

Opinionated starter site to make Astro sites with content from Notion, Markdown, and more

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published