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.
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 thegatsby-plugin-sharp
andgatsby-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
andgatsby-transformer-remark
plugins to parse project markdown files and create static project detail pages during the build process using a page template set up insrc/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-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.