diff --git a/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/featured_image.jpg b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/featured_image.jpg new file mode 100644 index 0000000000000..91654bc0b8c9c Binary files /dev/null and b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/featured_image.jpg differ diff --git a/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/underscores.png b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/underscores.png new file mode 100644 index 0000000000000..9e7b9bb65a438 Binary files /dev/null and b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/underscores.png differ diff --git a/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/wp_netlify_build.mp4 b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/wp_netlify_build.mp4 new file mode 100644 index 0000000000000..4846a63bf89a6 Binary files /dev/null and b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/wp_netlify_build.mp4 differ diff --git a/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/wp_netlify_build.webm b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/wp_netlify_build.webm new file mode 100644 index 0000000000000..b83178156be5a Binary files /dev/null and b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/images/wp_netlify_build.webm differ diff --git a/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/index.md b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/index.md new file mode 100644 index 0000000000000..597f6912998b1 --- /dev/null +++ b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/index.md @@ -0,0 +1,135 @@ +--- +title: "How To Build A Blog with Wordpress and Gatsby.js - Part 1" +date: 2019-04-26 +author: Tim Smith +excerpt: "Ever wondered how to use Gatsby.js with WordPress? This post will cover everything you need to know about getting WordPress ready for a Gatsby site." +tags: + - wordpress + - apis + - blog + - headless cms + - react +canonicalLink: https://www.iamtimsmith.com/blog/how-to-build-a-blog-with-wordpress-and-gatsby-part-1/ +--- + +> Note: This is part one in a series of posts about Gatsby.js and WordPress. You can find [Part Two here](/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2), and [Part Three here](/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3). + +Ever wondered how to use Gatsby.js with WordPress? This post will cover everything you need to know about getting WordPress ready for a Gatsby site. + +In a [previous post](https://www.iamtimsmith.com/blog/using-wordpress-with-react/), I spoke about using React.js to build a frontend for a WordPress site. I talked about a simple setup to do this, but also mentioned some drawbacks to doing this. + +One such drawback is the difficulties faced when trying to rank for SEO, because search engine crawlers have a hard time indexing information being loaded into React. I mentioned briefly that there are ways around this and one of these ways is [Gatsby.js](https://www.gatsbyjs.org/). + +In this series of blog posts, I'll be talking about how to build a Gatsby.js site with a WordPress backend. The aim of the setup is to allow non-developer users to make changes on their website while allowing developers to use a fast, modern, and enjoyable tool to build with. + +
+ +
Kylo Ren Approves!
+
+ +## Why use Gatsby.js with WordPress at all? + +When I made my last post about using React.js with WordPress, a few people asked why one might do such a thing? + +There are a few reasons that creating a separate frontend in React.js is beneficial: + +First, it really allows a lot of customization for the developer to choose tools that will a) benefit the site most and b) create an enjoyable development experience. And let's be honest, as developers aren't we all looking for better development experience? + +Second, I believe that plugins are a double-edged sword. They allow some cool functionality which otherwise wouldn't exist for non-coders, but people get slap-happy with them and start putting them on unnecessarily. I've seen sites with more than 60 plugins activated at once and they wondered why their site was so slow! Having 60 different plugins could mean having a ridiculous amount of HTTP requests being sent because each plugin is loading a new library. Using a separate frontend means the developer is in control of this. It does mean that the client will have to pay to have some changes made, but at the same time it will ensure that the site is staying optimized and that a developer can make the change without adding a bunch of unnecessary junk. + +
+ +
Unbelievable
+
+ +Third, I've seen cases where the developer and designer create an amazing site for a client and then the client decides to start poking around trying to change something minute like font-size from 12px to 14px and ends up taking the whole site down. This is an extreme example, but it definitely happens. If the frontend is a totally separate entity, then the client doesn't have the ability to do so. + +Finally, WordPress powers something like one-third of the internet. What this means is that there's a lot of people who know how to figure out if a site is a WordPress site so they can hack it and steal information. They can write bots which check various pieces of information about the site and determine if it's a WordPress site. The benefit to using something like Gatsby.js is that it creates static files at build time and serves the static HTML, so users and bots will never know there's a WordPress site managing the content. + +## What is Gatsby.js? + +Now that you've learned about why it is beneficial to use a setup like this, let's talk about what Gatsby.js is. + +According to their site, "Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps". In other words, it allows you to develop a website using React and just about any content source you want. Then at build time, it pulls in all of the data from the specified sources and turns your site into a bunch of static HTML files that are optimized for performance. + +As a matter of fact, [my portfolio site](https://www.iamtimsmith.com) is built using Gatsby and markdown files. It's a great way to build performant websites in React without having to worry about crawlers being able to index your site. In addition, it's got some pretty awesome documentation and community around it. + +Now let's get down to business... + +
+ +
Let's get down to business
+
+ +## Setting up WordPress + +This article assumes you have at least a rudimentary knowledge of WordPress. If you've never used it, you can check out [my quick guide to setting up a WordPress site](https://www.iamtimsmith.com/blog/how-to-build-a-beautiful-website-in-less-than-10-minutes/). + +## A bit about WordPress as a CMS + +Wordpress is a Content Management System (or CMS) built using PHP and MySQL. Typically when building a WordPress site, you would build a theme that essentially acts as a "skin" for the content. Since you're using Gatsby to build the frontend, you won't be using this functionality. + +As I mentioned in my other blog post, WordPress exposes REST APIs which can be used to get data for your React application. This same principle will be used here, although you'll be adding some things to improve the REST API and make it more flexible. + +I also like to use WordPress at a subdomain such as `admin.example.com` so it is totally separate from the actual site. + +![Underscores Theme](./images/underscores.png) + +## The WordPress theme + +Since you are not worried about how the site looks in WordPress, the theme you use doesn't necessarily matter. The only two files you really need in the theme are the `style.css` file to tell WordPress the information about your theme and the `functions.php` file so you can create menus, create custom content types, create default Advanced Custom Fields, etc. Later on, you can add more files to the theme for page templates, but that's totally optional. + +When building WordPress sites I generally stick with the [Underscores](https://underscores.me/) theme, so I will use that as the starter today since it already has a lot of stuff set up out-of-the-box. + +## The WordPress Plugins + +I know I was on my soap box earlier about using a bunch of plugins, and generally I'm not a huge fan of them. There are a few plugins that can really make your life easier as a developer though. + +### Advanced Custom Fields + +The first plugin I'd like to mention is [Advanced Custom Fields](https://www.advancedcustomfields.com/), or ACF for short. This is perhaps one of my favorite plugins of all time since it allows you to create custom fields for any post type or page. You can override defaults. You can create any number of fields for the user ranging from What You See Is What You Get (or WYSIWYG) editors and date pickers (free) to galleries and repeater fields (pro). With this tool, you can truly customize the site to be exactly what your client needs. + +### ACF to REST API + +Another plugin that works hand-in-hand with ACF is called [ACF to REST API](https://github.com/airesvsg/acf-to-rest-api). I bet you already guessed what it does. It exposes the data from your custom fields to the REST API so you can use it in your Gatsby.js site. + +### WP API Menus + +One of the great functions in WordPress is the ability for users to easily create and update menus for their site. If you hardcode the menu into your Gatsby site, it removes this ability for your users. To make it flexible for them, you can install the [WP API Menus](https://github.com/unfulvio/wp-api-menus) plugin to create REST routes for the menu items. Please note: There are a few different plugins built to create APIs from menus. According to the [gatsby-source-wordpress docs](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-wordpress), it must be this particular plugin to work. + +### WP Trigger Netlify Build + +
+ +
WP Trigger Netlify Build shows Netlify status
+
+ +When I build a Gatsby website, I like to use Netlify to handle the deployment of the site. Netlify rebuilds whenever a new commit is pushed or merged to the master branch of the repository, but what about when someone updates their WordPress site? + +Netlify has the ability to create webhooks that you can grab to say, "Hey, there's new content so you need to rebuild". I built [WP Trigger Netlify Build](https://github.com/iamtimsmith/wp-trigger-netlify-build) to make this super easy to integrate with WordPress. Simply drop in the necessary information and it will tell Netlify to rebuild when changes are made. It even shows a badge with the status of the build on the dashboard. + +
+ +
We gon' have lots of fixins
+
+ +## You have themes and plugins, now what? + +Not to be too anti-climactic, but there's really not a ton more to do on the WordPress side other than create content. These plugins and theme will pretty much expose everything you need to build your Gatsby.js blog. + +That being said, if you are creating custom content types for your blog you will need a way to differentiate them in ACF. Creating a custom page template will serve this purpose so you can filter on the page template to show the custom fields. You can also use the page template to filter in your Gatsby project to make sure you are receiving the desired fields for a given page. + +If you have any questions, you can hit me up on twitter at [@iam_timsmith](https://twitter.com/iam_timsmith)! + +See you in [How To Build A Blog with Wordpress and Gatsby.js - Part 2](/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2)! diff --git a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/featured_image.jpg b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/featured_image.jpg new file mode 100644 index 0000000000000..2e9f66df49031 Binary files /dev/null and b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/featured_image.jpg differ diff --git a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby1.png b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby1.png new file mode 100644 index 0000000000000..5fec83678edb4 Binary files /dev/null and b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby1.png differ diff --git a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby2.png b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby2.png new file mode 100644 index 0000000000000..5ad4c72933618 Binary files /dev/null and b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby2.png differ diff --git a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby3.png b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby3.png new file mode 100644 index 0000000000000..0dc59ad440b27 Binary files /dev/null and b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby3.png differ diff --git a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby4.png b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby4.png new file mode 100644 index 0000000000000..541063fc98374 Binary files /dev/null and b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/images/gatsby4.png differ diff --git a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md new file mode 100644 index 0000000000000..0cbc5224c4cce --- /dev/null +++ b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md @@ -0,0 +1,419 @@ +--- +title: "How To Build A Blog with Wordpress and Gatsby.js - Part 2" +date: 2019-04-30 +author: Tim Smith +excerpt: "In the last post, you covered setting up WordPress for use with Gatsby. Today you will cover how to pull the data from WordPress into Gatsby and build pages." +tags: + - wordpress + - apis + - blog + - headless cms + - react +canonicalLink: https://www.iamtimsmith.com/blog/how-to-build-a-blog-with-wordpress-and-gatsby-part-2/ +--- + +> Note: This is part two in a series of posts about Gatsby.js and WordPress. You can find [Part One Here](/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1), and [Part Three Here](/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3). + +In the last post, I covered setting up [WordPress for use with Gatsby](/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1). Today I will cover how to pull the data from WordPress into Gatsby and build pages. + +I have set up a WordPress site for you to use with the plugins mentioned in the last post as well as some dummy content to use. If you're curious, my favorite lorem generator is [Fillerama](http://fillerama.io/) which offers random content from Futurama, Monty Python, Star Wars, and more. This is where the content came from. + +
+ +
Shut up and take my money!
+
+ +## Gatsby.js starter + +One of the nice things about Gatsby is the starter projects. These are available for most applications and setups including WordPress, although you won't be using that today. You will just be using the starter default so you can configure everything yourself. + +In the future, it may be beneficial to take a look at the various starters and see if there's one that meets your needs. This can be a huge time saver and gives you the ability to get straight into the development portion without having to worry about configuration. + +### Gatsby default starter + +Before I get into the code, I want to talk about the [Gatsby starter default](https://github.com/gatsbyjs/gatsby-starter-default). This project is the default (obviously) project that will be built when you create a new gatsby project with the Command Line Interface, or CLI. It comes with a few plugins, but not too much so it's wide open for customization. + +Before you dig into the project files, you need to create your project. First you need to install the gatsby-cli tool with the code below: + +```shell +npm install -g gatsby-cli +``` + +Once that finishes installing, you can actually create your project. Navigate into the directory you want your project folder to live in and run the following command: + +```shell +gatsby new gatsby-wordpress +``` + +Now that you have your project created, let's take a look inside. You will see a `src` folder along with several files. Here's a little breakdown of what these do: + +- **src/**: Directory that holds your React.js project +- **.gitignore**: Tells what shouldn't be captured in git commits +- **.prettierrc**: Determines styles in code editor (tabs, quotes, etc) +- **LICENSE**: Basic MIT license +- **README.md**: Markdown file with instructions for use +- **gatsby-browser.js**: Gatsby Browser API stuff goes here. Global style calls go here too +- **gatsby-config.js**: Configuration for your project including meta data and plugins +- **gatsby-node.js**: Where you tell gatsby to build pages from a template using provided data +- **gatsby-ssr.js**: Gatsby Server Side Rendering APIs go here +- **package.json**: File which holds custom scripts, dependency information, etc + +These files will be present in all Gatsby starters you use, so it's worth your time to have at least a basic level of understanding with each one. Let's take a look and see what dependencies and plugins you have by default. Open up the `package.json` file and scroll down to dependencies. This will tell you what packages you already have. Mine looks like this: + +```json +// package.json +{ + "name": "gatsby-starter-default", + "private": true, + "description": "A simple starter to get up and developing quickly with Gatsby", + "version": "0.1.0", + "author": "Kyle Mathews ", + "dependencies": { + "gatsby": "^2.3.3", + "gatsby-image": "^2.0.35", + "gatsby-plugin-manifest": "^2.0.25", + "gatsby-plugin-offline": "^2.0.25", + "gatsby-plugin-react-helmet": "^3.0.11", + "gatsby-plugin-sass": "^2.0.11", + "gatsby-plugin-sharp": "^2.0.32", + "gatsby-source-filesystem": "^2.0.28", + "gatsby-transformer-sharp": "^2.1.17", + "node-sass": "^4.11.0", + "path": "^0.12.7", + "prop-types": "^15.7.2", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-helmet": "^5.2.0" + }, + "devDependencies": { + "prettier": "^1.16.4" + }, + "keywords": ["gatsby"], + "license": "MIT", + "scripts": { + "build": "gatsby build", + "develop": "gatsby develop", + "format": "prettier --write src/**/*.{js,jsx}", + "start": "npm run develop", + "serve": "gatsby serve", + "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"" + }, + "repository": { + "type": "git", + "url": "https://github.com/gatsbyjs/gatsby-starter-default" + }, + "bugs": { + "url": "https://github.com/gatsbyjs/gatsby/issues" + } +} +``` + +You can see there are several dependencies installed right off the bat. I'll just cover a few of them. Gatsby-Image creates an effect similar to Medium and also allows you to use responsive images and optimize your site. Gatsby-Transformer-Sharp is what creates the responsive and optimized images, then allows you to query for those through GraphQL. You also have Gatsby-Source-Filesystem which could be used to pull in markdown files for content, but you're using WordPress instead. The last package I want to mention is Gatsby-Plugin-React-Helmet, which allows you to create meta tags for the site's head which helps with Search Engine Optimization, or SEO. + +Whew! That was a mouthful. + +
+ +
Get on with it!
+
+ +### Running the site + +You will be running your Gatsby.js site in development so you can see what you're doing. Kinda hard to fly a plane when you can't see where you're going, right? + +To do this, run the following command in the terminal and it will build the site in a development environment with hot reloading and more. + +```shell +gatsby develop +``` + +After running that command, you can visit [localhost:8000](http://localhost:8000) in the browser and you should see the site pictured below: + +![Initial appearance of Gatsby.js starter](images/gatsby1.png) + +The site provides a navbar with a link going back to the homepage. There is also a bit of content with a link to page 2 which then provides a link back to page 1. It's a very simple site, but already you can see how fast Gatsby.js is. + +## Adding Gatsby.js plugins + +Now that you know what's already installed and what it looks like to start, you can add the stuff you need to use WordPress with your site. Fortunately, Gatsby has a page on their site where you can [see what plugins are available](/plugins/). You will be adding the following plugins to your site: [Gatsby-Source-WordPress](/packages/gatsby-source-wordpress/) and [Gatsby-Plugin-Sitemap](/packages/gatsby-plugin-sitemap/). + +To do this, you can use this code in the terminal: + +```shell +npm install gatsby-source-wordpress gatsby-plugin-sitemap +``` + +Looking at your `package.json` file will reveal that each of these packages have been added to the project, but this isn't enough to start using the gatsby-plugin files. You first need to add them to the `gatsby-config.js` file. Luckily, the docs for these plugins are awesome and do a good job explaining all of this. I'd recommend you take a look at them to find out what each of the settings does, but I'll provide the code for the `gatsby-config.js` file after adding all of these plugins to your site: + +```javascript +// gatsby-config.js +module.exports = { + siteMetadata: { + title: `Gatsby Default Starter`, + description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, + author: `@gatsbyjs`, + }, + plugins: [ + `gatsby-plugin-react-helmet`, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `images`, + path: `${__dirname}/src/images`, + }, + }, + `gatsby-transformer-sharp`, + `gatsby-plugin-sharp`, + { + resolve: `gatsby-plugin-manifest`, + options: { + name: `gatsby-starter-default`, + short_name: `starter`, + start_url: `/`, + background_color: `#663399`, + theme_color: `#663399`, + display: `minimal-ui`, + icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. + }, + }, + { + resolve: "gatsby-source-wordpress", + options: { + // I have created a dummy site for us to use with the plugins we discussed + baseUrl: "using-wordpress-with-gatsby.iamtimsmith.com", + protocol: "https", + hostingWPCOM: false, + // We will be using some advanced custom fields + useACF: true, + acfOptionPageIds: [], + verboseOutput: false, + perPage: 100, + searchAndReplaceContentUrls: { + sourceUrl: "https://www.using-wordpress-with-gatsby.iamtimsmith.com", + replacementUrl: "https://localhost:8000", + }, + // Set how many simultaneous requests are sent at once. + concurrentRequests: 10, + includedRoutes: [ + "**/categories", + "**/posts", + "**/pages", + "**/media", + "**/tags", + "**/taxonomies", + "**/users", + ], + excludedRoutes: [], + normalizer: function({ entities }) { + return entities + }, + }, + }, + `gatsby-plugin-sass`, + `gatsby-plugin-sitemap`, + // this (optional) plugin enables Progressive Web App + Offline functionality + // To learn more, visit: https://gatsby.dev/offline + // 'gatsby-plugin-offline', + ], +} +``` + +### Making sure plugins are working + +If the Gatsby site is currently running, you need to stop it and restart it so it pulls in the new content from WordPress. It's important to know that while you can choose what information goes on what pages after your app is built, it will only pull content when it is initially run so changes in the source require a rebuild. + +Once you've restarted your server, you can visit [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) to use the "graphical" playground. Here, you can use GraphQL to query your data for testing purposes. You should create opening and closing curly braces and then you can use shift+space (or ctrl+space on windows) to get suggestions. Once you have the data you want, you will be able to paste the query into your components, pages, and templates so you can use the information available. Here's what my query looks like for now: + +![GraphQL query tests](images/gatsby2.png) + +You may notice that there are several drilldowns inside of the `acf` field. This is saying "hey, look for the ACF field called feat_img and get the local, optimized versions of these images so you can use them". Gatsby also provides fragments which means inside of your application you could just put `...GatsbyImageSharpSizes` instead of drilling down so far and Gatsby will know what to do with it. + +Since you are seeing stuff on the right-hand side, it means that you are getting your data from WordPress, which is awesome! Now you need to tell Gatsby what to do with the data, so let's talk about the `gatsby-node.js` file a bit. + +## Creating pages in gatsby-node.js + +As I briefly mentioned earlier, the `gatsby-node.js` file is there so you can build pages programatically from data. There are two pieces to make this work: the logic in `gatsby-node.js` and a template file to render the data. Let's start by creating a simple template with no dynamic data just to make sure your logic is working properly. + +### Creating templates in Gatsby.js + +If you look inside the `src/` folder, you can see directories for components, images, and pages. You need to add one that will house your templates and then add a template for your blog posts. The following code will do this for you: + +```shell +mkdir ./src/templates && touch ./src/templates/BlogPost.js +``` + +Unless there is some special functionality needed for blog posts, you can just [use a stateless functional component](https://www.iamtimsmith.com/blog/class-components-vs-stateless-functional-components/). I won't go over components in this post, but if you need a refresher, you can [read up on components here](https://www.iamtimsmith.com/blog/how-to-create-a-component/). + +Below is the code I'm using for the template starter. This is just to make sure things are working after you finish setting up your `gatsby-node.js` logic. Once you know the page is being created, you will update the template to display correctly. + +```javascript +// src/templates/BlogPost.js +import React from "react" +import Layout from "../components/layout" + +const BlogPostTemplate = () => ( + +

Blog Post Template

+ +) + +export default BlogPostTemplate +``` + +### What is gatsby-node.js doing? + +Now let's talk about `gatsby-node.js` a bit more. Let's start off by discussing why you should use it. You have the ability to create pages and query information for a single blog post, which is very useful... sometimes. Imagine your blog had 100 blog posts and you have to develop a Gatsby site to display all of them. Do you really want to go in and create a separate page for every single one of them? That would be a lot of copying and pasting, not to mention a huge waste of time. + +The gatsby-node.js file allows you to pull in a template file, then query your data using GraphQL. Then you can loop through the appropriate data and programmatically create a page for each piece of data, in this case blog posts and pages. This template will be universal so all content of that type will look the same. You can also use different templates for different content types so your pages and blog posts don't have to look the same. + +
+ +
Yes!!!
+
+ +The code below pulls in the data for blog posts from WordPress and creates a page for each one using the createPage API provided by Gatsby. It is also much easier to pull in templates in this file using the path package, so I installed it using `npm install path`. + +```javascript +// gatsby-node.js + +/** + * Implement Gatsby's Node APIs in this file. + * + * See: https://www.gatsbyjs.org/docs/node-apis/ + */ + +// You can delete this file if you're not using it +const path = require(`path`) +const { createFilePath } = require(`gatsby-source-filesystem`) + +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions + const BlogPostTemplate = path.resolve("./src/templates/BlogPost.js") + + return graphql(` + { + allWordpressPost { + edges { + node { + slug + wordpress_id + } + } + } + } + `).then(result => { + if (result.errors) { + throw result.errors + } + + const BlogPosts = result.data.allWordpressPost.edges + BlogPosts.forEach(post => { + createPage({ + path: `/post/${post.node.slug}`, + component: BlogPostTemplate, + context: { + id: post.node.wordpress_id, + }, + }) + }) + }) +} +``` + +Just like before, you will need to restart your development server to see these changes take place. Go ahead and do that so you can make sure your logic is working correctly. The easiest way I've found (in development) to see a list of pages is to go to a route that doesn't exist, such as [http://localhost:8000/stuff](http://localhost:8000/stuff). + +You can now see all of the pages available and clicking on one should take you to the blog post template you created earlier that just shows Hello World. If this is what you're seeing, congrats! You're ready to move to the next section. + +![See a list of pages on the development 404 page](images/gatsby3.png) + +## Updating our blog post template + +Now that you have pages being created at the desired locations, you should update your blog post template to display the appropriate data. Although you need to make some changes, you will keep it as a stateless functional component. The code below will create your template. I would like to point out that you are using GraphQL to query the information which is then used as a prop called data. + +```javascript +// src/templates/BlogPostTemplate.js +import React from "react" +import { graphql } from "gatsby" +import Img from "gatsby-image" +import Layout from "../components/layout" +import SEO from "../components/seo" + +const BlogPostTemplate = ({ data }) => ( + + +

