This website is a static Gatsby website, created using data served from a Wordpress instance running on WP Engine. It is built and deployed on Netlify, and leverages the NetlifyPress Wordpress plugin to trigger new deploys when content is created or updated.

• Custom components
  • Quote share button
  • Show/hide groups of elements
• Running Wordpress locally
• Local development
• Diagnosing site failures
  • Netlify
  • WP Engine

In this blog, we use some Wordpress features in creative ways to deliver custom functionality in our posts.

Wordpress Quote and Pullquote block types both get the same visual treatment, with one key difference: the "Tweet" button. To add a button prompting users to share the blockquote on Twitter, simply use the Pullquote block type in Wordpress, rather than the default Quote type.

We transform Wordpress Group blocks into HTML <details> elements, allowing for progressive disclosure of complicated examples using native HTML.

By default, <details> elements have a summary message that reads "Details", but authors can override this message by supplying their own <summary> element as the first child within a Group block in Wordpress.

<summary>Expand for more details</summary>

To run Wordpress on your local machine, we use Local, an application that lets you start and stop local Wordpress instances, and push/pull data between your machine and our hosting provider.

Follow this guide to install Local on your machine, connect to our WP Engine account, and pull the apollographql site.

By default, Local uses it's own routing solution to serve Wordpress instances at the .local TLD. To run this site locally, you'll need to disable this feature by going into Preferences > Advanced > Router Mode, and selecting "localhost" from the dropdown.

Once you have a local copy of our Wordpress instance up and running, you're ready to start the Gatsby local development environment...

This project requires the Netlify CLI to run locally. We use Netlify to store the site's environment variables and run its serverless functions locally. If you don't already have it installed, install the Netlify CLI globally.

Run netlify init and select the default answers to each of the following prompts to connect your local site to our project on Netlify.

npm install -g netlify-cli
netlify init

Next, install the project's dependencies.

npm install

Finally, start your development environment. Take note of the "Site Host" value in your Local app. You'll need to supply this to the following call in the form of a WORDPRESS_URL_DEV environment variable. For instance, if your "Site Host" is localhost:10003, you can run the following command in your terminal:

WORDPRESS_URL_DEV=localhost:10003 netlify dev

Now, you should have a development server running at http://localhost:8888! 🚀

In the event of an outage, one might want to check on the status of services that this site depends on. This site has two main 3rd-party points of failure:

Status page

We use Netlify to build and host the static Gatsby site portion of this website. Site settings can be configured on Netlify.

Note: If a new deploy fails to build on Netlify, it won't have an effect on the site currently in production. Netlify will only deploy successful builds.

We also leverage Netlify redirects to proxy requests from /blog to our Netlify deployment. This redirect rule that does this can be found here.

Status page

The Wordpress component of this website is hosted by WP Engine. They are a service that specializes in secure Wordpress hosting.

One can log in to WP Engine using the login credentials found in 1Password. Once you're in there, you can do things like:

• Change our hosting configuration
• Update server software
• View server access/error logs
• Inspect/administrate the database using phpMyAdmin
• Roll back the entire site to a previous daily backup
• Contact WP Engine support

In case of a malware infection, WP Engine offers support for diagnosing and removing malware, excluding some circumstances. More information on this topic and their protocols can be found in this article from their website.