Migrating my website from Gatsby to Astro

• astro

  565 48,242 9.9 TypeScript

  The web framework for content-driven websites. ⭐️ Star to support our work!

  

  During all this time another JS framework was being developed called Astro. Astro claimed to ship zero JavaScript, 1st class MD/MDX support, great 1st party plugins and to top it all off, allowed you to choose framework of your choice on a per page/per component basis. That's right. You can import a React, Vue, Svelte or any of the supported frameworks all in a single Astro component and it would just work™!

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• flashblaze-website

  1 0 10.0 JavaScript

  Discontinued Personal website

• flashblaze-astro

  2 1 6.7 MDX

  Personal website built using Astro

  Since I was developing my website from scratch I discarded the old design and redesigned it to make it look decent with minimal JS. And so I pushed my 1st commit on 14th Aug 2022

• Gatsby

  369 55,558 8.8 JavaScript

  The best React-based framework with performance, scalability and security built in.

  

  So after researching, I found two frameworks which fit my bill perfectly: Gatsby and Next.js. I wasn't going to call any APIs and my content was all going to be static so I did not need any SSR solution. And since Gatsby had excellent plugin support I decided to go with it.

• turbo

  153 6,824 8.3 JavaScript

  The speed of a single-page web application without having to write any JavaScript (by hotwired)

  

  Like Gatsby or Next, Astro does not have any client side navigation. So each link click triggers a full page reload. Astro recommends to use Swup as mentioned here. Turbo is also another option though the team does not recommend it. I'm currently using Swup which I'll probably switch from or completely remove it as I have added TOC to MDX and clicking on a title is not redirecting the page to that particular section.

• theme-ui

  22 5,317 7.6 TypeScript

  Build consistent, themeable React apps based on constraint-based design principles

  

  theme-ui

• Tailwind CSS

  1,446 84,402 9.8 TypeScript

  A utility-first CSS framework for rapid UI development.

  

  Instead of some UI framework/styling solution which was specifically tailored for React, I went with Tailwind CSS. It is hugely popular, has good support for almost all the frameworks, is a 1st party plugin from Astro and was great to get started with. For my posts I chose MDX and for components in MDX I chose React.

• swup

  17 4,734 8.8 TypeScript

  Versatile and extensible page transition library for server-rendered websites 🎉

  

  Like Gatsby or Next, Astro does not have any client side navigation. So each link click triggers a full page reload. Astro recommends to use Swup as mentioned here. Turbo is also another option though the team does not recommend it. I'm currently using Swup which I'll probably switch from or completely remove it as I have added TOC to MDX and clicking on a title is not redirecting the page to that particular section.

• React

  1,875 231,174 9.9 JavaScript

  The library for web and native user interfaces.

  

  The year was 2019 and I wanted to build a website using React. I had some experience in it, having done a project during my 3rd year of engineering but I wanted my site to be SEO friendly, fast, have client side navigation and good DX.

• Next.js

  2,238 128,418 10.0 JavaScript

  The React Framework

  

  So after researching, I found two frameworks which fit my bill perfectly: Gatsby and Next.js. I wasn't going to call any APIs and my content was all going to be static so I did not need any SSR solution. And since Gatsby had excellent plugin support I decided to go with it.

• mdx

  106 17,939 8.4 JavaScript

  Markdown for the component era

  

  Since I was going to write blog posts using MDX, needed good SEO, along with PWA (why not) and with the above mentioned stack, I needed a lot of plugins and by lot I mean A LOT.

• blurhash

  43 15,987 4.3 C

  A very compact representation of a placeholder for an image.

  

  No blurhash for images like Next or Gatsby

Suggest a related project