GithubHelp home page GithubHelp logo

gatsby-starter-wordpress-blog's Introduction

Gatsby

Gatsby WordPress blog starter

Kick off your wordpress gatsby project with this blog boilerplate. This starter ships with the main Gatsby Wordpress 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

To get your project started or to just try it out, you can follow the Gatsby Wordpress Quickstart instructions

🧐 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
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ 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). *Wordpress Users: This is where you configure your wordpress URL, and provide other plugin settings.*

  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. *Wordpress Users: This is where you customize how gatsby consumes your wordpress graphql schema, and generates your gatsby content schema. The starter will handle post and blog types.*

  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.

πŸŽ“ Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

πŸ’« Deploy

Deploy this starter with one click on Gatsby Cloud:

Deploy to Gatsby Cloud

gatsby-starter-wordpress-blog's People

Contributors

acao avatar jxnblk avatar kyleamathews avatar rmatambo8 avatar thinkybeast avatar tylerbarnes avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gatsby-starter-wordpress-blog's Issues

ERROR #98124 - WEBPACK - Can't resolve 'mitt' in 'D:\gatsby\my-wordpress-gatsby-site\.cache'

What I did,

  1. Installed 'gatsby new my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-blog'
  2. Open VS Code
  3. Change gatsbyconfig.js to my local WP (Installed the required 2 plugins) tried not changing and the same result
  4. Run gatsby develop

Result:
ERROR #98124 WEBPACK

Generating development SSR bundle failed

Can't resolve 'mitt' in 'D:\gatsby\my-wordpress-gatsby-site.cache'

https://prnt.sc/12mm1xx

What I tried:

  • Remove package-lock.json
  • Issue gatsby clean to purge
  • Remove node_modules folder.
  • Install the dependencies again
  • Issue gatsby develop

Edit:
did npm install mitt and it seems to be working quite weird it is not installed on dependencies at a fresh install

Can't resolve 'mitt'

after running
gatsby develop

I get the following error:
Can't resolve 'mitt' in '...\project-folder.cache'
If you're trying to use a package make sure that 'mitt' is installed. If you're trying to use a local file make sure that the path is correct.

File: .cache\emitter.js:1:0

Change default branch to master (temporary)

gatsby ci got error.
because the default branch of gatsbyjs/gatsby-starter-wordpress-blog is main.
Could you change default branch to master (temporary)?

