🌏 I made my website with Gatsby!
Tags: gatsby, portfolio, javascript, webdev
Published: 2020-02-21 10:34:00

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](https://chandujs.dev)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5atg81ge0eatsqvz6cgg.png)

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](https://www.gatsbyjs.org/starters)

## 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](https://www.gatsbyjs.org/packages/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](https://www.gatsbyjs.org/packages/gatsby-source-filesystem) To listing all the files in the project
- [gatsby-plugin-sharp](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp) Several image processing functions
- [gatsby-transformer-sharp](https://www.gatsbyjs.org/packages/gatsby-transformer-sharp) Creates ImageSharp nodes from image types that are supported by the sharp image processing library
- [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark) Parses Markdown files using Remark.
- [gatsby-remark-images](https://www.gatsbyjs.org/packages/gatsby-remark-images) Processes images in markdown so they can be used in the production build.
- [gatsby-remark-relative-images](https://www.gatsbyjs.org/packages/gatsby-remark-relative-images) Convert image src(s) in markdown to be relative to their node’s parent directory. 
- [gatsby-plugin-extract-image-colors](https://www.gatsbyjs.org/packages/gatsby-plugin-extract-image-colors) Extracts colors from image adds them to the image data

### Optimization
[Performance optimization](https://www.gatsbyjs.org/docs/performance/) 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](https://chandujs.dev/blog/how-i-purged-95-of-unused-bootstrap-css-from-my-gatsby-website-3khi)

{% link https://dev.to/ctrleffive/how-i-purged-95-of-unused-bootstrap-css-from-my-gatsby-website-3khi %}

### 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](https://www.netlifycms.org/docs/start-with-a-template)

### 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](https://www.gatsbyjs.org/packages/gatsby-plugin-offline) node package and Add below to end of `plugins` array in your `gatsby-config.js` file

```js
[
//...
    {
      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](https://github.com/ctrleffive/chandujs.dev). Feel free to use it as per the license.**