flo-bit.dev / blog-template
[READ-ONLY] Mirror of https://github.com/flo-bit/blog-template. minimalistic astro blog template flo-bit.dev/blog-template/
astro blog template
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

34 1 0

Clone this repository

https://git.vm.fail/flo-bit.dev/blog-template https://git.vm.fail/did:plc:gzoup75ihgmxinhue3hvn74s
ssh://git@knot1.tangled.sh:2222/flo-bit.dev/blog-template ssh://git@knot1.tangled.sh:2222/did:plc:gzoup75ihgmxinhue3hvn74s

For self-hosted knots, clone URLs may differ based on your setup.


Download tar.gz Download .zip
README.md
template-1-wide

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 using pagecms or by editing the markdown directly

tutorials#

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

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. Your blog should be live in about 1 minute at https://<your-github-username>.github.io/<your-repo-name>

For editing the blog you can either edit the code directly or use the preconfigured pagescms.

Editing with pagescms#

  1. Go to pagescms and log in with your github account and authorize the app.

  2. Add your repository to pagescms and open it.

  3. Now you can edit your website configuration, about page, description and blog posts directly in the browser.

  4. Your changes will be automatically pushed to your repository and deployed to github pages in about 1 minute everytime you hit save.

Editing the code#

  1. Set up your blog info in src/config.json (leaving SITE, BASE, and MANUAL_SITE_BASE, as they are).

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

  3. 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.