This is an opinionated starter project to help you create lightning fast PWA websites with Gatsby and Wordpress CMS, built using Typescript, SCSS and Ant Design.

Home screen bannerHome screen banner

Features

  • Gatsby static site generator

  • Built using Typecsript

  • All CSS written in SASS

  • Built using Ant Design for theming and UI

  • Wordpress CMS for content management and blog

  • Blog pagination functionality and customizability

  • Environment files - Use different tokens, API url's, social account id's etc as needed for your development, testing and production environments

  • High performant PWA (progressive web app) with excellent Google Lighthouse Audit score (website will work offline due to service worker caching)

  • Fully responsive layout for mobile and widescreen browsing

  • This Gatsby starter template displays a reading progress bar at the top of each page. Feel free to tweak it, hide or show it on certain pages, or remove it altogether if you don't like it

  • Blog SEO using yoast integration in your wordpress source, along with generated robots.txt file for search engine crawling and human readable generated sitemap.xml file for search engine indexing

  • Comments on blog posts using Staticman - Comment form can be added on every any page

    • Comments will be stored as yml files in your Github repository itself, to ensure that they work perfectly with static generated pages
    • Simply grant staticman access to your Github repository, and every time someone submits the comment form, you will receive a pull request if you enable moderation else the comment will be saved directly if you turn moderation off
    • Staticman has built-in support for akismet for moderation and spam protection
  • Wordpress images - all featured images for each post/page displayed in WebP format for faster performance in compatible browsers

    • Gatsby's gatsby-source-wordpress plugin doesn't support transforming images within wordpress post/page content
    • As a workaround, you can insert images from URL in your wordpress content
    • If you don't want to use the workaround mentioned above, and would rather use the images that you have uploaded to your wordpress library, this starter template has an included (untested) plugin called `gatsby-wordpress-inline-images` which to transform all images within post/page content to Gatsby Images with full support for fluid transformations etc
  • Test cases - full support for writing test cases in Typescript using Enzyme and Jest

  • Git pre-commit and pre-push hooks using Husky - execute any custom scripts before any git commit or git push operation, such as linting or running test cases, to ensure that dirty or untested code never gets pushed to your Github repository

  • Pinterest image pinning integration - your readers can pin any page by clicking on the Pinterest button which will appear when they hover over any image

  • Instagram feed integration (displays maximum 12 most recent Instagram posts of any account, no Instagram API token needed)

  • Twitter timeline and follow button integration (displays timeline and follow button for any account with a few customization options, no Twitter API token needed)

  • Facebook timeline and like button integration (displays timeline and like button for any account with a few customization options, no Facebook API token needed)

  • Google Analytics integration (tracks user sessions, page views etc using your Google Analytics tracking id)

Check out the Github repository to read the full documentation