{data.wordpressPost.title}

+

+ Written by {data.wordpressPost.author.name} on {data.wordpressPost.date} +

+ {data.wordpressPost.title} +
+ +) +export default BlogPostTemplate + +export const query = graphql` + query($id: Int!) { + wordpressPost(wordpress_id: { eq: $id }) { + title + content + excerpt + date(formatString: "MMMM DD, YYYY") + author { + name + } + acf { + feat_img { + localFile { + childImageSharp { + sizes(maxWidth: 1200) { + ...GatsbyImageSharpSizes + } + } + } + } + } + } + } +` +``` + +You may notice that there are a few components inside of your template that you didn't create. These come along with the Gatsby starter default and can be modified as needed. + +The Layout component allows you to set a standard layout including header, footer, sidebar, etc on every page. Then you can just wrap your page inside that layout component without having to worry about importing everything inside of every template or page. + +The SEO component allows you to pass in dynamic data such as title, description, and keywords and the component will add those things to the head to improve your site's SEO score. I typically modify this component a bit so I can also pass in an image and I add a few properties to the meta, which allows Twitter, Facebook, and other sites to display a card like you would expect with an image and everything. + +Here's what your completed Blog Post looks like after you update the template: + +![Completed Blog Post Page](images/gatsby4.png) + +## Wrapping up blog posts + +You're about half-way done with the actual Gatsby.js build. In this post I covered how to import blog posts from WordPress into your Gatsby application and create pages automatically for each post. Honestly, this is the hardest part about making sites in Gatsby. If you're still keeping up, great job! If you're struggling, don't be too hard on yourself. This stuff is hard. If you need to, you can reach out to me on Twitter [@iam_timsmith](https://www.twitter.com/iam_timsmith) and I'll be happy to help you. + +
+ +
Obligatory Great Gatsby meme
+
+ +The [code for this tutorial](https://github.com/iamtimsmith/building-a-blog-with-wordpress-and-gatsby) can be found on Gitub. + +See you in [How To Build A Blog with Wordpress and Gatsby.js - Part 3](/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3)! diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/featured_image.jpg b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/featured_image.jpg new file mode 100644 index 0000000000000..0a8004656916d Binary files /dev/null and b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/featured_image.jpg differ diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby1.png b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby1.png new file mode 100644 index 0000000000000..ec941c3ccaf78 Binary files /dev/null and b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby1.png differ diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby2.png b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby2.png new file mode 100644 index 0000000000000..fcc37ba6f3753 Binary files /dev/null and b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby2.png differ diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby3.png b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby3.png new file mode 100644 index 0000000000000..321688b273a53 Binary files /dev/null and b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby3.png differ diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby4.png b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby4.png new file mode 100644 index 0000000000000..46dd5b9517bd6 Binary files /dev/null and b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby4.png differ diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby5.png b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby5.png new file mode 100644 index 0000000000000..cb989670deaa0 Binary files /dev/null and b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby5.png differ diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby6.png b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby6.png new file mode 100644 index 0000000000000..1866a96956315 Binary files /dev/null and b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby6.png differ diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby7.png b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby7.png new file mode 100644 index 0000000000000..2bab9f1224fe3 Binary files /dev/null and b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/images/gatsby7.png differ diff --git a/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md new file mode 100644 index 0000000000000..eea2a1244c33c --- /dev/null +++ b/docs/blog/2019-05-02-how-to-build-a-blog-with-wordpress-and-gatsby-part-3/index.md @@ -0,0 +1,595 @@ +--- +title: "How To Build A Blog with Wordpress and Gatsby.js - Part 3" +date: 2019-05-02 +author: Tim Smith +excerpt: "In the third part of this series about WordPress and Gatsby.js, you will be creating pages using templates and components using data from WordPress." +tags: + - wordpress + - apis + - blog + - headless cms + - react +canonicalLink: https://www.iamtimsmith.com/blog/how-to-build-a-blog-with-wordpress-and-gatsby-part-3/ +--- + +> Note: This is part two in a series of posts about Gatsby.js and WordPress. You can find [Part One here](/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1), and [Part Two here](/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2). + +In the third part of this series about WordPress and Gatsby.js, you will be creating pages using templates and components with data from WordPress. + +So far, I've talked about what themes and plugins to use for a WordPress backend and why. You have also created a new Gatsby site and set it up to create routes for your blog posts programmatically. You will be using the same skills for some of the things in this post since you probably want to have a default template for your static pages. After that, you'll create React.js components in the `/pages` directory which will replace the default template for the desired pages, in this case your home page. + +## Creating a page template + +As you'll recall from the last post, you should create a page template before adding the `createPages` API to the gatsby-node.js file so it has something to call. To do this, you'll create a file in the templates directory called PageTemplate.js using the code below: + +```shell +touch ./src/templates/Page.js +``` + +Just like with the blog post template, you can probably just use a [stateless functional component](https://www.iamtimsmith.com/blog/class-components-vs-stateless-functional-components/) for this. Like before, you won't cover how to create a component in this article, but you can read about [creating a React.js component here](https://www.iamtimsmith.com/blog/how-to-create-a-component/). + +I will go ahead and start off with a generic template again and then fill it out later with the appropriate data. The code below will get a simple template created for us to use for pages for now: + +```javascript +// src/templates/Page.js +import React from "react" +import Layout from "../components/layout" + +const PageTemplate = () => ( + +