[main 450cd6b] chore(create-gatsby): Use new image plugin (#29356)
 9 files changed, 17274 insertions(+), 1161 deletions(-)
 create mode 100644 src/templates/Page.js
 rename src/templates/{blog-post.js => Post.js} (100%)
 create mode 100644 yarn.lock
error: src refspec master does not match any.
error: failed to push some refs to 'https://****************************************@github.com/gatsbyjs/gatsby-starter-wordpress-blog.git'

Exited with code exit status 1

CircleCI received exit code 1

https://app.circleci.com/pipelines/github/gatsbyjs/gatsby/57590/workflows/b859ef00-b79a-4c8d-989c-c538f7f9e033/jobs/612613

  if [ -n "$(git status --porcelain)" ]; then
    git add .
    git commit -m "$COMMIT_MESSAGE"
    git push origin master
  fi

https://github.com/gatsbyjs/gatsby/blob/936c74ea7ff9965c993541bd8feea82e40c0919b/scripts/publish-starters.sh#L40

updating to latest block library code?

Hi folks,

I am currently working on a headless setup with this starter. I'm not sure if I should be using the "home page starter" instead, but that looks more like it's for single-page applications. I've made good progress on my theme by working with the unit tests provided but noticed Gutenberg galleries use different classes than what is currently being used with the latest version of WordPress. I see the TODO on single and archive pages noting an issue with the postCSS that the wordpress package uses. Is this still an issue? I added @WordPress to my node modules and just took the new gallery code, cut and paste it over the old in the stylesheet that his been migrated locally, but I'm wondering if I should just be directly calling these stylesheets from the package itself instead of the copies that we have.

The copies are working great minus the gallery code needing updated, but I'm curious if I shouldn't get too ahead of myself if I'm doing things the "wrong" way.

As an aside, if I did decide to import the styles directly from the node_modules folder, should my overwrites for styles just go into my defauly styles.css? I assume yes, but Im worried this will lead to unused CSS, as It's been a while since I've done a GatsbyJS project and I can't recall if it strips out unused or overwritten css on build.

New project fails to npm install

I was just following the instructions at

gatsby new some-blog https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

But npm fails to install with

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"^16.9.0 || ^17.0.0" from [email protected]
npm ERR!   node_modules/gatsby
npm ERR!     gatsby@"^4.0.0" from the root project
npm ERR!     peer gatsby@"^4.0.0-next" from [email protected]
npm ERR!     node_modules/gatsby-plugin-image
npm ERR!       gatsby-plugin-image@"^2.0.0" from the root project
npm ERR!       1 more (gatsby-source-wordpress)
npm ERR!     11 more (gatsby-plugin-sharp, gatsby-source-filesystem, ...)
npm ERR!   8 more (react-dom, gatsby-plugin-image, gatsby-plugin-offline, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-helmet/node_modules/react-side-effect
npm ERR!   react-side-effect@"^1.1.0" from [email protected]
npm ERR!   node_modules/react-helmet
npm ERR!     react-helmet@"^5.2.1" from the root project
npm ERR!     1 more (gatsby-plugin-react-helmet)
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

Deploy times

Hey first off, I love this repo. I got a blog set up in no time. I've run into an issue where after about at 40-50 posts the deploy times become really long (in the 7-10 min range). Are there optimizations that can be done to reduce deploy times? Here is the portion of the Netlify log that takes the most time. Thanks again, really appreciate the work you've done!

Screen Shot 2021-06-17 at 10 51 17 AM

A bug at author photo on the bottom

Hi everyone, I'm looking for a blog template via mobile phone.

Then, I found a bug.

A picture with a big photo size that seems to be a bug that ruined other elements.

For other information, my mobile screen is 6.53 inches.

I hope it can be solved.

New project fails on NPM install

After instantiating a fresh install, an NPM audit identifies the following errors:

  1. engine.io (moderate severity): This vulnerability is related to uncaught exceptions in engine.io, which could lead to unexpected application behavior. More details are available here: GHSA-r7qp-cfhv-p84w

  2. file-type (high severity): This vulnerability is associated with an infinite loop when processing a malformed MKV file. More details can be found here: GHSA-mhxj-85r3-2x55

  3. immer (critical severity): This vulnerability is caused by prototype pollution in the immer package. Prototype pollution can allow attackers to modify an application's behavior, potentially leading to various security issues. More details are available here:

engine.io  4.0.0 - 6.2.0
Severity: moderate
Uncaught exception in engine.io - https://github.com/advisories/GHSA-r7qp-cfhv-p84w
fix available via `npm audit fix --force`
Will install [email protected], which is outside the stated dependency range
node_modules/engine.io
  socket.io  3.0.0-rc1 - 4.4.1
  Depends on vulnerable versions of engine.io
  node_modules/socket.io
    gatsby  2.32.8 - 4.25.4-alpha-initial-webhook-body.2 || 5.0.0-alpha-drupal-proxyurl.11 - 5.4.0-next.3
    Depends on vulnerable versions of socket.io
    node_modules/gatsby

file-type  13.0.0 - 16.5.3
Severity: high
file-type vulnerable to Infinite Loop via malformed MKV file - https://github.com/advisories/GHSA-mhxj-85r3-2x55
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/gatsby-source-wordpress/node_modules/file-type
  gatsby-source-wordpress  3.11.0-alpha-wordpress.44 - 3.11.0-next.0 || >=3.12.0-next.0
  Depends on vulnerable versions of @rematch/immer
  Depends on vulnerable versions of file-type
  node_modules/gatsby-source-wordpress

immer  <=9.0.5
Severity: critical
Prototype Pollution in immer - https://github.com/advisories/GHSA-c36v-fmgq-m8hx
Prototype Pollution in immer - https://github.com/advisories/GHSA-33f9-j839-rf8h
Prototype Pollution in immer - https://github.com/advisories/GHSA-9qmh-276g-x5pj
fix available via `npm audit fix`
node_modules/immer
  @rematch/immer  *
  Depends on vulnerable versions of immer
  node_modules/@rematch/immer

7 vulnerabilities (3 moderate, 3 high, 1 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Images not showing on fresh install

First of all, thank you for building such a great starter. It has been an amazing journey.

I am having trouble with gatsby-inline-image not respecting the parent containers width or height.

Steps

  • Clone repo
  • Point gatsby-source-wordpress at my local Wordpress instance (local by flywheel)
  • Unrelated? Added process.env.NODE_TLS_REJECT_UNAUTHORIZED=0 in gatsby-node.js)
  • Add tailwind as per docs and some custom CSS
  • Run gatsby-develop

Expected (on mobile)

Screen Shot 2021-03-14 at 12 33 05 AM

Actual (on Mobile)

Image too wide, going beyond 100% viewport and causing a horizontal scroll bar.

Screen Shot 2021-03-14 at 12 44 47 AM

Notes

  • Updated all plugins to latest version
  • Wordpress side is perfectly fine so it has to be something on the gatsby image transformation

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.