Our great sponsors
-
-
markdown-it
Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
goldmark
:trophy: A markdown parser written in Go. Easy to extend, standard(CommonMark) compliant, well structured.
-
-
-
feed
A RSS, Atom and JSON Feed generator for Node.js, making content syndication simple and intuitive! 🚀
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
hugo-site
This is the repository from which the Hugo-generated version of https://www.brycewray.com is built.
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
-
-
-
-
-
-
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
SSG-based blogs almost always have you add content mainly through use of Markdown, so how a platform handles that is particularly important. Astro incorporates both the well-known Remark Markdown parser and rehype tool, and uses plugins from both. Some Remark plugins aren’t compatible with the latest version but, often, a rehype plugin can make up for that. Be sure to check for your specific use case. Also, notably, Astro allows you to put components in the Markdown (I’ll get to components further down). For example, if you’ve already imported an ImageBox.astro component as ImageBox, you could have Markdown like this:
Comparison: By default, Eleventy uses Markdown-it; like Astro, Gatsby and Next.js use Remark; and Hugo uses goldmark. As for Astro’s ability to mix components and Markdown on a page, probably the closest analogy to this is the use of MDX files in Gatsby and Next.js; Eleventy and Hugo can’t do this (however, see also “Components,” below, for some words on how Eleventy and Hugo use shortcodes which can provide some degree of code-in-Markdown functionality). Note that migrating an existing site to Astro from any of these other platforms probably will involve far more editing to your existing Markdown content than if you were migrating between two of the non-Astro platforms in this mix.
Comparison: By default, Eleventy uses Markdown-it; like Astro, Gatsby and Next.js use Remark; and Hugo uses goldmark. As for Astro’s ability to mix components and Markdown on a page, probably the closest analogy to this is the use of MDX files in Gatsby and Next.js; Eleventy and Hugo can’t do this (however, see also “Components,” below, for some words on how Eleventy and Hugo use shortcodes which can provide some degree of code-in-Markdown functionality). Note that migrating an existing site to Astro from any of these other platforms probably will involve far more editing to your existing Markdown content than if you were migrating between two of the non-Astro platforms in this mix.
Astro has no built-in support for Sass1 or Tailwind CSS, but accepts the usual packages to provide either. You can, of course, use vanilla CSS with no add-ons whatsoever.
Astro has no built-in support for Sass1 or Tailwind CSS, but accepts the usual packages to provide either. You can, of course, use vanilla CSS with no add-ons whatsoever.
There is no official Astro solution for working with images, but Astro ImageTools gives Astro the ability to provide optimized, responsive images.4
At least for now, Astro clearly falls short in this category. Its built-in ability to provide RSS feeds is rather limited, and it doesn’t yet enable JSON feeds at all.5 In the meantime, some users, including Yours Truly, have gotten around this by using the third-party feed package, which supports RSS and JSON feeds.6
Astro began life with Snowpack as its asset pipeline, which makes perfect sense given that the two projects came originally from the same development team. However, the developers soon reached the decision that Astro would be a better product if it used the impressive Vite package, instead. While the resulting switchover was a breaking change with a capital BC when it occurred, the capabilities it unlocked have proven the exceptional wisdom of this choice.
Having just moved my own site to Astro yesterday after a week or two of experimentation and grunt work, I can offer some opinions which may help you with that question. I’ll go through the “boxes” which I believe any SSG or other website development platform should “check” before you should give it a shot at this task, along with how I judge Astro’s ability to do so in each case.
Comparison: Eleventy has no built-in asset pipeline, so crafting one is pretty much left to the user. Gatsby and Next.js process assets by building in the venerable webpack bundler, thus taking on all the advantages and disadvantages thereof. Hugo has its own asset pipeline, Hugo Pipes.
Astro began life with Snowpack as its asset pipeline, which makes perfect sense given that the two projects came originally from the same development team. However, the developers soon reached the decision that Astro would be a better product if it used the impressive Vite package, instead. While the resulting switchover was a breaking change with a capital BC when it occurred, the capabilities it unlocked have proven the exceptional wisdom of this choice.
SSG-based blogs almost always have you add content mainly through use of Markdown, so how a platform handles that is particularly important. Astro incorporates both the well-known Remark Markdown parser and rehype tool, and uses plugins from both. Some Remark plugins aren’t compatible with the latest version but, often, a rehype plugin can make up for that. Be sure to check for your specific use case. Also, notably, Astro allows you to put components in the Markdown (I’ll get to components further down). For example, if you’ve already imported an ImageBox.astro component as ImageBox, you could have Markdown like this:
Astro is a Node.js package and, within sensible limits, works with pretty much all the Node packages you can throw at it, at least so long as you’re willing to handle the necessary configuration and, of course, maintain all the resulting “turtles-all-the-way-down” sets of dependencies (not to mention those included within Astro itself).3
Remember that Astro is still in beta, although the Astro team announced earlier this month that they plan for version 1.0 to go to general availability in June. For each item, I’ll assess Astro’s associated compliance or performance vs. that of a few other platforms I’ve used: in alphabetical order, Eleventy, Gatsby, Hugo, and Next.js.
Comparison: By default, Eleventy uses Markdown-it; like Astro, Gatsby and Next.js use Remark; and Hugo uses goldmark. As for Astro’s ability to mix components and Markdown on a page, probably the closest analogy to this is the use of MDX files in Gatsby and Next.js; Eleventy and Hugo can’t do this (however, see also “Components,” below, for some words on how Eleventy and Hugo use shortcodes which can provide some degree of code-in-Markdown functionality). Note that migrating an existing site to Astro from any of these other platforms probably will involve far more editing to your existing Markdown content than if you were migrating between two of the non-Astro platforms in this mix.
At least for now, Astro clearly falls short in this category. Its built-in ability to provide RSS feeds is rather limited, and it doesn’t yet enable JSON feeds at all.5 In the meantime, some users, including Yours Truly, have gotten around this by using the third-party feed package, which supports RSS and JSON feeds.6
Comparison: There are similar ways to do this with Eleventy, Gatsby, Hugo, and Next.js. While I would argue that it’s somewhat easier with Astro than with the others (Next.js’s data-fetching methods and related code are the most similar to Astro’s), that’s really subjective—with one notable exception. Gatsby’s use of GraphQL makes its data-fetching powers impressive but overly complex to use, and its dependence on GraphQL for so many capabilities reminds me of the old saw that "if all you have is a hammer, everything looks like a nail."
Comparison: One of Eleventy’s claims to fame is how it allows you to choose from among multiple templating languages as well as vanilla JavaScript. Gatsby and Next.js templates are built with JSX. Hugo is the only one of these platforms that doesn’t use JavaScript or a variation thereof for templates; instead, the Go-based Hugo relies on a very different, Go-derived templating language.
Remember that Astro is still in beta, although the Astro team announced earlier this month that they plan for version 1.0 to go to general availability in June. For each item, I’ll assess Astro’s associated compliance or performance vs. that of a few other platforms I’ve used: in alphabetical order, Eleventy, Gatsby, Hugo, and Next.js.
Have you been considering the popular new Astro static site generator (SSG) for maintaining your blog, whether it be a new website or one you’d be converting over from another platform?
Related posts
- Is deep selector still needed?
- I built an Markdown editor using Next.js and TailwindCss 🔥
- Implementing collaborative docs
- Render markdown from a string with Vue components instead of HTML tags
- So here’s a stupid question: using the chat API, what’s the best way to deal with formatting the results for web?