Page Template

+ +) + +export default PageTemplate +``` + +## Adding pages to gatsby-node.js + +Awesome! Now that you have your page template created, you can add pages to the gatsby-node.js file. First, you will import the template just like you did for the BlogPostTemplate. Then you will add the allWordpressPage piece to the GraphQL query. Finally, you will use the `createPage` API to create pages based on the information retrieved from the GraphQL query and use the Page template to build the pages automatically. Below is the finished gatsby-node.js file. See if you can spot the things I mentioned for the pages. + +```javascript +// gatsby-node.js + +/** + * Implement Gatsby's Node APIs in this file. + * + * See: https://www.gatsbyjs.org/docs/node-apis/ + */ + +// You can delete this file if you're not using it +const path = require(`path`) +const { createFilePath } = require(`gatsby-source-filesystem`) + +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions + const BlogPostTemplate = path.resolve("./src/templates/BlogPost.js") + const PageTemplate = path.resolve("./src/templates/Page.js") + + return graphql(` + { + allWordpressPost { + edges { + node { + slug + wordpress_id + } + } + } + allWordpressPage { + edges { + node { + slug + wordpress_id + } + } + } + } + `).then(result => { + if (result.errors) { + throw result.errors + } + + const BlogPosts = result.data.allWordpressPost.edges + BlogPosts.forEach(post => { + createPage({ + path: `/post/${post.node.slug}`, + component: BlogPostTemplate, + context: { + id: post.node.wordpress_id, + }, + }) + + const Pages = result.data.allWordpressPage.edges + Pages.forEach(page => { + createPage({ + path: `/${page.node.slug}`, + component: PageTemplate, + context: { + id: page.node.wordpress_id, + }, + }) + }) + }) + }) +} +``` + +Just like before, you can test this to make sure the pages were created as expected by starting your development server and visiting [localhost:8000/stuff](http://localhost:8000/stuff) to get a list of all of the available pages. Again, this is only available in a development environment since a live site will show a different 404 page. You should see an `/about` page and a `/sample-page` page in there. If so, your gatsby-node.js file worked and you can update the template to show the data you want. + +![See a list of available pages](images/gatsby1.png) + +## Updating the page template + +Since you have your page routes set up, you can start adding to the template. This will look very similar to the BlogPost.js file with only a few differences. In your blog, you aren't going to have a featured image for static pages, so you can go ahead and leave that piece out of the query. You also don't need a date or author for the pages since they don't change. Essentially all you'll need is a title and content along with an excerpt for the SEO component. + +The end result is a basic component as shown below: + +```javascript +// src/templates/Page.js +import React from "react" +import { graphql } from "gatsby" +import Layout from "../components/layout.js" +import SEO from "../components/seo" + +const PageTemplate = ({ data }) => ( + + +

