Astro Starlight Hello
Hello Astro Starlight
Initial setup
npm create astro@latest -- --template starlight/tailwind
🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm start |
Starts local dev server at localhost:4321 |
npm run dev |
Starts local dev server at localhost:4321 |
npm run sync |
Run the CLI command astro sync that generates TypeScript types for all Astro modules. |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run build-n-preview |
Build the production site and run the preview |
npm run lint |
Run the prettier and eslint |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
Docker Commands
| Command | Action |
|---|---|
npm run docker:build |
docker build --no-cache -t astro-starlight-hello . |
npm run docker:check |
docker run -it astro-starlight-hello sh |
npm run docker:rmi |
docker rmi -f astro-starlight-hello |
npm run docker:run |
docker run -p 8080:8080 astro-starlight-hello |
npm run docker:rund |
docker run --name web-preview -d -p 8080:8080 astro-starlight-hello |
npm run docker:stopd |
docker stop web-preview |
npm run docker:rm |
docker rm $(docker ps -aq --filter name=web-preview) |
npm run docker:stop |
run-s docker:stopd docker:rm |
Local Development
VS Code + Development Containers ( Customizations | VS Code Extension )
- [GitHub] erkobridee/devcontainer-hello - Learning about Development Containers
Test it online
Setup a new project using this repository
You can use the Use this template button
degit
npx degit erkobridee/astro-starlight-hello {project_name}
create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template erkobridee/astro-starlight-hello
👀 Want to learn more?
Check out Starlight’s docs, read the Astro documentation, or jump into the Astro Discord server.
References
Custom 404 page - Customizing Starlight | Guides - Starlight
CSS & Styling | Guides - Starlight
Contrast level:
AAAAccent [ Hue:
139, Chroma:0.27]Gray [ Hue:
139, Chroma:0.1]base color:
#1c5800
code logic to load the documents from
src/content/docs: Starlight repo - packages/starlight/utils/routing.ts
Override Starlight Components
Examples of customizations
[GitHub] mearashadowfax/ScrewFast - Open-source Astro website template with sleek, customizable TailwindCSS components. [ Interesting case: site, blog and documentation ]
Examples of Themes
[GitHub] HiDeoo/starlight-theme-rapide - Starlight theme inspired by the Visual Studio Code Vitesse theme
[GitHub] Fevol/starlight-theme-obsidian - Starlight theme inspired by the style of Obsidian Publish sites
Examples of Blog
[GitHub] HiDeoo/starlight-blog - Starlight plugin to add a blog to your documentation
[GitHub] rebecamurillo/astro-blog-i18n-starter - Astro built starter project for a static website and blog witth multilingual i18n configuration.
Docker
