Migrating my website from Gatsby to Astro

• astro

  503 42,342 10.0 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™!

• flashblaze-website

  1 0 10.0 JavaScript

  Discontinued 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" } }

• SurveyJS

  surveyjs.io sponsored

  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.

  

• flashblaze-astro

  2 1 7.0 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

  356 55,016 9.3 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

  145 6,415 8.7 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

  19 5,212 8.2 TypeScript

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

  

theme-ui

• Tailwind CSS

  1,279 78,370 9.4 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.

• InfluxDB

  www.influxdata.com sponsored

  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.

  

• swup

  17 4,437 9.7 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,693 221,803 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,041 120,572 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

  99 16,811 8.7 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

  41 14,997 5.5 C

  A very compact representation of a placeholder for an image.

  

No blurhash for images like Next or Gatsby

Suggest a related project