{data.wordpressPage.title}

+
+ +) + +export default PageTemplate + +export const query = graphql` + query($id: Int!) { + wordpressPage(wordpress_id: { eq: $id }) { + title + excerpt + content + } + } +` +``` + +I mentioned at the end of [part two](/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2) that configuring the gatsby-node.js file is probably the most difficult part of this whole thing. Since you worked your way through that already and understand how it works, setting up another content type was cake, right? + +
+ +
...That was easy
+
+ +Now if you visit the about page at [http://localhost:8000/about](http://localhost:8000/about), you can see the data coming in from WordPress. If you inspect the page and look at the head, you can also see that the title and meta tags are being updated in the head because of the SEO component! + +## Creating pages in the pages directory + +Gatsby provides some awesome out-of-the-box routing. Anything you create in the `/pages` directory will automatically create a route for you. For instance, if you were to create a file called `gatsby-is-awesome.js`, Gatsby.js would see that and create a route called http://localhost:8000/gatsby-is-awesome. + +You can also see that the starter default comes with a few pages already in the `/pages` directory. The index page is what will show when a user visits [http://localhost:8000/](http://localhost:8000/). There is also a file called page-2.js which is just a simple page to show how linking works. Finally, there is a 404.js available which is the 404 page that shows when your Gatsby site is live. + +Since you want your blog to show up on the homepage, you can edit the file called `index.js` to do this. Let's take a look at this file before you make any changes: + +```javascript +// src/pages/index.js +import React from "react" +import { Link } from "gatsby" + +import Layout from "../components/layout" +import Image from "../components/image" +import SEO from "../components/seo" + +const IndexPage = () => ( + + +

