Personal gastby website

This is interactive personal portfolio + blog built using Gastby SSG + lambda. The website is desinged and developed by Himanshu and Utkarsh.

Features

• Dark mode support.
• Upvote counter like medium with rate limited on FE
• Comments system using utterance.
• Lambda support for adding dynamic functionality
• Blog
• Project showcase + blog
• Responsive
• Newsletter support to build fanbase
• 100 Pagespeed Score

The project was built using React TS on Gatsby. For styling CSS Var + Emotion JS was used. For basic BE, Firebase + lambda were used.

The project is best suited to be deployed on Netlify, it is fast and easy. Although, it can be deployed on any JAMstack infra.

🚀 How to deploy

1.) Fork the repo

2.) Add project to netlify.

3.) Create firebase account and deploy the app.

4.) Change metaData for configuration.

5.) To enable comments, change the repo and install utterance to your repo.

🚀 How it works?

The tutorial how various components was built will be coming soon. I will try to address design, FE and BE aspects.

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── functions
├── src
├──── components
├──── contenxt
├──── hoc
├──── pages
├──── styling
├──── template
├──── utils
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

1. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

2. /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.

3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

4. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

5. gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

6. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

7. gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

8. gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

9. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

10. README.md: A text file containing useful reference information about your project.

🎓 Support this

If you like this, don't forget to star the repo. Also, please backlink to our website to show your support. Be nice :).