Upgrading my website to Astro v1.0

So, Astro came out with some beta versions of their v1.0 release of the framework. I upgraded my website to use that version, since I was still running on v0.24 (2 or 3 months behind). The following are the changes I had to do to get it working.

New Markdown API

`Astro.glob()` vs. `Astro.fetchContent()`

Astro has replaced the ‘old’ Astro.fetchContent() with a newer version called Astro.glob().

This is what the older API looked like:

---
const blogposts = Astro.fetchContent("*.md");
---

<body>
  <ul>
    {
      blogposts.map((blogpost) => {
        return <li>{blogpost.title}</li>;
      })
    }
  </ul>
</body>

In my eyes the new API looks way better and is more developer friendly since it uses await, which also means, you can use .then() & .catch().

Here is what it looks like:

---
const blogposts = await Astro.glob("*.md");
---

<body>
  <ul>
    {
      blogposts.map((blogpost) => {
        return <li>{blogpost.frontmatter.title}</li>;
      })
    }
  </ul>
</body>

An example of what the .then() use, could look like:

---
const blogposts = await Astro.glob("./**/*.md").then((posts) =>
  posts.sort(
    (a, b) =>
      new Date(b.frontmatter.createdAt) - new Date(a.frontmatter.createdAt),
  ),
);
---

Frontmatter and variables

Did you notice in the above example that I used blogpost.frontmatter.title?

Yup, that’s an example of the new Markdown API.

The new API gives you access to the frontmatter as a whole with variables as an object.

Check out the official docs about this here.

Default script behaviour

The default <script> behaviour has changed to default hoist, which means that Astro will process the scripts by default. This behaviour can be changed by using <script is:inline> to tell the Astro compiler to leave your script unchanged and unprocessed.

More about that here.

New configuration API

Some changes also ocurred in the astro.config.mjs file.

Here’s an example of the new API:

import { defineConfig } from "astro/config";
import sitemap from "@astrojs/sitemap";

// https://astro.build/config
export default defineConfig({
  trailingSlash: "ignore",
  site: "https://www.elian.codes",
  server: {
    port: 3000,
  },
  integrations: [
    sitemap({
      canonicalURL: "https://www.elian.codes",
    }),
  ],
});

Note that the integrations object is a new thing, which basically contains the renderers and other Astro packages. Here I’ve used it to load in the sitemap configuration, since the sitemap: true is depricated.

Keep in mind that the @astrojs/sitemap is a new and seperate package, so should be installed too.

That’s basically all I had to do. If you’re interested to upgrade your Astro website to v1.0-beta and need some more guidance, here’s the Official upgrade & migration guide

Written by Elian Van Cutsem

← Back to blog