gatsby-wpgraphql-blog-example - GitLite

KO | EN

gitlite — search

#python #ai #llm #go #deep-learning #docker #nodejs #windows #cli #awesome-list #security #ios #mcp #open-source

gatsby-wpgraphql-blog-example

(★ 144)

Demo showing how to use WPGraphQL as the source for Gatsby Sites

파일 탐색기

최종 버전 다운로드 (.zip)

- createCategories.js
- createPages.js
- createPosts.js
- createTags.js
- createUsers.js
- screenshot-demo.gatsby-wpgraphql-blog-example.netlify.com.png
- screenshot-demo.wpgraphql.com.png
- - SiteLayout.js
  - style.css
- - gatsby-astronaut.png
  - gatsby-icon.png
  - gatsby-logo.png
  - wpgraphql-logo.png
- - 404.js
- - blog.js
  - categoriesArchive.js
  - category.js
  - page.js
  - post.js
  - tag.js
  - tagsArchive.js
  - user.js
- - index.js
.editoconfig
.eslintrc.json
.gitignore
.nvmrc
.prettierignore
.prettierrc
config.js
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
LICENSE
package-lock.json
package.json
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/wp-graphql/gatsby-wpgraphql-blog-example

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd gatsby-wpgraphql-blog-example

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# DEPRECATED
----
This repository serves as an example of how to build a Gatsby site using WordPress as the CMS, WPGraphQL as the API and Gatsby Source GraphQL as the data source.

This example repo should no longer be considered "the best" way to use Gatsby and GraphQL anymore. Instead of using Gatsby Source GraphQL, we recommend using [Gatsby Source WordPress Experimental](https://github.com/gatsbyjs/gatsby-source-wordpress-experimental), which will soon become the official Gatsby Source WordPress.

You can read more about why previous versions of Gatsby Source WordPress and Gatsby Source GraphQL are not ideal, and why Gatsby is investing in the new Gatsby Source WordPress Experimental plugin in this WPTavern article: https://wptavern.com/new-gatsby-source-wordpress-plugin-now-in-beta

----

<p align="center">
  <a href="https://www.gatsbyjs.org">
    <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
  </a>
  <a href="https://www.wpgraphql.com">
    <img alt="Gatsby" src="https://github.com/wp-graphql/wp-graphql/raw/develop/img/logo.png" width="60" />
  </a>
</p>
<h1 align="center">
  Gatsby + WPGraphQL Blog Example
</h1>

This is an example Gatsby site using WPGraphQL as the source.

## WordCamp Talk
This repo was created specifically for showcasing the capabilities of WPGraphQL and how it can be used in many ways. One particular use is with GatsbyJS. The WordCamp talk this repo was created for can be seen here: https://wordpress.tv/2019/03/08/jason-bahl-building-static-sites-with-wordpress-gatsby-and-wpgraphql/

## Setup

Quick video showing setup of the Gatsby site locally: https://www.youtube.com/watch?v=QkIuuZ5gZNk

## WordPress Source

The WordPress where the content is managed lives here: [https://demo.wpgraphql.com](https://demo.wpgraphql.com)

![Screenshot of the WordPress source site](https://raw.githubusercontent.com/wp-graphql/gatsby-wpgraphql-blog-example/master/img/screenshot-demo.wpgraphql.com.png)

## Gatsby Site

The Live Gatsby site is at: [https://gatsby-wpgraphql-blog-example.netlify.com/](https://gatsby-wpgraphql-blog-example.netlify.com/)

![Screenshot of the Gatsby site](https://raw.githubusercontent.com/wp-graphql/gatsby-wpgraphql-blog-example/master/img/screenshot-demo.gatsby-wpgraphql-blog-example.netlify.com.png)

### Features

Below are features of the Gatsby site that are all sourced via WPGraphQL Queries, so the data is 
managed in WordPress, but is pulled into the Gatsby site and rendered there:

- :white_check_mark: Menus
- :white_check_mark: Pages
- :white_check_mark: Paginated Blogroll/homepage
- :white_check_mark: Single Posts
- :white_check_mark: Authors
- :white_check_mark: Categories
- :white_check_mark: Tags