astro blog template

minimalistic but opinionated blog template using astro and svelte. aims to be super easy to deploy and use, with a focus on performance and SEO, ease-of-use and design.

See a live demo here (also doubles as a tutorial on how to use this template).

Features:

• ✅ 100/100 Lighthouse performance
• ✅ SEO-friendly with canonical URLs and OpenGraph data (automatically generated)
• ✅ Sitemap support
• ✅ RSS Feed support
• ✅ Markdown support
• ✅ Pagination
• ✅ Syntax highlighting (+ copy button)
• ✅ Dark and light mode with toggle button or auto-detect
• ✅ Search included
• ✅ Tags for posts
• ✅ Super easy to deploy as a static site
• ✅ Includes some prebuilt components for you to use
• ✅ Easy to edit by editing the markdown directly

tutorials

the demo blog doubles as a tutorial on how to use this template:

• minimal setup with github pages

• adding content

• supported markdown features

Minimal setup with github pages

1. Fork this repository by clicking on "Use template" (note: this repository per default uses github actions which are only free for public repositories).

2. In your repository settings, set up github pages to deploy using github actions (SETTINGS -> PAGES -> SOURCE: Github Actions)

3. Set up your blog info in src/config.json (most importantly change SITE to your deployment url, e.g. for github pages https://<your-github-username>.github.io/ and BASE to your base path, e.g. for github pages /<your-repo-name>)

4. Your blog should be live in about 1 minute at https://<your-github-username>.github.io/<your-repo-name>

5. Add your blog posts in src/content/blog/

6. Add your info in src/content/info/:

• description.md is used for the homepage description
• about.md is used for the about page

Notes

Search currently only works in production mode (i.e. when running npm run build) not in dev mode (npm run dev).

Credits

Adopted from the default astro blog template when running npm create astro@latest.

License

MIT.