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

• @astrojs/svelte | Astro Docs

• Internationalization (i18n) | Guides - Starlight

• Authoring Content in Markdown | Guides - Starlight

• Custom 404 page - Customizing Starlight | Guides - Starlight

• Custom fonts - Customizing Starlight | Guides - Starlight

  • Poppins | Fontsource

  • Poppins | Google Fonts

• CSS & Styling | Guides - Starlight

  • Contrast level: AAA

  • Accent [ 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

• Overriding Components | Guides - Starlight

• Overrides Reference | Reference - Starlight

Examples of customizations

• [GitHub] kinde-oss/documentation

• [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] wasp-lang/open-saas/opensaas-sh/blog

• [GitHub] rebecamurillo/astro-blog-i18n-starter - Astro built starter project for a static website and blog witth multilingual i18n configuration.

Docker

• Build your Astro Site with Docker | Astro Docs

• How to deploy your Astro static site with Nginx and Docker | Michaël Gainyo

• How to Dockerize and Deploy Astro | DEV Community