Astro Blog Template
An opinionated and neat blog template built with Astro. The theme originates from hugo-theme-zozo. Check out the ✨ Live Demo ✨.
- Fast and light weight. Lighthouse 4 * 100/100 on desktop. 1 point decreased on mobile.
- Astro 4
- No other UI frameworks intergrated for better performance
- mobile-friendly responsive design with Tailwind CSS
- Light / dark theme derived from hugo-theme-zozo
- Markdown post support with emoji shortcode, katex
- static search with Pagefind
- comment system powered by giscus
- SEO-friendly setup with canonical URLs and OpenGraph data
- RSS generation
- Sitemap.xml generation
- dynamic open graph image generation
# let bun to create a local repo using this template
bun create ladit/astro-blog-zozo
To craft your own site further, check the folders below and modify anything as you wish. Markdown post with frontmatter is supported.
public # favicons here
├── apple-touch-icon.png
├── favicon.ico
src
├── assets
│ ├── logo.svg # site logo
├── config.ts # main config
├── content # markdown posts and attachments go here
│ ├── attachments
│ └── posts
├── pages
│ ├── index.astro # index page written in Astro component
│ └── about.astro # about page written in Astro component
.giscus.json
All frontmatter fields except title are optional. Date field is under ISO 8601 format without quotation marks. The posts frontmatter describes as:
---
slug: my-custom-slug
title: My awesome title
description: some desc
image: ../attachments/100.jpg # hero & social image
date: 2024-02-26T23:30:47+08:00
lastmod: 2024-02-26T23:30:47+08:00
hidden: false # set this to true to make this post hidden from posts list. But the uri is still accessable.
tags:
- demo
- theme
hide: # set a element list to hide in the post page
- title
- date
- lastmod
- tags
- readingTime
- toc
- comments
---
Note:
To use the Astro
Content Collection
feature, the site content must be placed atsrc/content
.
Post comments is powered by giscus. Follow instructions here to initialize your Github repo, install giscus app, enable discussion and get your parameters to fill in src/config.ts: GiscusConfig
.
Modify .giscus.json
to restrict the domains that can load giscus with your repository's discussions. Document is here.
@shikijs/transformers
require custom style- svg can not be embeded in open graph image. Maybe a satori bug.
- i18n
Issues and PRs are welcome!