This is the official website for KeyAstro (Astro + Keystatic Template), built with Astro and managed using Keystatic.
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
This will start the Astro dev server at
http://localhost:4321. -
Access Keystatic CMS: Navigate to
http://localhost:4321/keystaticto manage the content, events, and leaders. Note: Keystatic is currently configured to run in GitHub mode for production, but you can switchkindto'local'inkeystatic.config.tsfor local development without pushing to a branch.
src/pages/: Contains the Astro routes for English (en/) and Japanese (ja/).src/components/: Reusable React (.tsx) and Astro (.astro) UI components.src/content/: Stores Keystatic collections, global settings, and Markdoc content.src/layouts/: Base layouts (likeLayout.astrocontaining thehead,Header, andFooter).keystatic.config.ts: Configuration file defining the CMS schemas for leaders, events, homepage, etc.
The site is configured to be deployed on Cloudflare Pages using the @astrojs/cloudflare adapter.
When you push your code to your repository, connect it to Cloudflare Pages with these exact settings:
- Framework preset:
Astro - Build command:
npm run build - Build output directory:
dist
Cloudflare will automatically build and deploy the site.
For detailed instructions on how to set up the GitHub App to allow Keystatic editing on your live Cloudflare site, please read the DOCUMENTATION.md file included in this repository.
The site supports both English and Japanese. All pages have an en and ja version inside src/pages/. Keystatic is also configured with dual singletons (e.g., homepageEN and homepageJA) to manage localized content effectively.
npm run dev: Starts the local development server.npm run build: Builds the static and server-rendered assets for production.npx astro check: Runs TypeScript checks across all.astroand.ts/.tsxfiles.