The website is built with Astro Starlight and hosted on GitHub Pages. The objective is to document my learning journey and insights in a beginner-friendly and structured way that can help other learners.

The site was setup using the following command. This starts a wizard that walks you through the process to scaffold the basic site under the selected folder (in this case docs/).

npm create astro@latest -- --template starlight

Once setup, you can use the following commands to build or preview the site, or get help with additional options:

Run these from the root of the site, from any terminal.

The default scaffolding looks as follows:

.
├── public/
├── src/
│   ├── assets/
│   │   ├── houston.webp
│   ├── content/
│   │   ├── docs/
│   │   └── config.ts
│   └── env.d.ts
├── .gitignore
├── astro.config.mjs
├── package.json
└── tsconfig.json

Place static assets under src/assets to serve them with Astro optimizations - or place them under public/ to serve them as is. The latter will be directly accesible under the /<imgname> route while the former will have a custom filename generated.

Astro uses file-based routing so any .md or .mdx file under src/content/docs/<X> gets mapped to /<X> by default.

Configure Astro by updating the astro.config.mjs file. Learn about Startlight customization options you can make here.

Astro Content Collections can help you "organize your documents, validate your frontmatter, and provide automatic TypeScript type-safety for all of your content".

A "collection" is formed by any top-level directory within src/content.Once you have a collection, you can start querying your content using Astro’s built-in content APIs. Use the src/content/config.ts file to define collections

• Explore the Starlight docs,
• Read the Astro documentation
• Join Astro Discord server.