Upgrading to Astro 2.0

Astro 2.0 is here and I decided to try updating the framework powering this website and writing about the experience, you can read more about the announcement here

Files Changed

In total I had to modify 13 files for a blog that only had 2 entries at the time of upgrading, so 2 of those files are markdown files I had to move and 1 of them is the package-lock.json file.

Updating Astro

This blog was running on version 0.21.13 and while I was writing this post Astro went from version 2.0.0 to 2.0.1.

Changes

Here’s what had to change in order to support the new version.

Installed the following:

- "@tailwindcss/typography": "^0.5.0",
- "astro": "^0.21.13",
- "tailwindcss": "^3.0.7"
+ "@astrojs/mdx": "^0.15.0",
+ "@astrojs/rss": "^2.1.0",
+ "@astrojs/sitemap": "^1.0.0",
+ "@astrojs/tailwind": "^3.0.0",
+ "@tailwindcss/typography": "^0.5.9",
+ "astro": "^2.0.0",
+ "tailwindcss": "^3.2.4"

Moved from the old astro.config.mjs to the new one required by using defineConfig.

+ import { defineConfig } from 'astro/config'
+ import mdx from '@astrojs/mdx';
+ import tailwind from '@astrojs/tailwind';


- export default {
+ import sitemap from '@astrojs/sitemap';

+ export default defineConfig({
-   buildOptions:{ ... }
+   integrations: [mdx(), sitemap(), tailwind()],
+ });

Added posts.xml.js to a new src/pages/feed/ folder alongside a consts file supporting it.

+ import rss from '@astrojs/rss';
+ import { getCollection } from 'astro:content';
+ import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';

+ export async function get(context) {
+ 	const posts = await getCollection('posts');
+ 	return rss({
+ 		title: SITE_TITLE,
+ 		description: SITE_DESCRIPTION,
+ 		site: context.site,
+ 		items: posts.map((post) => ({
+ 			...post.data,
+ 			link: `/posts/${post.slug}/`,
+ 		})),
+ 	});
+ }

Added import "../styltes/global.css;" to the layout instead of using a ` tag to include the css used by the headers.

Removed the old layout declaration in the markdown content files.

Use getCollection instead of Astro.fetchContent to retrieve all of the blog posts.

- let allPosts = Astro.fetchContent('./posts/*.md');
- allPosts = allPosts.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));

+ import { getCollection } from 'astro:content';

+ const allPosts = (await getCollection('posts')).sort(
+ 	(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
+ );

Moved all markdown files to a content directory according to the docs.

Posts no longer included a url attribute so I had to use the slug to construct the url /posts/${slug}.

And that’s it, those were all the changes necessary, I’ll admit I haven’t read the docs for a lot of the changes but the tooling printed out some very helpful errors and I based most of the changes on the blog example.

State of Frontend

Having been building websites for more than 10 years I’d like for this process to finally mature and not have be worrying about dependencies no longer working in just a couple of years. I guess it’s my fault for trying something before their 1.0 release, but good job on making it easy to upgrade and providing useful error messages for it to happen. Looking forward to what the team at Astro comes up with next.

UPDATE: As I was trying to deploy this I got an error the the netlify Ubuntu Xenial 16.04 (deprecated) image was no longer working so add that to the things that had to be updated.