Basic Instructions is Based on Starter Foundation

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

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

Start developing.

Navigate into your new site’s directory and start it up.
```
cd my-blog-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 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

/node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
/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”.
.gitignore: This file tells git which files it should not track / not maintain a version history for.
.prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.
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.
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).
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.
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.
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.
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).
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.
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

⚙ 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 😊

Name		Name	Last commit message	Last commit date
Latest commit History 187 Commits
.github/workflows		.github/workflows
src		src
static		static
.babelrc		.babelrc
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
ads.txt		ads.txt
gatsby-browser.tsx		gatsby-browser.tsx
gatsby-config.ts		gatsby-config.ts
gatsby-node.ts		gatsby-node.ts
gatsby-ssr.tsx		gatsby-ssr.tsx
google9026ce55776d155c.html		google9026ce55776d155c.html
netlify.toml		netlify.toml
package.json		package.json
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Dependency's

Basic Instructions is Based on Starter Foundation

Gatsby Starter Basic Instructions

🚀 Quick start

🚀 Quick start (Gatsby Cloud)

🧐 What's inside?

💫 Deploy

👌 Features

🚀 Quick Deploy

Further Instructions

⚙ Access to Netlify CMS

Will not work on Gatsby Cloud

⛭ Installation of CMS

gatsby.config file add

CMS file in src/cms

The Configuration file

📝 Editing content and Adding posts

⚙ Customize Site details

🌐 Adding Custom domain to netlify website

🖥 Install Locally

Start developing

🙏 Thank you

About

Releases 1

Packages

Languages

License

donaldboulton/gatsby-starter-basic-instructions

Folders and files

Latest commit

History

Repository files navigation

Dependency's

Basic Instructions is Based on Starter Foundation

Gatsby Starter Basic Instructions

🚀 Quick start

🚀 Quick start (Gatsby Cloud)

🧐 What's inside?

💫 Deploy

👌 Features

🚀 Quick Deploy

Further Instructions

⚙ Access to Netlify CMS

Will not work on Gatsby Cloud

⛭ Installation of CMS

gatsby.config file add

CMS file in src/cms

The Configuration file

📝 Editing content and Adding posts

⚙ Customize Site details

🌐 Adding Custom domain to netlify website

🖥 Install Locally

Start developing

🙏 Thank you

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages