syahrul927 / astro-blog-zozo

An opinionated and neat blog template built with Astro.

Astro Blog Template

An opinionated and neat blog template built with Astro. The theme originates from hugo-theme-zozo. Check out the ✨ Live Demo ✨.

Features

• 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

Getting Started

# let bun to create a local repo using this template
bun create ladit/astro-blog-zozo

populate your content

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 at src/content.

comments

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.

Todo

• @shikijs/transformers require custom style
• svg can not be embeded in open graph image. Maybe a satori bug.
• i18n

Contribute

Issues and PRs are welcome!

License

MIT

Acknowledgements

• varkai/hugo-theme-zozo
• Charca/astro-blog-template
• satnaing/astro-paper
• ricora/alg.tus-ricora.com
• one-aalam/astro-ink