How I created my GatsbyJS blog with WordPress as the backend – Part 2

In the last part, I described why I used GatsbyJS and WordPress for my blog. In this post, I will tell you about my WordPress setup.

My requirements in WordPress

As discussed in the last post, the following are the settings I need while using WordPress:

1. Markdown support.
2. Image management.
3. Metadata for posts and images.
4. Categorization of posts.
5. Serial post support.

We will not be looking at the installation of WordPress as it is out of scope for this post.

Markdown support

I write all my content in Markdown. The reasons I use this is because:

• It has a very light syntax.
• Readable document even without export to HTML.
• It can be version controlled in git.

I used the classic WordPress editor, which supports rich text and HTML. I write my posts on my mac using Ulysses editor, which supports uploading posts to WordPress. After upload, I can view the article in the WordPress editor either in rich text or HTML. However, sometimes I write posts directly there or edit my posts. I want to do this in Markdown. Hence I use the WP Githuber MD plugin, which turns the default WordPress editor to support Markdown.

Post Editor after WP Githuber MD plugin is installed

The above shows the editor after the plugin is enabled. There is a settings screen for the plugin. You will find numerous options in the settings. But I enabled the following options:

• Markdown

  • Disable Revision
  • Disable Auto-save
  • HTML-to-Markdown - Shows a widget on the posts page. It helps to convert old posts to Markdown.
  • Markdown Editor Switcher - Can switch on/off markdown editor per post.
  • Live Preview - Shows dual page with live preview of the Markdown in HTML.
  • Sync Scrolling - When Live Preview is enabled, both the panes can simultaneously scroll.
  • HTML Decode - Allows all HTML tags and attributes in Markdown.
  • Line Number

• Preferences

  • Shortcode - Enables WordPress shortcode support in Markdown.
  • Smart Quotes - WordPress default.

Image Management

For images, I have a couple of requirements.

• Auto resize of images with various sizes on upload.
• Optimization of the images.
• Offload the images from the server to a CDN.
• Adding metadata to the images.

WordPress has inbuilt support for image resizing, available from the Settings->Media field. However, only three default sizes are available. To enable multiple sizes (my requirement), the active theme’s functions.php need to be updated. Here is the code I use:

if ( ! function_exists( 'shubho_barebones_setup' ) ) :
  /**
  * Sets up theme defaults and registers support for
  * various WordPress features.
  *
  * Note that this function is hooked into the
  * after_setup_theme hook, which
  * runs before the init hook. The init hook is too late for
  * some features, such
  * as indicating support for post thumbnails.
  */
  function shubho_barebones_setup() {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 306, 120, true );
    add_image_size( 'image-1020x300', 1020, 300, true );
    add_image_size( 'image-425x255', 425, 255, true );
    add_image_size( 'image-652x300', 652, 300, true );
    add_image_size( 'image-864x300', 864, 300, true );
    add_image_size( 'image-870x300', 870, 300, true );
    add_image_size( 'image-870x600', 870, 600, true );
  }
endif;
add_action( 'after_setup_theme', 'shubho_barebones_setup' );

Whenever I upload any image to my WordPress setup, it automatically creates 7 differences sizes for the same due to the above code.

The plugin EWWW Image Optimizer handles image optimization for me. I use the default settings for the plugin. You can avoid this if you wish to pre-optimize your images on your laptop before upload.

I use Digital Ocean Spaces as my CDN for images. I use this because I have other projects in Digital Ocean and using their CDN just consolidates my billing. I use the plugin WP Offload Media Lite to automatically push images to the CDN during upload (and after image resizing and optimization). In addition to Digital Ocean Spaces, it supports Amazon S3 and Google Cloud Storage. Since I use a subdomain for my site cdn.shubho.dev as the URL for my Digital Ocean Spaces bucket, the plugin rewrites all my media links to this. I use the following settings.

WP Offload Media plugin settings

Meta data for posts and images

I require metadata for my posts and images. For articles, I add SEO description fields. For my featured images, I need fields to mark the URL, author and source for the pictures (you can see these at the bottom of each post). Advanced Custom Fields, which is quite famous in the WordPress community, achieves this for me. I also use a helper plugin ACF to REST API which exposes these custom fields to the WordPress REST API output. Here is the example screen for my featured images after adding the custom fields to these.

Featured image settings with custom fields

Post categorization and Series post support

WordPress has built-in support for categories and tags. Using the “Advanced Custom Fields” plugin described above and the custom taxonomy feature in WordPress, I have enabled serial post support. If a post belongs to a series, I add the series taxonomy to it. I have added two custom fields called series_name and series_sequence. E.g. the current article is part of a series named blog_setup. It is the second in the series. I can now display a custom block for the series using these fields. The build processing in Gatsby handles this part.

Other WordPress settings

I have added couple more settings to lock the blog. Since the static site is my frontend and no one should see the WordPress backend, I added a blank page to my theme. Anyone who reaches this page inadvertently gets redirected back to my actual static site frontend.

Gatsby uses the WordPress REST API to pull in all the posts. There is no easy way to lock down the REST API, so I have used the .htaccess file in the WordPress install directory. I have hidden the REST API behind an authenticated route. The Gatsby build uses the authentication username/password while querying WordPress.

Conclusion

The above setup satisfies all my requirements for an effective CMS. I have been using WordPress for many years. However, this is the first time I have used it as a headless CMS. It works like a charm, and I did not need to learn any new tool. Another advantage of this is that it gave me an easy migration path to static sites for a couple of other sites that I set up for my friends. They continue to write in WordPress while their readers see a static site.