Personal blog site built using Gatsby and React, leveraging Gatsby's static site generation to create pages from Markdown files. The site utilizes React and GraphQL to render dynamic content.
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.
This site was built using the gatsby-starter-hello-world template.
In-depth tutorial for creating a site with Gatsby. Full documentation for Gatsby can be found on gatsbyjs.com.
# create a new Gatsby site using the hello-world starter
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
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! 🎉🎉🎉