This is a Gatsby Starter with everything you need for a professional website. GatsbyJs version 4.21.0

• Correct Per-Page Meta/SEO using import { Script } from 'gatsby'
• Using Gatsby Head
• GDPR with gatsby-plugin-gdpr-cookies and react-cookie-consent
• Sitemap
• Site Manifest
• PWA
• Full Text Search with (Optional Image Search)
• Professional Page Scrolling
• Tags and Categories
• SSR and DSG Examples

Dependency's

    "dependencies": {
        "@builder.io/partytown": "^0.6.4",
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^3.0.2",
    "@mdx-js/react": "^2.1.3",
    "@theme-ui/color": "^0.14.7",
    "babel-plugin-prismjs": "^2.1.0",
    "babel-preset-gatsby": "^2.21.0",
    "framer-motion": "^7.0.0",
    "gatsby": "^4.21.0",
    "gatsby-plugin-anchor-links": "^1.2.1",
    "gatsby-plugin-catch-links": "^4.21.0",
    "gatsby-plugin-feed": "^4.21.0",
    "gatsby-plugin-gatsby-cloud": "^4.21.0",
    "gatsby-plugin-image": "^2.20.0",
    "gatsby-plugin-manifest": "^4.21.0",
    "gatsby-plugin-offline": "^5.21.0",
    "gatsby-plugin-react-helmet": "^5.21.0",
    "gatsby-plugin-sass": "^5.21.0",
    "gatsby-plugin-sharp": "^4.21.0",
    "gatsby-plugin-sitemap": "^5.21.0",
    "gatsby-plugin-theme-ui": "^0.14.7",
    "gatsby-remark-autolink-headers": "^5.21.0",
    "gatsby-remark-copy-linked-files": "^5.21.0",
    "gatsby-remark-embed-video": "^3.1.1",
    "gatsby-remark-images": "^6.21.0",
    "gatsby-remark-prismjs": "^6.21.0",
    "gatsby-remark-responsive-iframe": "^5.21.0",
    "gatsby-remark-smartypants": "^5.21.0",
    "gatsby-schema-field-absolute-path": "^1.3.0",
    "gatsby-source-filesystem": "^4.21.0",
    "gatsby-transformer-remark": "^5.21.0",
    "gatsby-transformer-sharp": "^4.21.0",
    "isomorphic-fetch": "^3.0.0",
    "lodash": "^4.17.21",
    "node-sass": "^7.0.1",
    "path": "^0.12.7",
    "prismjs": "^1.28.0",
    "react": "^18.2.0",
    "react-cookie-consent": "^8.0.1",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.4.0",
    "react-tsparticles": "^2.2.2",
    "rehype-react": "^7.1.1",
    "theme-ui": "^0.14.7",
    "tsparticles-preset-stars": "^2.2.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "^13.3.0",
    "@types/mdx": "^2.0.2",
    "@types/mdx-js__react": "^1.5.5",
    "@types/node": "^18.7.6",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@typescript-eslint/eslint-plugin": "^5.33.0",
    "@typescript-eslint/parser": "^5.33.0",
    "autoprefixer": "^10.4.8",
    "cssnano": "5.1.12",
    "eslint": "^8.21.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.30.1",
    "eslint-webpack-plugin": "^3.2.0",
    "gatsby-plugin-eslint": "4.0.2",
    "gatsby-plugin-postcss": "^5.21.0",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.27",
    "postcss": "^8.4.16",
    "prettier": "^2.7.1",
    "typescript": "^4.7.4"
  },

Update Basic Instructions Hosted on Gatsby Cloud is now built with Gatsby V4 "4.3.0", this includes many performance updates with Latest Gatsby!

gatsby-plugin-image With the Plugins proper usage.

---

Basic Instructions is Based on Starter Foundation

Gatsby Starter Basic Instructions

Kick off your project with this blog boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.

Have another more specific idea? You may want to check out our vibrant collection of official and community-created starters.

🚀 Quick start

1. Create a Gatsby site.

   Use the Gatsby CLI (install instructions) to create a new site, specifying the blog starter.

   # create a new Gatsby site using the blog starter
   gatsby new my-blog-starter https://github.com/donaldboulton/gatsby-starter-basic-instructions

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-blog-starter/
   gatsby develop

3. Open the source code and start editing!

   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 my-blog-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

🚀 Quick start (Gatsby Cloud)

Deploy this starter with one click on Gatsby Cloud:

