Personal homepage and blog. Static site built with Astro, deployed to GitHub Pages via GitHub Actions.
| What | Where |
|---|---|
| Local dev server | npm run dev → http://localhost:4321 |
| Production build | npm run build → dist/ |
| Type-check | npm run check |
| Live site | https://zichaoyang.com |
-
Drop a markdown file anywhere under
src/content/blog/. Folders become URL segments:src/content/blog/hello-world.md → /blog/hello-world/ src/content/blog/meta/about-this-blog.md → /blog/meta/about-this-blog/ src/content/blog/physics/halo-eft/some-note.md → /blog/physics/halo-eft/some-note/ -
Frontmatter schema (validated at build time by
src/content.config.ts):--- title: My post title # required date: 2026-05-07 # required (YYYY-MM-DD) description: Short summary. # optional, used for <meta name="description"> draft: false # optional, default false; true = skip during build tags: [meta, astro] # optional, list of strings venue: Physics Letters B # optional, shown for paper entries ---
-
Body is plain GitHub-flavored markdown plus:
- KaTeX math — inline
$...$and display$$...$$ - Mermaid diagrams — fenced
```mermaidblocks (rendered client-side via lazy-loaded CDN) - Code blocks — syntax-highlighted by Astro's bundled Shiki
- KaTeX math — inline
-
git add . && git commit -m "post: …" && git push— Actions builds + deploys, live in ~2 minutes.
src/
pages/
index.astro ← homepage
blog/[...slug].astro ← dynamic route for every blog post
layouts/
BaseLayout.astro ← html shell, head, fonts
PostLayout.astro ← prose article template + Mermaid loader
components/
Header.astro
WorkCard.astro
Footer.astro
data/
site.ts ← profile, social links, homepage cards
content/
blog/ ← all markdown posts (recursive)
content.config.ts ← Zod schema for blog frontmatter
markdown/
remark-mermaid-to-pre.ts ← custom plugin: ```mermaid → <pre class="mermaid">
styles/
global.css ← Tailwind 4 + typography + handwritten homepage styles
public/
CNAME ← custom domain (zichaoyang.com)
avatar.jpg, hoah-cover.jpg ← static assets, served at /avatar.jpg etc.
.github/workflows/
deploy.yml ← GitHub Actions: build + deploy to Pages
astro.config.mjs ← redirects + remark/rehype plugins (math, mermaid)
Pushes to main trigger .github/workflows/deploy.yml:
checkout → npm ci → npm run check → npm run build → upload-pages-artifact → deploy-pages
public/CNAME (containing zichaoyang.com) is passed through to dist/CNAME so the custom domain survives every deploy.
These are configured once and persist across deploys:
- Settings → Pages → Source must be GitHub Actions (not "Deploy from a branch").
- Settings → Pages → Custom domain must be
zichaoyang.com. - Settings → Pages → Enforce HTTPS should be checked.
- Astro 5 — static site generator
- TypeScript strict mode (
astro check) - Tailwind 4 +
@tailwindcss/typography— forprosemarkdown styling - remark-math + rehype-katex — server-side LaTeX rendering at build time
remarkMermaidToPre(custom, ~30 lines) — turns mermaid blocks into<pre class="mermaid">so a tiny client script (lazy-loaded from esm.sh CDN, only when a diagram is on the page) can render them- Phosphor Icons — via CDN, used in homepage social links
The legacy /research/11be-proton-emission/ URL is preserved as a static redirect to the new /blog/physics/11be-proton-emission/ location (astro.config.mjs → redirects). Add new entries there if more URLs ever move.