flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/blog-template. minimalistic astro blog template
flo-bit.dev/blog-template/
astro
blog
template
4.4 kB
92 lines
1<picture>
2 <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/18bd5c7e-3f45-4485-b4e8-6f0a45ca931d">
3 <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/98d51208-2332-43e9-9ffb-787597644862">
4 <img alt="Screenshot of blog template, main page." src="https://github.com/user-attachments/assets/98d51208-2332-43e9-9ffb-787597644862">
5</picture>
6
7[LIVE DEMO](https://flo-bit.dev/blog-template/)
8
9# astro blog template
10
11minimalistic but opinionated blog template using [astro](https://astro.build/) and [svelte](https://svelte.dev/). aims to be super easy to deploy and use, with a focus on performance and SEO, ease-of-use and design.
12
13See a [live demo here](https://flo-bit.dev/blog-template/) (also doubles as a tutorial on how to use this template).
14
15Features:
16
17- ✅ 100/100 Lighthouse performance
18- ✅ SEO-friendly with canonical URLs and OpenGraph data (automatically generated)
19- ✅ Sitemap support
20- ✅ RSS Feed support
21- ✅ Markdown support
22- ✅ Pagination
23- ✅ Syntax highlighting (+ copy button)
24- ✅ Dark and light mode with toggle button or auto-detect
25- ✅ Search included
26- ✅ Tags for posts
27- ✅ Super easy to deploy as a static site
28- ✅ Includes some prebuilt components for you to use
29- ✅ Easy to edit by editing the markdown directly
30- ✅ Comments and likes via bluesky
31
32## tutorials
33
34the demo blog doubles as a tutorial on how to use this template:
35
36- [quick start with github pages](https://flo-bit.dev/blog-template/posts/how-to-use)
37
38- [adding content](https://flo-bit.dev/blog-template/posts/adding-content)
39
40- [comments and likes via bluesky](https://flo-bit.dev/blog-template/posts/comments-via-bluesky)
41
42## quick start with github pages in 5 minutes
43
441. Fork [the repository of this blog](https://github.com/flo-bit/blog-template)
45
46- Either name your fork `<github-username>.github.io` if you want your blog to live at `<github-username>.github.io`
47
48- Or choose any other repo name and it will live at `<github-username>.github.io/<repo-name>`
49
502. In your repository settings, set up github pages to deploy using github actions (_SETTINGS_ -> _PAGES_ -> _SOURCE_: **Github Actions**)
51
523. Set up your blog info in `src/config.ts`, most importantly the `SITE` and `BASE` variables:
53
54- `SITE`: set to `https://<github-username>.github.io`
55- `BASE`: if repo name is `<github-username>.github.io` set to `/`, otherwise set to `/<repo-name>`
56
574. Once you push your changes to main your blog should be live in about 1-2 minutes at
58`<github-username>.github.io` or `<github-username>.github.io/<repo-name>`
59
605. Set up more info in `src/config.ts` (see [all options here](https://flo-bit.dev/blog-template/posts/configuring-the-blog))
61
62- `SITE_TITLE` is the title of your blog, and will be shown in the header and in search results
63- `SITE_DESCRIPTION` is the description of your blog, and will be shown e.g. in search results
64- `SITE_FAVICON` is the emoji that will be shown as favicon of your blog (will be shown in the header and as favicon)
65- `NAME` is the name of the author of the blog, will be shown in the footer as `(c) <YEAR> <NAME> - LICENSE`
66- `BLUESKY_IDENTIFIER` is your bluesky handle (without the `@`), this is needed for likes and comments to work
67(see [comments via bluesky](https://flo-bit.dev/blog-template/posts/comments-via-bluesky))
68- `SOCIAL_LINKS` set your social media links here, e.g. `{ BLUESKY_URL: "https://bsky.app/profile/flo-bit.dev" }`
69will be shown in the footer of the blog
70
716. Edit `about.mdx` in `src/content/info/` to add your own about page.
72
737. Remove all files from `src/content/blog/` and add your own blog posts there. Time to write your first blog post!
74(see [adding content](https://flo-bit.dev/blog-template/posts/adding-content) for more info)
75
768. Anytime you push to the main branch, your blog will automatically be updated (should usually take less than 2 minutes).
77You can also go to the github actions tab to check the progress/status.
78
79If you run into any issues, feel free to [open an issue](https://github.com/flo-bit/blog-template/issues) or
80[contact me on bluesky](https://bsky.app/profile/flo-bit.dev)
81
82## Notes
83
84Search currently only works in production mode (i.e. when running `npm run build`) not in dev mode (`npm run dev`).
85
86## Credits
87
88Adopted from the default astro blog template when running `npm create astro@latest`.
89
90## License
91
92MIT.