Home logo

Migrating from NextJS to Astro - how i created a amazing static website

Ai Anshu | Fri Dec 16 2022

I’m too much passionate about computers that starting learning to write computer code and website code at the age of 14 but as the time passes i started thinking to share my knowledge and thoughts, research & invention to the world. so i created a static blog website with hugo, gatsby, nextJS and now Astro.

First version with WordPress

link $First version with WordPress

it all start from one thought to create a blog website and to do that WordPress is the only option i have due to my tech skills at that time. i was created a WordPress blog but now i have some of the main problems that i was facing. here they are

  • web hosting cost
  • domain cost
  • expansive theme & plugins

a simple blog site with just a static content cost me over 100$ so i starting to looking for some other solutions and after searching for some hours i was landed on a very attrective site of Fireship. i was very impress from that website so i looked for the tech stacks that they use to create fireship’s site and then i was landed on a static site generator Hugo.

Second version with Hugo

link $Second version with Hugo

simply i read there documentation for creating a website for me i use tailwindCSS and Hugo and Markdown to create a first staitic version of codeNanshu hosted on google’s firebase.

after creating a static blog the main feature i got is speed, low costing and maximum level of control over frontend design. with the help of Google Firebase i was able to host almost 10GB of static site content for free and that was huge number for a static site

Google Adsence approval

link $Google Adsence approval

the good news a god after this update is i god approved from Google Adsence due to the speed and structure of website. i was not able to get Adsence approvle in WordPress website due to some unknown reasons.

hugo was really good but the problem is JavaScript. i want to add some interactivity like React in the website to make site more cool but this need too much configuration with hugo and there is no option to just start with a one single commad.

Third version with Gatsby

link $Third version with Gatsby

After facing the interactivity problem with hugo i decided to rewrite my site with ReactJS but React is completely client side its not too good for just a static website so after searching for a while i came on a conclution to rewrite my entire website with gatsbyjs.

after rewriting the entire site with

  • gatsby
  • tailwindcss
  • netlify
  • circleCI

this was really god because at that time i gained really good speed, SEO, image optimization and many more cool features. Gatsby is really so good but i am not able to put Ads in Gatsby site and the build time is really so high that’s became my main issue and its critical to solve that build time issue because i want everything to be free like there is no cost for this amazing website.

but i was a unable to fix that build time issue so decided to rewrite the site in other framework so that problem get solved.

Forth version with NextJS

link $Forth version with NextJS

the best decision i ever made related to the site future is to write my website in nextJS. its really so good i created a wonderful website with the feature of blog, notes, about, a complete learning platform from my youtube cources and much more with the help of

  • nextjs
  • giscus
  • netlify
  • circleCI
  • netlifyCMS
  • Chackra UI
  • Google Anylitics
  • Google Adsence

this was really a big project it took too much of time but i created that site in just 2 months of code.

the site was really good i feels like now there is no need to rewrite the site is really one of the amazing project i ever created. the build time is too low its about just 1 minute and the feature are too good also.

but are mind never get in one position with time i was facing some problem like in dark mode the google ads look too weird and my plan was just to create a blog with some blog posts but with the help of nextjs i just created a fully functional website with so many useless features. my words for this projects is like i order to create a simple app i just created complete useless operation system 🤦.

so i decided to recreate my site with some lightweight full speed framework that help me to add all the necessary tools like google ads, analytics and a simple design

Fifth version with Astro

link $Fifth version with Astro

now this is with astro just a simple a website with simple newsletters, blog, notes, about, contact and a CMS this time the site was created with

  • Astro
  • AlpineJS
  • TailwindCSS
  • MDX
  • NetlifyCMS
  • Cloudinary
  • partytown

site speed is really good, ads are working perfectly, SEO is really good overall after write the website more than blog posts 😂 i finally got a website with no problem. build time is about 37 S. i really impressed with this framework.