Getting Started
Download the codebase first. Bun is recommended for this project.
# let bun to create a local repo using this template
bun create ladit/astro-blog-zozo
bun install
populate your content
To craft your own site further, check the folders below and modify anything as you wish. Markdown post with frontmatters is supported.
public # favicons here
├── apple-touch-icon.png
├── favicon.ico
src
├── assets
│ ├── logo.svg # site logo read in components/Header.astro
│ ├── og-logo.png # logo image for OG generation. Check src/utils/openGraphImage.tsx for detail
├── 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.example.json # rename to giscus.json for advanced giscus configurations
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. In fact, I linked the src/content folder to my Obsidian vault for better editing experience.
comments
Post comments is powered by giscus. So your blog visitors should login Github to leave a comment. Follow instructions here to initialize your Github repo, install giscus app, enable discussion and get your parameters to fill in src/config.ts: GiscusConfig.
To restrict the domains that can load giscus with your repository’s discussions, rename giscus.example.json to giscus.json and modify it. Document is here.
preview
Build it first by bun run build and preview it by bun run preview or bun run preview:wrangler.
wrangler is a cli from Cloudflare. You may install it first.
deploy to Cloudflare Pages
Refer to Cloudflare Pages doc. You can use wrangler cli to upload from local or git integration.
Build settings:
Framework: Astro
Build command: bun install && bun run build
Evironments:
BUN_VERSION=latest
NODE_VERSION=20.13.1
To add a custom domain, check the doc.
deploy to Github Pages
Follow this doc.
You must have a <username>.github.io repo in Github for deploying. You can rename this repo.
In the repository, go to Settings > Pages > Build and deployment. Select Github Actions as Source.
Github workflow(.github/workflows/pages.yaml) will deploy for you everytime you push to the default branch.
To add a custom domain, check the doc.
deploy to Vercel
Link your Github account to Vercel and import your blog repo to it.
Build settings:
Framework: Astro
Build command overwrite: bun run build
To add a custom domain, check the doc.