Hi people

+

Welcome to your new Gatsby site.

+

Now go build something great.

+
+ +
+ Go to page 2 + +) + +export default IndexPage +``` + +You are going to remove everything after the SEO tag but before the closing Layout tag and replace it with your own stuff. You can also use a query pretty similar to the one in the blog post template except for the content piece. You can just use the excerpt provided by the WordPress API. + +To keep things basic, you'll just create a list of recent blog posts with an image, title, author, date, and excerpt. Each of the items in this list should link to the individual blog post for readers. Below is the code to create this layout. It's pretty straightforward and looks very similar to your blog post template with the exception of the map function which iterates over the items in an array. + +```javascript +// src/pages/index.js +import React from "react" +import { graphql, Link } from "gatsby" +import Img from "gatsby-image" + +import Layout from "../components/layout" +import SEO from "../components/seo" + +const IndexPage = ({ data }) => ( + + +
    + {data.allWordpressPost.edges.map(post => ( +
  • + + {post.node.title} +
    +

    +

    + Written by {post.node.author.name} on {post.node.date} +

    +
    +
    + +

    • + ))} +
+ +) + +export default IndexPage + +export const query = graphql` + query { + allWordpressPost { + edges { + node { + title + excerpt + slug + author { + name + } + date(formatString: "MMMM DD, YYYY") + acf { + feat_img { + localFile { + childImageSharp { + sizes(maxWidth: 600) { + ...GatsbyImageSharpSizes + } + } + } + } + } + } + } + } + } +` +``` + +And here's what it looks like when you visit the homepage of your blog: + +![Finished blog home page](images/gatsby2.png) + +It's looking pretty good so far. You're getting pretty close to being done, you just have a few more things to change and you're ready to start blogging! + +
+ +
So close...
+
+ +## Changing the header component + +One of the first things I notice about the blog pictured above is the header. It doesn't look bad, but you probably don't want your blog to say "Gatsby Default Starter". There are a few ways you can change this, which I'll go over real quick. + +### In the gatsby-config.js file + +In the gatsby-config.js file, you can see a piece at the top called `siteMetaData` with a title, description, and author. This is where some basic information is kept about the project for the SEO component, but also for the site name. + +```javascript +// gatsby-config.js +module.exports = { + siteMetadata: { + title: `Gatsby Default Starter`, + description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, + author: `@gatsbyjs`, + }, + plugins: [ ... ], +} +``` + +The title you're seeing in the header comes from the title listed here. You can change it to whatever you'd like your site to be called. Usually when building a WordPress site, I get all of my data for this from WordPress but in the case of a site using markdown or something different you may want to use the stuff located here. + +### In the header component + +Since you are building a blog using WordPress and want your users to have full control over the data, you should get your site name from WordPress so if it ever changes the user can update it. Fortunately, WordPress makes this available to us through the API, so you can query it in GraphQL like so: + +![Graphql query to get siteName from WordPress](images/gatsby3.png) + +Using queries works a bit differently inside of components. Rather than just writing a query which drops data into your page or template, you have to use a new component called `StaticQuery` which is designed specifically for using queries inside of components. + +```javascript +// src/components/header.js +import { Link } from "gatsby" +import PropTypes from "prop-types" +import React from "react" + +const Header = ({ siteTitle }) => ( +
+
+

