How I built an Advanced Gatsbyjs site

In last month i build a test site using Gatsby where i loved the site loading speed and its plugin ecosystem.

After that, i build an advanced site using Gatsby still works the same 100% loading speed.

Advanced means i concentrated on everything while building a site.

Final outcome when i test it on google chrome audits.

Everything is 100% even i checked on applied CPU 4x throttling it's still 90% performance.

Why i built this site?

• I have a problem in reading long blog posts or tutorials where i often confused to read it from top to bottom.

Let's talk about SEO now.

• Even i added an SEO to my site with Structured data where i used json/LD for the rich snippets.

What i have learned by building this site?

At starting i really don't have any idea where to start but by building this i have learned many things.

first, i have used code sandbox where i faced a problem even my code is correct but it's doesn't work so i checked it on my local machine it works fine i figured it out after 1 day of debugging it literally made me laugh.

so sometimes you need to check your code on the local machine.

I have learned some things about accessibility which are color blindness people are not able to see properly of red and green colors and they both look as a brown color to them, less contrast, small text, keyboard interaction like is your site navigation works perfectly without the mouse by using tab keys.

They are lot of people in the world having some type of disabilities.
If you're interested in accessibility read the stories about how disability people using the web

My code is open sourced.

My site url

Code repository

If you love my work give me a 🌟 star on GitHub

Resources

1. Chrome dev tools.
2. Web accessibility tutorials
3. Seo starter guide by Google
4. Create a high-quality page
5. Think with the Google

Comments

[Tim Smith]

Really cool site. As someone else who uses Gatsby, it’s great to see what other people build with it. I did notice that on mobile, the Github logo in the navbar is sitting on top of the JavaScript item.

[Sai gowtham]

Yeah but it's visible when you slide it

[Tim Smith]

Ah. Yep. I see that now.

[aurel kurtula]

I know nothing's meant by it, but could you change this:

so we need to build a site not only for people who are perfect but we need to think of the people with disabilities.

If anything can be said with certainty is that no one is perfect!

I can't express it in words how much I believe that's a typo but please lets change it.

You're site looks amazing and you are amazing for making it accessible to everyone.

[Sai gowtham]

Yeah I removed it

[Kevin Coleman]

Why did you remove the "json/LD for the rich snippets"?

github.com/saigowthamr/jshype.com/...