This is a personal site and blog. Built on GatsbyJS, TS and a headless WordPress CMS.
This project is open source to educate and simplify the development process of future sites that use GatsbyJS and WordPress. The goal is to fully support these key features:
- ๐ฅ Fast load speeds. Under 1s on mobile and desktop.
- ๐ฏ High Lighthouse scores. Almost 100 on mobile and desktop.
- ๐ Minimal and precise layout for easy customizations
- ๐ Multilingual support via i18n (Work in progress)
- ๐ Editor-friendly setup with accurate previews
- ๐ค SEO optimised site
- โ Accessibility optimised site (Work in progress)
- ๐ Programmatic page creation
- โญ๏ธ Gutenberg support (Work in progress)
- ๐ WordPress theme optimised for headless
- ๐ฏ High TypeScript coverage and high type safety
Note: Some features are still work in progress.
Configure all environment variables and have your WordPress installation running ().
- Install all dependencies
npm i
oryarn
- Add environment variables
- Run development environment
npm start
oryarn start
GATSBY_WORDPRESS_URL_PATH
the domain or IP to the WordPress installation
GATSBY_WORDPRESS_URL_PROTOCOL
the HTTP protocol used
GATSBY_INSTAGRAM_SOURCE
the name of the instagram account
GATSBY_TWITTER_SOURCE
the name of the twitter account
GATSBY_GOOGLE_ANALYTICS
the Google Analytics tracking id
You can read about how to setup a free WordPress site on GCP in my post.
- Create a single post and page
- Post
- Add a tag (required)
- Add featured image (required)
- Page
- Add featured image (required)
- Post
- Settings
- Use permalinks with post name (required)
- Set a page as the front page (required)
- Create a menu (required)
- The first menu item will be used for the logo
- All other menu items will be generated dynamically
- Install the theme (required)
- It will do following things:
- It modifies REST API
- It disables the WP frontend
- It reroutes all pages to the REST API
- It will do following things:
- Install plugins and activate them (required)
- Polylang (required)
- Configure a main language that reflect the
gatsby-config.js
- This site uses
en_US
as the default language - The secondary language is
de_DE
- Configure a menu for both languages
- Configure a main language that reflect the
- Polylang REST API (required)
- WP REST API MENU (required)
- WP Webhooks (optional)
- Trigger a webhook on Vercel or Netlify for a redeploy
- ACF (optional)
- Polylang (required)
With a cloud provider, you can easily host a WordPress CMS installation for free with this setup. You can read how to setup a WordPress CMS on GCP here.
I recommend AWS or GCP, as they have very good free tiers. The lowest virtual machine instance should be enough. They also have 1-click install setups.
This project supports Polylang via REST API. Note: Full i18n support is a work in progress
Static content is written directly in the codebase. Add pages in /src/pages/
to create new static content.
Programatic content is created during build time. This uses GatsbyJS source plugins to fetch data and translating that data into static HTML files.
Dynamic content is created on the client side. In GatsbyJS you can use a custom router to create dynamic pages. The preview feature uses this to show a preview of the revision of post/page.
Content from WordPress is being parsed, converted to JSX and then rendered to HTML. This enables full control in the frontend to create rich interactive experiences with all features of React. Gutenberg Blocks translate into custom React components in the HMTL.tsx
file.
Use posts, tags, categories and pages in WordPress to build your site.
This project aims to have a high type safety to reduce possible issues. Currently it has 92.43% type coverage. You can check the type coverage by running npm types
or yarn types
.
This was possible due to this GitHub Gist and the credits mentioned in there.
Use the default template attribute from wordpress to choose the file that will be used for the page template.
Page templates can be found in src/templates/...
and the mapping happen in src/gatsby/node/index.ts
.
Previews are being rendered in the Gatsby frontend by fetching the data from a modified WordPress REST API.
The modified REST API exposes the latest revisions of the post.
This means that you don't have to deal with nonce
and other authentication strategies.
By default all revisions are only available with an authenticated REST API.
I did this, because it was a pain in the ass to get it properly working.
This project uses a custom theme to deactivate most of the regular frontend of WordPress.
./src
โโโ components # React components folder
โ โโโ AnimateWords
โ โ โโโ AnimateWords.tsx
โ โโโ Footer
โ โ โโโ index.tsx
โ โโโ GridHelper # Grid overlay
โ โ โโโ GridHelper.tsx
โ โโโ HTML
โ โ โโโ HTML.tsx
โ โโโ Header
โ โ โโโ index.tsx
โ โโโ Image
โ โ โโโ Image.tsx
โ โโโ Instagram
โ โ โโโ index.tsx
โ โโโ InviewMotion
โ โ โโโ InviewMotion.tsx
โ โโโ Layout # Common layout components
โ โ โโโ PageTitleAnimation.tsx
โ โ โโโ Section.tsx
โ โ โโโ index.tsx # Global layout wrapper
โ โโโ Layouts # Shared grid layouts
โ โ โโโ ContentWithSidebar.tsx
โ โโโ Logo
โ โ โโโ Logo.tsx
โ โโโ SEO # Component used for SEO
โ โ โโโ index.tsx
โ โโโ SocialSidebar
โ โ โโโ SocialSidebar.tsx
โ โโโ Transition # Component used for page transitions
โ โ โโโ Transition.tsx
โ โโโ Twitter
โ โ โโโ index.tsx
โ โโโ Typography # Folder for typography components
โ โ โโโ H.tsx
โ โ โโโ P.tsx
โ โ โโโ S.tsx
โ โ โโโ XL.tsx
โ โ โโโ XS.tsx
โ โ โโโ index.tsx # Barrel file
โ โโโ WorkSlider
โ โโโ WorkSlider.tsx
โโโ contracts # TypeScript definitions
โ โโโ page.ts
โ โโโ post.ts
โ โโโ preview.ts
โ โโโ templates.ts
โ โโโ util.ts
โโโ gatsby # Internal GatsbyJS code
โ โโโ config
โ โ โโโ index.ts
โ โโโ node
โ โ โโโ index.ts
โ โโโ shouldUpdateScroll.js
โ โโโ wrapPageElement.js
โโโ gatsby-plugin-theme-ui
โ โโโ index.js # Theme settings
โโโ images
โ โโโ leaf-01.png # folder
โ ...
โโโ pages # Static pages
โ โโโ 404.tsx # Custom 404 page
โ โโโ kitchensink.tsx # Page to test WordPress Gutenberg Blocks
โ โโโ preview.tsx # Page used for previews
โโโ templates
โ โโโ Blog # All post related page templates
โ โ โโโ BlogCategoryPosts.tsx
โ โ โโโ BlogPost.tsx
โ โ โโโ BlogPostTeaser.tsx
โ โ โโโ BlogPosts.tsx
โ โ โโโ BlogTagPosts.tsx
โ โโโ Page # All custom page templates
โ โโโ CoverPage.tsx
โ โโโ DefaultPage.tsx
โ โโโ FullWidthPage.tsx
โ โโโ HomePage.tsx # Page used for the homepage
โ โโโ WorkIndex.tsx # Page used to display all work projects
โ โโโ WorkIndexTeaser.tsx # Component used in WorkIndex page
โโโ utils # Utility function folder
โโโ index.ts
โโโ useInterval.tsx
- Add WordPress Theme to repository
- Add instructions for local development
- Add instructions for deployment
- Add i18n support
- Static pages
- Footer
- Overview pages
- Add draft preview support
- Add support for more essential Gutenberg Blocks
This is based on a version of Gatsby Wordpress Typescript Blog Boilerplate by sagar7993. It is heavily modified from the original.
The WordPress theme is based on Postlight's Headless WordPress + React Starter Kit by Postlight. It was modified by including revisions in the REST API response and adding some page templates.
GatsbyJS + TypeScript was possible because of this GitHub Gist and the credits mentioned in there.