Migrating my website from Gatsby to Astro

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • Sonar - Write Clean JavaScript Code. Always.
  • astro

    Build faster websites with Astro's next-gen island architecture 🏝✨

    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™!

  • flashblaze-website

    Personal website

    { "name": "flashblaze-website", "private": true, "description": "Personal website of Neeraj Lagwankar", "version": "1.0.0", "author": "Neeraj Lagwankar ", "scripts": { "build": "gatsby build", "develop": "env-cmd -f .env.development gatsby develop -H 0.0.0.0", "format": "prettier --write \"**/*.{js,jsx,json,md,mdx}\"", "lint": "npm run format && eslint --fix . && echo 'Lint complete.'", "start": "npm run develop", "serve": "npm run build && gatsby serve", "clean": "gatsby clean" }, "dependencies": { "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "@supabase/supabase-js": "^1.21.1", "gatsby": "^3.11.1", "gatsby-plugin-google-analytics": "^3.11.0", "gatsby-plugin-google-fonts-v2": "^1.0.0", "gatsby-plugin-manifest": "^3.11.0", "gatsby-plugin-mdx": "^2.11.0", "gatsby-plugin-offline": "^4.11.0", "gatsby-plugin-preact": "^5.11.0", "gatsby-plugin-react-helmet": "^4.11.0", "gatsby-plugin-remove-serviceworker": "^1.0.0", "gatsby-plugin-sharp": "^3.11.0", "gatsby-plugin-sitemap": "^4.7.0", "gatsby-plugin-theme-ui": "^0.10.1", "gatsby-plugin-typography": "^3.11.0", "gatsby-remark-autolink-headers": "^4.8.0", "gatsby-remark-images": "^5.8.0", "gatsby-remark-prismjs": "^5.8.0", "gatsby-remark-relative-images": "^2.0.2", "gatsby-source-filesystem": "^3.11.0", "preact": "^10.5.14", "preact-render-to-string": "^5.1.19", "prismjs": "^1.24.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-helmet": "^6.1.0", "react-icons": "^4.2.0", "react-player": "^2.9.0", "react-spring": "^9.2.4", "react-typography": "^0.16.20", "remark-emoji": "^2.2.0", "theme-ui": "^0.10.0", "typography": "^0.16.21" }, "devDependencies": { "babel-eslint": "^10.1.0", "env-cmd": "^10.1.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^3.4.0", "prettier": "^2.3.2" }, "keywords": ["gatsby", "portfolio", "flashblaze"], "repository": { "type": "git", "url": "https://github.com/flashblaze/flashblaze-website" }, "bugs": { "url": "https://github.com/flashblaze/flashblaze-website/issues" } }

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  • flashblaze-astro

    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

    The fastest frontend for the headless web. Build modern websites with React.

    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

    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

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

    theme-ui

  • Tailwind CSS

    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.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • swup

    :tada: Complete, flexible, extensible, and easy-to-use page transition library for your server-side rendered website.

    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

    A declarative, efficient, and flexible JavaScript library for building 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

    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

    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

    A very compact representation of a placeholder for an image.

    No blurhash for images like Next or Gatsby

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts