Why I moved my site from WordPress to GatsbyJS.

Static site generators

When I originally started JSdiaries, I did so with the intention of providing information about JavaScript, Web Applications, Data Visualisation and everything in-between.

I wanted to get the platform up and running as fast as possible so I created a  Bluehost account and fired up a WordPress installation. I was satisfied with the platform and if I wanted some piece of functionality I could just slot a WordPress plugin into the site.

For example, if I wanted to use code syntax highlighting in my posts I’d use a plugin like Crayon Syntax Highlighting. This was an adequate way to slot in units of functionality to my site whenever I wanted.

But as my site has progressed and my coverage of JavaScript has become more focused on React.js, Typescript and dynamic data I would be remiss not to utilise some of these technologies to provide an extremely fast platform for my users. This is when my attention was drawn to static site generators.

So what exactly is a static site generator? Well, simply put its a way of sticking to very core of web development by only providing the bare necessities of what makes up a web page, a static site just uses HTML, CSS and JavaScript files.

There are no external network requests to retrieve additional information such as data, fonts, images and any other type of file that has the potential to slow a site down.

A static site generator will compile all this data beforehand into static files, so it allows your site to have incredible loading speeds for users on all types of device and internet speeds.

Most Popular

There a huge range of static site generators. You can see for yourself here.

However, when moving my WordPress site to a static site I choose Gatsbyjs for its great documentation and a very helpful system of plugins with WordPress being among them.

I had some initial concerns about this migration:

What will happen to my data?

This was taken care of by the Gatsbyjs WordPress plugin .

The utility of this plugin is incredibly useful. It queried my WordPress installation using  GraphQL and retrieved all my posts and pages and put them into static files.

So everytime I have a new post I can start gatsby project builds and it will query my WP site and retrieve this new information.

What will happen to my SEO?

As opposed to a standard web app, static files are easily readable and traversable by Google’s search engine. In fact, the added performance in  loading pages by using Gatsby or any SSG will improve SEO rankings. This is according to Google rewarding fasters sites with better search rankings starting in January 2018.

Benefits

There are a huge amount of templates you can use to get started with Gatsbyjs. Most of them come fully styled with a whole host of features and plugins preconfigured.

The most enticing thing about these static sites are the speeds that they load at.

Admittedly, I did not try to optimise my WordPress installation of my site. I never seemed to get around to it and after awhile as plugins overlapped it got very messy.

My site was had a measly optimisation score of 54. This was a combination of WordPress plugins that I didn’t take the time out to see if they were necessary or not. In short, the site was sluggish and slow with nobody to blame but myself.

However lets take an example template from Gatsbyjs. This is a really nice starter template by Greg Lobinski :

It comes with a whole list of useful features including nice animations and  routing which you can check here.

If I examine this page using Google Page insights I see the following:

 

Google has ranked this template with an optmisation score of close to 100 percent which really is a rarity for any modern website or webapp.

A knock on effect to this is that if Google can detect this with its own speed test tools the SEO score of your site could also have increased.

https://gatsby-starter-personal-blog.greglobinski.com/

On another note, Gatsbyjs uses React.js for its frontend. If you enjoy the paradigm of React.js almost all these templates comes with full compartmentalised components.

Here is how the React code looks on this post page:

 
import React from "react";
import Helmet from "react-helmet";
import SEO from "../components/SEO/SEO";
import config from "../../data/SiteConfig";
import MainHeader from "../layouts/MainHeader/MainHeader";
import _ from 'lodash';
import MainNav from "../layouts/MainNav/MainNav";
import BlogLogo from "../components/BlogLogo/BlogLogo";
import MenuButton from "../components/MenuButton/MenuButton";
import Drawer from "../layouts/Drawer/Drawer";
import Navigation from "../components/Navigation/Navigation";
import SiteWrapper from "../layouts/SiteWrapper/SiteWrapper";
import MainContent from "../layouts/MainContent/MainContent";
import PostHeader from "../layouts/PostHeader/PostHeader";
import PostFormatting from "../layouts/PostFormatting/PostFormatting";
import PostDate from "../components/PostDate/PostDate";
import PostFooter from "../layouts/PostFooter/PostFooter";
import AuthorImage from "../components/AuthorImage/AuthorImage";
import AuthorInfo from "../components/AuthorInfo/AuthorInfo";
import PostShare from "../components/PostShare/PostShare";
import GhostSubscribe from "../components/GhostSubscribe/GhostSubscribe";
import ReadNext from "../components/ReadNext/ReadNext";
import PostTags from "../components/PostTags/PostTags";
import Footer from "../components/Footer/Footer";
import AuthorModel from "../models/author-model";
import Disqus from "../components/Disqus/Disqus";

var hljs = require('highlight.js')
require('highlight.js/styles/monokai.css')

function parsePost(post, slug) {
  const result = post;
  if (!result.id) {
    result.id = slug;
  }
  if (!result.id) {
    result.category_id = config.postDefaultCategoryID;
  }
  return result;
}

const formatReadNext = value => ({
  path: value.slug,
  title: value.title,
  cover: value.cover,
  excerpt: value.excerpt
});

const createMarkup = encodedHtml => ({
  __html: _.unescape(encodedHtml),
});


class PostTemplate extends React.Component {
  state = {
    menuOpen: false
  };


  componentWillReceiveProps(){
    hljs.initHighlighting()
  }
  componentDidMount(){
    hljs.initHighlighting()
     
     document.querySelectorAll("pre").forEach(function(element) {
      element.innerHTML = element.innerHTML.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
  });

  document.querySelectorAll('pre').forEach((i) => hljs.highlightBlock(i))
   
 }

  handleOnClick = evt => {
    evt.stopPropagation();
    if (this.state.menuOpen) {
      this.closeMenu();
    } else {
      this.openMenu();
    }
  };

  handleOnClose = evt => {
    evt.stopPropagation();
    this.closeMenu();
  };

  openMenu = () => {
    this.setState({ menuOpen: true });
  };

  closeMenu = () => {
    this.setState({ menuOpen: false });
  };

  render() {
    
    const postNode = this.props.data.wordpressPost
    const { location, data } = this.props;
    const { slug, next, prev } = this.props.pathContext;
    const getNextData = () => (next ? formatReadNext(next) : null);
    const getPrevData = () => (prev ? formatReadNext(prev) : null);

    const post = parsePost(postNode, slug);
    const className = post.post_class ? post.post_class : "post";
    const { title, date, tags, cover } = post;
    /*
    const { location, data } = this.props;
    const { slug, next, prev } = this.props.pathContext;
    const postNode = this.props.data.markdownRemark;
    const post = parsePost(postNode.frontmatter, slug);
      const getNextData = () => (next ? formatReadNext(data.next) : null);
    const getPrevData = () => (prev ? formatReadNext(data.prev) : null);
    const { cover, title, date, author, tags } = post;
    
    const authorData = AuthorModel.getAuthor(
      this.props.data.authors.edges,
      author,
      config.blogAuthorId
    );
  */

    return (    
    );
  }
}

/* eslint no-undef: "off" */
export const pageQuery = graphql`
query currentPostQuery($id: String!,  $prev: String! ) {
  wordpressPost(id: { eq: $id }) {
      title
      date
      tags{
        name
      }
      content
  }

  prev: wordpressPost(slug: { eq: $prev }) {
    title
    date
    tags{
      name
    }
    content
  }
}`

export default PostTemplate;

Nothing unusual, right? Standard React code with rudimentary JSX interactions and callbacks.

Considerations

If you are considering moving your site to Gatsbyjs from WordPress bear in mind that the plugin ecosystem for Gatsby, while impressive, is not a like for like when compared against the well established WordPress platform.

This is somewhat combated by the extensive packages that you can install via Reactjs.

For example, need an email list form? React has it covered here.

A component for displaying cookie consent? Check here.

Between Gastbyjs plugin and React.js packages it is unlikely that you won’t find the external functionality that you are looking for.

Hosting

There are plenty of options for hosting a static site. But my personal preference is Netlify. There seems to be quite a symbiotic relationship between Gatsbyjs and Netlify as deploying service. This is evident in Gatsby having a plugin exclusively for Netlify deployment.

Netlify provides a seamless experience for deploying a Gatsbyjs application.

I wanted to provide this higher level overview of migrating my website to Gatsbyjs. The benefits are abundantly clear and speed improvements my website has are second to none.

I wanted to align the content discussed on JSdiaries with the platform its hosted on. And I feel like I have achieved that .

The new site is faster, looks better, uses the latest in frontend technologies, ranks higher in SEO and provides a greater overall user experience.

Now don’t get me wrong, using WordPress and its various plugins and services is very reliable and trusted experience.

But for a developer like myself who talks about the latest and greatest in the JavaScript world, I needed to do this migration in order to provide my users with the best possible experience. Let alone all other benefits I get from having a static site.

I will do a full technical overview of how I did this migration in my next post.

 

 

Gareth Dunne

Full Stack Developer and creator of JSdiaries. Passionate about the latest in technologies and how it can provide value for clients and businesses.