🧐 What's inside?

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

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── yarn-lock
├── 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. LICENSE: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.

10. package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

11. 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.

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

💫 Deploy

Build, Deploy, and Host On The Only Cloud Built For Gatsby

Gatsby Cloud is an end-to-end cloud platform specifically built for the Gatsby framework that combines a modern developer experience with an optimized, global edge network.

👌 Features

• A Blog and Personal website with Netlify CMS.
• Responsive Web Design
• Using Theme-Ui for structure and styles
• Dark / Light Mode
• Blog Posts Tags Pages with a added component
• Blog Posts Categories Pages with a added component
• Using Remark-Rehype to add Html or Modules to Blog Posts Markdown Pages
• Customize theme color from CMS
• Search bar
• Customize content of Homepage, About and Contact page.
• Add / Modify / Delete blog posts.
• Edit website settings, Add Google Analytics and make it your own all with in the CMS.
• SEO Optimized
• Social media icons
• OpenGraph structured data
• Twitter Cards meta
• Beautiful XML Sitemaps, for now hand built
• Robots.txt
• Netlify Contact Form, Works right out of the box after deployment.
• Invite collaborators into Netlify CMS, without giving access to your Github account via Git Gateway
• Gatsby Incremental Builds with Netlify.
• Images with gatsby-plugin-image

🚀 Quick Deploy

Just click on the Deploy to Netlify button.

This would fork gatsby-starter-basic-instructions to your Github account and start building your website on Netlify. Once the deployment is done. Your website will be live and website address would look like site-name.netlify.app

Further Instructions

• Access to Netlify CMS
• Editing content and Adding posts
• Customing Site details
• Adding Custom domain to netlify website
• Install Locally
• Folder Structure
• Learning Gatsby
• Thank you from Basic Instructions

⚙ Access to Netlify CMS

Will not work on Gatsby Cloud

• Install Below
• Goto app.netlify.com > select your website from the list
• Goto identity and Click Enable Identiy
• Click on Invite Users and invite yourself. You will receive an email and you need to accept the invitation to set the password.
• Now headover to Settings > Identity > Services and Enable Git Gateway
• You can also manage who can register and log in to your CMS. Goto Settings > Identity > Registration >Registration Preferences. I would prefer to keep it to Invite Only, if i am the only one using it.
• Now, goto to site-name.netlify.app/admin/, and login with your credentials.

⛭ Installation of CMS

gatsby-plugin-netlify-cms Version @latest

netlify-cms-app Version @latest

yarn add gatsby-plugin-netlify-cms netlify-cms-app gatsby-plugin-netlify-cms-paths

gatsby.config file add

{
  resolve: 'gatsby-plugin-netlify-cms',
  options: {
    modulePath: `${__dirname}/src/cms/cms.js`,
  },
},

CMS file in src/cms

Add to initialize netlify-cms-app as a folder under src/cms/cms.js

import CMS from 'netlify-cms-app'

export default {
  CMS,
}

The Configuration file

Change /static/admin/config.yml file to your site needs.

Otherwise its tailored for this Configuration!

---

📝 Editing content and Adding posts

Once you are in your Netlify CMS, you can navigate to Posts and Pages. Here you will find a list of existing pages and posts.

You can select any existing post or page to start editing or add a New Post. Have fun :)

⚙ Customize Site details

You can find all the website settings such website Site title, Website URL, Google anlaytics etc,.. in your Netlify CMS Admin > Settings > General

🌐 Adding Custom domain to netlify website

Article on Custom domain with a Netlify website

🖥 Install Locally

Use the Gatsby CLI to create a new site, specifying the gatsby-starter-basic-instructions starter.

gatsby new gatsby-starter-basic-instructions https://github.com/donaldboulton/gatsby-starter-basic-instructions

You need Node and Gatsby-CLI installed, check out Gatsby Setup Instructions

Start developing

Navigate into your new site’s directory and start it up.

cd my-hello-world-starter/
gatsby develop

Open the source code and start editing!

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 gatsby-starter-basic-instructions directory in your code editor of choice and edit. Save your changes and the browser will update in real time!

You can use Netlify CMS in you local just run npx netlify-cms-proxy-server and start run gatsby develop

🙏 Thank you

We really appreciate you taking time to build your website with our gatsby-starter-basic-instructions.

I would love to get your feedback and contributions.

Feel free to ping @donaldboulton for help regarding your JAMstack website, our DM's are open. And do not forget to share your website with me 😊