Personal web implemented with Gatsby

george.davituri.dev

Development workflow:

🎉 To start your development process, Run gatsby develop in the terminal. This will prepare the project for work and launch watch tasks to update files on-the-fly as you work.

Production build:

👻 Production-ready files, Run gatsby build and grab entire public folder. 💜

Technologies:

Tech	Description	Using
React	Blazing fast workflow for static web with React.js	Gatsby, React
CSS	Components are styled using CSS/SASS modules.. inside pages folder is used styled-components.	(sass/modules,autoprefixer,helmet) styled-components
Offline-first	Progressive Web App (PWA)	Service worker
GraphQL	Compared to be an alternative and even replace to REST web services, 'in a couple of years'. But main reason of usage is that Gatsby is powered by GraphQL.	GraphQL
DATA SOURCE	In this case I used simple Markdown. But it can be any type of database, APIs.	remark filesystem
Hosting & CMS	Hosting for static web.	Netlify, Content Management System

Project structure:

• src/

  • components/ ****

  • pages/

    • index.js #Main page.
    • contact/ #Contact form page.
    • blog/ #Blog page with some content inside.
    • about/ #Info about me.
    • gallery/ #Gallery.
    • projects/ #Projects.

  • templates/ #Actual pages based on Markdown files.

  • markdown/ #Data source

    • blog/
    • gallery/
    • projects/

• / #Root files

  • .gatsby-config

    Can Include: siteMetadata, list of different plugins configurations. more info

  • .gatsby-node

    Basically it is used for database access, APIs call. In this case to create page based on Markdown file. more info

  • .package.json

    Gives some useful npm dependency information..

  • static/

    • admin/ CMS config.

    • assets/

Feedback

If you have encountered a bug, or have a useful suggestion how to improve code
create issue, or make a pull request!