This site is using gatsby js as front end and wordpress as back end.
You can view live demo here https://wordpress-with-gatsby.netlify.com
1. Clone the repo.
git clone https://github.com/BRdhanani/headless-wordpress-with-gatsby.git
2. Start developing.
Navigate into your site’s directory and start it up.
cd headless-wordpress-with-gatsby
gatsby develop
3. Open the source code with your favourite code editor 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-workshop directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!
A quick look at the top-level files and directories you'll see in a Gatsby project.
components: This directory contains all the common components that your website depends on like header, footer etc.
src: This directory will contain all of the code related to what you will see on the front-end of your site .
.gitignore: This file tells git which files it should not track / not maintain a version history for.
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 like the site title and description, which Gatsby plugins you’d like to include, base url of wordpress from which you want get data etc.
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. This file also contains all the code to fetch all the pages, posts etc.
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.
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.
**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.
Deploy Your website to Netlify https://app.netlify.com/start
- Create Single Page Application With React js and WordPress REST API
- How to create custom Gutenberg block as a begginer
******* PLEASE follow me on Github ******