Skip to content

README.md

Latest commit

 

History

History
95 lines (69 loc) · 3.6 KB

README.md

File metadata and controls

95 lines (69 loc) · 3.6 KB
Raw

luckylwk

A personal blog built with Astro, deployed to GitHub Pages. Posts are authored in Markdown/MDX and support LaTeX math, syntax highlighting, GFM tables, and interactive React components.

Live site: https://luckylwk.github.io

Tech stack

  • Astro with Content Collections (typed frontmatter via Zod)
  • remark-math + rehype-katex for LaTeX math (KaTeX CSS bundled locally)
  • Shiki (github-dark) for code syntax highlighting
  • React + MDX for interactive islands (e.g. charts via recharts)
  • GitHub Actions for build & deploy

Local development

All commands run from the project root:

Command Action
pnpm install Install dependencies
pnpm run dev Start the dev server at localhost:4321
pnpm run build Build the production site to ./dist/
pnpm run preview Preview the production build locally

Adding a new post

  1. Create a file in src/content/blog/ — use .md for plain posts or .mdx when you need to embed React components.
  2. Add frontmatter matching the schema (see below).
  3. Write your content. Drafts (draft: true) are hidden from listings and the production build; publish by setting it to false (or removing it).

Frontmatter schema

Defined and type-checked in src/content.config.ts:

Field Type Required Notes
title string yes Post title.
description string yes Used for SEO / Open Graph.
pubDate date yes e.g. 'Jul 08 2026'.
updatedDate date no Shown as "Last updated on".
heroImage image no Path relative to the post, e.g. ../../assets/….
tags string[] no Defaults to []; drives the /tags pages.
draft boolean no Defaults to false; true hides the post.

Example:

---
title: 'My post'
description: 'A one-line summary.'
pubDate: 'Jul 08 2026'
tags: ['guide', 'astro']
draft: false
---

Tags

Every string listed in a post's tags array automatically appears on:

  • /tags — an index of all tags with post counts, and
  • /tags/<tag> — a page listing every post with that tag.

No extra configuration is needed; add a tag to a post and the pages regenerate on the next build.

Math, code, and interactive components

  • Math — inline $E = mc^2$ and display $$ … $$ blocks render via KaTeX.

  • Code — fenced code blocks are highlighted with the github-dark theme.

  • React islands — in an .mdx post, import a component and render it with a client directive:

    import Counter from '../../components/Counter.jsx';

<Counter client:visible start={3} />

    See src/content/blog/math-and-code.mdx and data-visualization.mdx for working examples.

Deployment

Pushing to main triggers .github/workflows/deploy.yml, which builds the site with withastro/action and publishes it with actions/deploy-pages. Ensure Settings → Pages → Source is set to GitHub Actions (one-time setup).

The site and base values live in astro.config.mjs. This site deploys at the domain root (base: '/'); a project repo would use base: '/<repo-name>'.