Even though I've been a web developer for more than 6 years, I bought a domain name for my website only in 2018. And just now I finished my website. I'm lazy, maybe.

But I am pretty sure that this website is the fast, performance-optimized website I've ever made.

chandujs.dev

Pretty simple, right?

Lets breakdown the things I used to build my website.

Gatsby

This static site generator made me think to reconsider getting back in web development.
Gatsby is fast, performance baked in, modern static site generator for React. The first version of the website was done in Angular. I ported it to Gatsby after I learned Gatsby.

You can clone a starter project and start messing around from here

Plugins

Gatsby’s plugin archive is rich enough. You will get plugins for almost anything for your website.

Blogging

I have a blog section on my website. So I used gatsby-source-dev plugin to fetch dev.to posts of my user id and render on my website. Effortless blogging 😎

Portfolio Showcase

For displaying my portfolio on the website I've used the following plugins.

• gatsby-source-filesystem To listing all the files in the project
• gatsby-plugin-sharp Several image processing functions
• gatsby-transformer-sharp Creates ImageSharp nodes from image types that are supported by the sharp image processing library
• gatsby-transformer-remark Parses Markdown files using Remark.
• gatsby-remark-images Processes images in markdown so they can be used in the production build.
• gatsby-remark-relative-images Convert image src(s) in markdown to be relative to their node’s parent directory.
• gatsby-plugin-extract-image-colors Extracts colors from image adds them to the image data

Optimization

Performance optimization is out of the box available in Gatsby.

I wrote a separate article about how I purged 95% of unused bootstrap from the website. Read it here

🗜 How I purged 95% of unused CSS from my Gatsby website

Chandu J S ・ Feb 21 '20 ・ 1 min read

#gatsby #css #bootstrap #webdev

Netlify CMS

I'm using a headless CMS from Netlify which is a simple easy to integrate CMS you can use with your static site. It's very easy to integrate with a Gatsby website.
Learn more about Netlify CMS here

Progressive Web App

This website is PWA, which means you can access the website later once you open the website. You can make a Gatsby website a PWA with very easy steps.

Install gatsby-plugin-offline node package and Add below to end of plugins array in your gatsby-config.js file

[
//...
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'Chandu J S',
        short_name: 'Chandu',
        start_url: '/',
        background_color: Variables.colors.brand,
        theme_color: Variables.colors.brand,
        display: 'standalone',
        icon: 'src/assets/images/icon.png',
        crossOrigin: `use-credentials`,
      },
    },
    'gatsby-plugin-offline',
//...
]

Netlify

In terms of hosting, I had to pay NOTHING to host my website 😁. Netlify is an awesome service that provides free hosting for static websites.

It doesn't matter what kind of static site generator you have, almost all kind of them are supported by Netlify.

Let me know in the comments if I need to clarify anything more.

The source code of my website is open and available here. Feel free to use it as per the license.