Astro.js

Create an Astro project

Create a folder. Drag it into VS Code to open the project.
In the VS Code terminal run

npm create astro@latest

Follow the wizard:
1. Where should we create your new project? ./
2. How would you like to start your new project? Use minimal (empty) template
3. Install dependencies? Yes
4. Initialize a new git repository? Yes
Run npm run dev to start the dev server
Open the localhost URL (port 4321 if available) that is output to view your site.

Astro Files

Astro files can be used to:

Create files for your website: index.astro
Create components that can be reused throughout your website.
Create layout files that can insert other content into <slots />

Astro Components

Astro components are the basic building blocks of any Astro project.

---
const props = Astro.props;
---
<h1>Hello, World!</h1>

To use it simply make the above file and import it in another file:

import HelloComponent from "./HelloComponent.astro";

<HelloComponent />

Javascript in Astro

Inside a .astro file:

Javascript in the frontmatter is executed at build time to create static HTML for your site, and then the code is “thrown away.”
JS in a <script> tag only runs in the browser.

---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css";
const pageTitle = "Home";
---

<html lang="en">
<head>
      <title>{pageTitle}</title>
</head>
<body>
  <Header />
  <h1>{pageTitle}</h1>
  <Footer />
  <script>
    import "../scripts/menu.js";
    console.log("hello from the DevTools console!");
  </script>
</body>
</html>

Astro routing

A function to generate multiple, prerendered page routes from a single .astro page component with one or more parameters in its file path. Use this for routes that will be created at build time, also known as static site building. https://docs.astro.build/en/reference/routing-reference/#getstaticpaths

Astro Islands

https://docs.astro.build/en/concepts/islands/#client-islands

Astro Tutorials

Follow Astro’s Build a Blog tutorial to create a modular website using component-based design.

Publish Astro Site on Github Pages.

Correctly define config properties for publishing and update base URLs. ✏️ Add the full URL to your site
Deploy your Astro site using Github Pages (follow How to deploy but use the action on this page).

Define config properties for Github Pages

The below configuration example fixes your base and site properties to publish on Github.

Open astro.config.mjs
In defineConfig({}), change site to https:// + your username + .github.io.
Change base to / + your repository name.
Add output: 'static',.
Compare your file to the one below published at https://omundy.github.io/tarheeltrailblazers-astro

// @ts-check
import { defineConfig } from 'astro/config';
import svelte from "@astrojs/svelte";

export default defineConfig({
  site: 'https://omundy.github.io', // DOMAIN
  base: '/tarheeltrailblazers-astro', // REPOSITORY
  output: 'static',
  integrations: [svelte()]
});

Update base urls for Github Pages

99% of websites at Github Pages are published inside folders in a subdomain. For example, the domain for the site you are view ing is https://omundy.github.io while the folder is /dig345-radical-software. Unless you are publish directly to a domain (the repo name is your username, e.g. omundy.github.io), you need to change the internal links in your site so it can be published at Github Pages.

Open the following files and add const base = import.meta.env.BASE_URL; to end of the frontmatter in each file.

src/components/BlogPost.astro
src/components/Navigation.astro
src/layouts/MarkdownPostLayout.astro
src/pages/tags/index.astro

In src/components/BlogPost.astro change the link in the body:

<a href={`${base}${url}`}>{title}</a>

In src/components/Navigation.astro change the links in the body:

<div id="main-menu" class="nav-links">
    <a href={`${base}/`}>Home</a>
    <a href={`${base}/about`}>About</a>
    <a href={`${base}/blog`}>Blog</a>
    <a href={`${base}/tags`}>Tags</a>
</div>

In src/layouts/MarkdownPostLayout.astro change the tag link in the body:

<a href={`${base}/tags/${tag}`}>{tag}</a>

In src/pages/tags/index.astro change the tag link in the body:

<a href={`${base}/tags/${tag}`}>{tag}</a>

Astro + Svelte

Astro supports several types of integrations to import components in various languages.

Add Svelte Integration

Follow steps below to add a svelte integration

The astro add command installs Svelte and updates your astro.config.mjs file to include the Svelte integration.

npx astro add svelte

Create a Svelte Component

src/components/IdeaGenerator.svelte

Add the follow code

<script>
  let count = 0;
  function increment() {
    count++;
  }
</script>

<button on:click={increment}>
  Count {count}
</button>

<style>
  button {
    padding: 0.5em 1em;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
  }
</style>

Import the component

import Counter from '@/components/Counter.svelte';

<Counter client:load />

You should see something like this:

Here is another demo component. Find it in the components/examples directory of this project and publish it.

See the example to use fetch() with an API and Svelte’s params to pass data to the component.

Astro Resources

Astro documentation https://docs.astro.build/

Astro Themes

astro.build/themes - Big list, sortable by free, etc.
Tailwind themes that use Astro
Also see Astro Showcase and astro.new with frameworks, integrations, templates, etc.

Theme	Tailwind	Blog	Markdown	Simplicity	Themes	🌟	Experience
AstroWind (demo)	✅	✅	✅	⚠️	❌	5.4k	⚠️
Accessible Astro Starter (demo)	✅	✅	✅	✅	❌	1.1k	camplajolla.org
Titan Core (demo)	✅	✅	✅	⚠️	✅	74	⚠️
Bloomfolio (demo)	✅	✅	✅	✅	✅	61	n/a
Saral Theme (demo)	✅	✅	✅	✅	❌	53	n/a
Astro-Bootstrap (demo)	❌	✅	✅	✅	❌	40	n/a
Astro Base (demo)	✅	⚠️	✅	✅	❌	13	⚠️

Content Management Systems (CMS)

Allow non-technical editors to manage content on your Astro site. Some notable CMSs from the large list of possible integrations.

Astro Technical Notes

Typescript

Add // @ts-nocheck to the top of the <script> tag (the client side script) to silence all the Typescript errors in your .astro files. It saves from adding // @ts-ignore to each line.

Upgrade Astro

# Upgrade Astro and official integrations together
npx @astrojs/upgrade

Styling Slotted Content

Astro CSS rules are automatically scoped by default. Scoped styles are compiled behind-the-scenes to only apply to HTML written inside of that same component.

To make CSS work for content inside a slot, use Astro’s is:global

---
---
import Component from '@/components/Component.astro';
<Component>
<p>Hello, in red!</p>
</Component>

<div>
<slot />
</div>

<style is:global>
p { background-color: red; }
</style>

Add Tailwind to Astro

See Install Tailwind CSS with Astro

Configure @ Aliases

Aliases can help improve the development experience in codebases with many directories or relative imports.

Open tsconfig.json located at the root of your project. Astro projects include a tsconfig.json file by default.
Add baseUrl and paths to the compilerOptions object. The baseUrl should be set to . (the project root), and the paths define your aliases. A common setup uses @/ to point to the /src/ directory.
Restart your development server to ensure the changes are picked up.

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["src/components/*"],
      "@/layouts/*": ["src/layouts/*"],
      "@/assets/*": ["src/assets/*"],
      "@/styles/*": ["src/styles/*"],
      "@/*": ["src/*"]
    }
  }
}

The above changes this

---
import Button from '../../components/controls/Button.astro';
---

To this:

---
import Button from '@/components/controls/Button.astro';
---