gatsby-blog

My personal blog and project portfolio! This site uses Gatsby and React to ensure a lightning-fast, seamless user experience. By leveraging Gatsby’s static site generation and React’s component-based architecture.

⚙️ What's inside?

A quick look at the top-level files and directories in this project.

.
├── src/
│   ├── components/
│   │    └── ...
│   ├──images/
│   │   └── image.png
│   │    └── ...
│   ├──pages/
│   │   └── index.js
│   │   └── 404.js
│   │   └── ...
│   ├── posts/
│   │   └── ...
│   ├── styles/
│   │   └── global.css
│   │   └── ...
│   └── templates/
│       └── ...
│
├──static/
│   └── ...
│
├── .gitignore
├── gatsby-config.js
├── gatsby-node.js
├── LICENSE
├── package.json
├── package-lock.json
└── README.md

• /src: This directory will contain all of the code related to what you see on the site's front end.

• /src/components: This directory will contain all the react components used in the front end.

• /src/images: This directory will contain all images the site requires.

  We use the gatsby-plugin-image with the gatsby-plugin-sharp and gatsby-transformer-sharp plugins to optimize image loading based on device and viewport requirements.

• /src/pages: This directory contains all the individual pages for the website.

• /src/pages/index.js: Homepage and main entry point of the website.

• /src/pages/404.js: Customised 404 not found page when an invalid route is attempted.

• /src/posts: This directory contains all the project/post markdown files, which will be used to construct the content for the template pages.

• /src/styles: This directory contains global and page specific css modules.

• /src/templates: This directory contains page-specific template styles for generating static pages.

• /static: This directory contains static images and icons used in the front end.

• gatsby-config.js: This is the main configuration file for a Gatsby site. This is where specific information about the site (metadata) like title, description and which Gatsby plugins are included, etc... Check out the Gatsby Config Docs for more detail.

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

  We use the gatsby-transformer-filesystem and gatsby-transformer-remark plugins to parse project markdown files and create static project detail pages during the build process using a page template set up in src/template.

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

⚡Gatsby Plugins Used

• gatsby-source-filesystem: Plugin used for sourcing data into your Gatsby application from your local filesystem.

• gatsby-transformer-remark: Parses Markdown files using remark.

• gatsby-remark-prismjs: Adds syntax highlighting to code blocks in markdown files using PrismJS.

• gatsby-plugin-manifest: The manifest provides configuration and icons.

• gatsby-plugin-image: The Gatsby Image plugin handles the hard parts of producing images in multiple sizes and formats to optimize image loading and performance.

🎓 Learning Gatsby

In-depth tutorial for creating a site with Gatsby. Full documentation for Gatsby can be found on gatsbyjs.com.

This site was built using the gatsby-starter-hello-world template.

# create a new Gatsby site using the hello-world starter
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world

🛠️ Build and Develop

Navigate into the project directory and start with gatsby develop.

cd my-hello-world-starter/
gatsby develop

Your site is now running at http://localhost:8000

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby Tutorial.

Open the source code and start editing! 🎉🎉🎉