How to setup and use Astro

Astro is a framework designed for content such as blogs however this framework allows integration of existing popular frameworks and libraries such as React, Vue.js, Svelte etc.

My use case is to host a Notion blog using content in markdown format and Astro should be able to accomplish that task.

To begin create an Astro project using the Bun JavaScript runtime and answer the questions that are shown.

bun create astro@latest

After the project has been created change the current directory into the new project.

cd astro

Now run the Astro app.

bunx --bun astro dev

The app should be able at http://localhost:4321

Open up a code editor such as VSCode and go to the file astro/src/pages/index.astro and look through and see how the Astro app is built.

Create a new page

Go to the pages directory and create a new file named test.astro with the following content.

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Test Page">
    <main>
        <h1>Test Astro Page</h1>
        <p>Here is some example text</p>
    </main>
</Layout>

<style>
    main {
        margin: auto;
        width: 800px;
        color: white;
    }
</style>

Go to http://localhost:4321/test and you will see the new page loaded.

Create a page with a dynamic route

While inside of the pages folder create a new folder named dynamic and then inside of that new folder create a new page named [id].astro (Yes including the square brackets). Add the following content to the new file.

---
import Layout from '../../layouts/Layout.astro';

export function getStaticPaths() {
  return [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } }
  ];
}

const { id } = Astro.params;
---

<Layout title="Test Page">
    <main>
        <h1>ID</h1>
        <p>ID is { id }</p>
    </main>
</Layout>

<style>
    main {
        margin: auto;
        width: 800px;
        color: white;
    }
</style>

Every dynamic page requires the getStaticPaths method defined as you have to state what IDs can be used.

Go to http://localhost:4321/dynamic/2 to see the new page.

Generating static pages

Go to the terminal and run the Astro build command to generate pages for the above pages that were created.

bunx --bun astro build

Inside the project folder, you will notice a new dist folder created, have a look through and you will see all the generated pages from the new pages created above.