+ + {siteTitle} + +

+
+
+) + +Header.propTypes = { + siteTitle: PropTypes.string, +} + +Header.defaultProps = { + siteTitle: ``, +} + +export default Header +``` + +If you take a quick look at the existing header component, you will see that a site-title is being passed in as a prop which is then used to display the site title from `gatsby-config.js` in the header. What you are going to do is use the `StaticQuery` component provided by Gatsby and use a query prop to run your query and then a render prop to actually render out your component like you normally would. You can see below how you do this in code: + +```javascript +// src/components/header.js +import { StaticQuery, graphql, Link } from "gatsby" +import React from "react" + +const Header = () => ( + ( +
+
+

+ + {data.wordpressSiteMetadata.name} + +

+
+
+ )} + /> +) + +export default Header +``` + +The header component above looks a little different than it originally did, but as you start to dig into it a bit more you can see it hasn't changed much. You essentially just wrapped your header in the StaticQuery component and then ran your query inside of that component to give the header the necessary data. + +![Your Gatsby.js blog after updating the header component](images/gatsby4.png) + +### Adding a Menu to the Header + +Let's take it a step further and say your user wants a menu in the header that he or she can update from WordPress. If you'll recall in the [first part of this series](/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1), I mentioned a plugin called WP API Menus which will make your menus available in the Rest API. + +When you were setting your gatsby-config.js file in the [second part of the series](/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2), you just stuck with the default routes provided in the gatsby-source-wordpress docs. The WP API Menus plugin creates a few new routes for those endpoints, so the first thing you need to do is add these endpoints to the gatsby-config.js file. + +```javascript +// gatsby-config.js +module.exports = { + siteMetadata: { + title: `Gatsby Default Starter`, + description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, + author: `@gatsbyjs`, + }, + plugins: [ + `gatsby-plugin-react-helmet`, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `images`, + path: `${__dirname}/src/images`, + }, + }, + `gatsby-transformer-sharp`, + `gatsby-plugin-sharp`, + { + resolve: `gatsby-plugin-manifest`, + options: { + name: `gatsby-starter-default`, + short_name: `starter`, + start_url: `/`, + background_color: `#663399`, + theme_color: `#663399`, + display: `minimal-ui`, + icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. + }, + }, + { + resolve: "gatsby-source-wordpress", + options: { + // I have created a dummy site for us to use with the plugins we discussed + baseUrl: "using-wordpress-with-gatsby.iamtimsmith.com", + protocol: "https", + hostingWPCOM: false, + // We will be using some advanced custom fields + useACF: true, + acfOptionPageIds: [], + verboseOutput: false, + perPage: 100, + searchAndReplaceContentUrls: { + sourceUrl: "https://www.using-wordpress-with-gatsby.iamtimsmith.com", + replacementUrl: "https://localhost:8000", + }, + // Set how many simultaneous requests are sent at once. + concurrentRequests: 10, + includedRoutes: [ + "**/categories", + "**/posts", + "**/pages", + "**/media", + "**/tags", + "**/taxonomies", + "**/users", + "**/*/*/menus", // <== Menu api endpoint + "**/*/*/menu-locations", // <== Menu api endpoint + ], + excludedRoutes: [], + normalizer: function({ entities }) { + return entities + }, + }, + }, + `gatsby-plugin-sitemap`, + // this (optional) plugin enables Progressive Web App + Offline functionality + // To learn more, visit: https://gatsby.dev/offline + // 'gatsby-plugin-offline', + ], +} +``` + +If you look at the code above, you'll notice you have added two new routes to the gatsby-source-wordpress. These routes are created automatically by the plugin inside of WordPress without any additional configuration. Remember, after making changes to files outside of the src folder, you need to restart your development server by running `gatsby develop`. After restarting, you can visit [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql) and query for the menu information, which will look like the screenshot below. + +![GraphiQL query to get menu items from WordPress](images/gatsby6.png) + +The final step is to add this query into your static query and create the menu itself in the header component. You can just drop this in under the wordpressSiteMetadata piece. Once you have it added into the query, you can just use a `map()` function to iterate over the menu items and create it dynamically, allowing the user to update it through WordPress. Doing it this way does require us to specify which menu you want, so you need the name of the menu which is set in WordPress. In this case, your menu is called Main Menu so you will use that in your query. + +```javascript +// src/components/header.js +import { StaticQuery, graphql, Link } from "gatsby" +import React from "react" + +const Header = () => ( + ( +
+
+

