/blog

Gatsby Theme for Creative Tech Blog powered by headless WordPress JAM stack.

Primary LanguageCSSOtherNOASSERTION

Creative Tech Blog

Gatsby Theme for Creative Tech Blog powered by headless WordPress JAM stack.

Author

Deploy

yarn deploy

It will build the site and deploy it to the gh-pages branch on Github.

A port of the WordPress Twenty Twenty theme to Gatsby.


This starter uses Gatsby V3 and the new gatsby-source-wordpress@v5. You can find documentation for that package here.

Checkout some options of the source plugin: plugin-options.md

Plugin Versions

Last tested with the following plugin versions.

  • WPGraphQL: 1.3.5
  • WPGatsby: 1.0.8
  • gatsby-source-wordpress: 5.5.0
  • gatsby-plugin-image: 1.5.0

WordPress Setup

  1. Make sure to install the two required WP plugins wp-gatsby and wp-graphql
  2. Best you install and activate the default WordPress Twenty Twenty theme
  3. Make sure you have Menus with the following slugs:
    • primary - Thats the top menu
    • extended - That is the menu that opens on the right side as drawer
    • social-links-menu - For the Social menu in the footer and in the expanded drawer
      • For the social Icons you need to adjust SocialMenu.js. There is a SocialIcon function that parses svgs depending on the Link label
  4. Rename .env.example file to .env and edit it with your domain variables. Make sure to fill all variables properly.
    • WPGRAPHQL_URL - Your GraphQL endpoint
    • SITE_URL - Your frontend domain (without ending slash) to stitch together SEO relevant image urls.

Limitations

  • Comments are not implemented yet.

  • The monthly archive pages are not implemented.

  • Tags are not implemented (only Categories).

  • Surely there is more. Feel free to suggest things as issues.

    • For the social Icons you need to adjust SocialMenu.js. There is a SocialIcon function that parses svgs depending on the Link label
  1. Copy .env.example file to .env and change Environment variables to location to your WordPress instance

Acknowledgements