+ + {data.wordpressSiteMetadata.name} + +

+
    + {data.wordpressWpApiMenusMenusItems.items.map(item => ( +
  • + + {item.title} + +
    • + ))} +
+
+
+ )} + /> +) + +export default Header +``` + +That's a good looking component! Let's see what it looks like when you visit the site: + +![Blog after adding menu to header](images/gatsby7.png) + +## Wrapping up + +Well done! You now have a functioning blog using WordPress and Gatsby. There are more things you can do to add custom functionality such as custom post types, galleries, and more, but this is enough to get you started for now. As you've seen, this stack is the best of both worlds since clients and users get the awesome experience of content creating with WordPress and as a developer you can leverage the amazing capabilities of Gatsby. As usual, go forth and make the internet a better place to be! + +The [code for this post](https://github.com/iamtimsmith/building-a-blog-with-wordpress-and-gatsby) can be found on Github. + +If you have any thoughts or questions, you can find me on twitter at [@iam_timsmith](https://twitter.com/iam_timsmith)! diff --git a/docs/blog/author.yaml b/docs/blog/author.yaml index 94d3a016b02d8..11d0899a9b962 100644 --- a/docs/blog/author.yaml +++ b/docs/blog/author.yaml @@ -274,3 +274,7 @@ bio: Big half of Little & Big. Frontend Developer. Also makes stuff with wood. avatar: avatars/allan-pooley.jpg twitter: "@PooleyAllan" +- id: Tim Smith + bio: Programmer Analyst @HonCompany. Freelance Web Developer. Person. + avatar: avatars/tim-smith.jpg + twitter: "@iam_timsmith" diff --git a/docs/blog/avatars/tim-smith.jpg b/docs/blog/avatars/tim-smith.jpg new file mode 100644 index 0000000000000..ae82eae221bff Binary files /dev/null and b/docs/blog/avatars/tim-smith.jpg differ