{"id":252280,"date":"2022-08-19T11:59:20","date_gmt":"2022-08-19T11:59:20","guid":{"rendered":"https:\/\/www.webscale.com\/?p=252280"},"modified":"2023-12-29T15:42:18","modified_gmt":"2023-12-29T20:42:18","slug":"trying-out-headless-wordpress-gatsby","status":"publish","type":"post","link":"https:\/\/www.webscale.com\/blog\/trying-out-headless-wordpress-gatsby\/","title":{"rendered":"Part 2: Trying Out Headless WordPress: Gatsby"},"content":{"rendered":"

Webscale is a big supporter of going headless, taking your monolithic server application like Magento or WordPress offline and using it to generate a static site. This time we\u2019ll try out Gatsby, a static site generator that gets my content from WordPress via API and then constructs a site based on the Gatsby template or theme I\u2019ve chosen, built, or modified.<\/p>\n

In the previous installment, I went through using the\u00a0Duplicator plugin<\/a>\u00a0to create a copy of my personal WordPress site, installing that copy to my laptop with\u00a0Local<\/a>, and then generating a static copy of my site with\u00a0WP2Static<\/a>. You can [link] hop over to the WP2Static WordPress experiment article [\/link] if you want the details.<\/p>\n

A \u201cgenerator\u201d vs a \u201cscraper\u201d<\/b><\/h3>\n

As mentioned below, Gatsby gets information from my WordPress installation via API and then generates a site based on a theme (and possibly plugins). It\u2019s a site generator.<\/p>\n

WP2Static, used in the prior blog, literally builds a map of every page your WordPress site might generate, then uses a web crawler to copy (or \u201cscrape\u201d) all of them, and does some post-processing to make them work as a standalone static site.<\/p>\n

The advantage of a generator like Gatsby is that if I decide to dump WordPress for another content management system, all my design and functionality work doesn\u2019t need to be duplicated. I can do some remapping on the backend and the Gatsby-generated frontend can remain the same, or at least very similar.<\/p>\n

The disadvantage is that I (might) lose a lot of the design elements I built into my existing WordPress site. I\u2019ll need to do more work on Gatsby to get the look and feel my old site had. On the other hand, this may be the perfect excuse for a redesign.<\/p>\n

Gatsby has a\u00a0large showcase of open source themes<\/a>\u00a0that can provide a great jumping-off point.<\/p>\n

With both, if you\u2019re using your WordPress server to handle forms (email sign-up, comments, user registration, search), you will need to find\/create alternatives. For example, you might use Disqus to handle comments instead of WordPress.<\/p>\n

WordPress + Gatsby Prerequisites<\/b><\/h3>\n

This requires two assistants on the WordPress side to connect Gatsby and your WordPress site in the form of WordPress plugins:\u00a0WPGraphQL<\/a>\u00a0and\u00a0WPGatsby<\/a>. I installed those and made sure to copy my GraphQL endpoint from the WPGraphQL plugin\u2019s settings.<\/p>\n

\"\"graphql-URL.png<\/i><\/p>\n

 <\/p>\n

Then I followed the steps in the conveniently provided\u00a0Gatsby Starter WordPress Blog<\/a>.<\/p>\n

One thing it doesn\u2019t include is to install Gatsby globally with NPM. If you haven\u2019t already, do that first.<\/p>\n

npm install -g gatsby-cli<\/code><\/pre>\n
Next, install the starter kit (this is all one line below).<\/p>\n
gatsby new my-blog-starter https:\/\/github.com\/gatsbyjs\/gatsby-starter-wordpress-blog<\/code><\/pre>\n
Configuring Gatsby for Local WordPress<\/b><\/h3>\n
This will create a folder named my-blog-starter. Navigate into that directory. Create a file called .env.development.<\/p>\n
Open it and add the following line to make sure you don\u2019t have issues with SSL certificates:<\/p>\n
NODE_TLS_REJECT_UNAUTHORIZED=0<\/code><\/pre>\n
Save, then open gatsby-config.js for editing.<\/p>\n
First, add the following to the top. It\u2019s only necessary for this configuration where the demo uses a locally hosted WordPress site and a self-signed certificate. It will also only work in development mode. If you\u2019re planning to do more than play, a more production-ready environment would be required.<\/p>\n
require(\"dotenv\").config({\r\n path: `.env.${process.env.NODE_ENV}`,\r\n})<\/code><\/pre>\n
Next, head down to the first plugin entry\u2026<\/p>\n
 \u00a0\u00a0\u00a0\u00a0\u00a0resolve: `gatsby-source-wordpress`,\r\n \u00a0\u00a0\u00a0\u00a0\u00a0options: {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ the only required plugin option for WordPress is the GraphQL url.\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url:\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0process.env.WPGRAPHQL_URL ||\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`https:\/\/wpgatsbydemo.wpengine.com\/graphql`,\r\n \u00a0\u00a0\u00a0\u00a0\u00a0},\u00a0\r\n},<\/code><\/pre>\n
Replace\u00a0https:\/\/wpgatsbydemo.wpengine.com\/graphql<\/code>\u00a0with the URL you copied from your WPGraphQL settings. In my case, that\u2019s https:\/\/lmpcdemo.local\/graphql.<\/p>\n
Save the file. Open a command prompt in the same folder and run gatsby develop from the command line. It\u2019ll take a minute or two for the first build and then:<\/p>\n
You can now view gatsby-starter-wordpress-blog in the browser.<\/p>\n
\u00a0\u00a0http:\/\/localhost:8000\/<\/code><\/pre>\n
When I visited localhost:8000 in my browser, it wasn\u2019t super amazing, but it worked. It was my old WordPress blog with the contents pulled by API and fit into the default Gatsby template. At this point I was able to edit the template or do other things. For example\u2026<\/p>\n
\"\"Gatsby-prechange.png<\/i><\/p>\n
 <\/p>\n
Gatsby watches the blog for changes.<\/p>\n
\"\"Gatsby-postchange.png<\/i><\/p>\n
 <\/p>\n
I went into my local version of my site and changed the title of the latest post. The post title was updated automatically in my locally running Gatsby site.<\/p>\n
I\u2019ve cropped the title\/domain off the top of the screen captures to make more room for content. Still the blog title was there. It was a very clean, minimalist copy of my blog.<\/p>\n
Final thoughts<\/b><\/h3>\n
Which is better, a scraper or a generator? It depends on your plans and timeline.<\/p>\n
If you\u2019re in a hurry, not changing much of the design\u2026 scraping.<\/b><\/p>\n
You can likely push a simple blog from a WordPress site to a scraped static version with a couple of days of work, There might be a few migration issues, like moving to a 3rd party service for comments and site search, but in general it would keep your site mostly as is while reaping the benefits of headless.<\/p>\n
If you\u2019re planning a redesign\u2026 generating.<\/b><\/p>\n
If you\u2019re generating and you want more than a minimalist theme, you\u2019ll need to do some redesigning anyway. The benefit is that you can more easily adapt that design to use a different backend if you decide to dump WordPress farther down the road. The learning curve is definitely higher, but if you already have some React developers on staff, it shouldn\u2019t be hard for them to jump in.<\/p>\n
Whichever you\u2019re choosing to do\u2026 talk to us.<\/b><\/p>\n
Webscale can help deliver it on the cloud, secure it, and speed it up even further, making your blog safer and faster for you and your customers. If you have us helping you with your ecommerce, but you\u2019re still running your own WordPress blog,\u00a0talk to our experts<\/a>\u00a0about moving your WordPress blog to a headless blog solution, setting up a CI\/CD process for publishing updates, and adding it to your package.<\/p>\n","protected":false},"excerpt":{"rendered":"
Webscale is a big supporter of going headless, taking your monolithic server application like Magento or WordPress offline and using it to generate a static site. This time we\u2019ll try out Gatsby, a static site generator that gets my content from WordPress via API and then constructs a site based on the Gatsby template or […]<\/p>\n","protected":false},"author":27,"featured_media":255597,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","rank_math_lock_modified_date":false,"_aioseo_description":"","_aioseo_keywords":"","_aioseo_og_article_section":"","_aioseo_og_article_tags":"","_aioseo_og_description":"","_aioseo_og_title":"","_aioseo_title":"","_aioseo_twitter_description":"","_aioseo_twitter_title":"","_author_photo":"field_6513304084a08","_doc_url":"","_dp_original":"","_et_autogenerated_title":"","_et_body_layout_enabled":"","_et_body_layout_id":"","_et_builder_dynamic_assets_loading_attr_threshold":"2","_et_builder_module_features_cache":null,"_et_builder_version":"","_et_default":"","_et_enabled":"","_et_footer_layout_enabled":"","_et_footer_layout_id":"","_et_header_layout_enabled":"","_et_header_layout_id":"","_et_pb_ab_current_shortcode":"","_et_pb_ab_subjects":"","_et_pb_built_for_post_type":"","_et_pb_custom_css":"","_et_pb_enable_shortcode_tracking":"","_et_pb_excluded_global_options":"","_et_pb_first_image":"","_et_pb_gutter_width":"","_et_pb_module_type":"","_et_pb_page_layout":"et_no_sidebar","_et_pb_page_z_index":"","_et_pb_post_hide_nav":"default","_et_pb_row_layout":"","_et_pb_show_page_creation":"","_et_pb_show_title":"on","_et_pb_side_nav":"off","_et_pb_static_css_file":"","_et_pb_truncate_post":"","_et_pb_truncate_post_date":"","_et_post_bg_color":"#ffffff","_et_post_bg_layout":"light","_et_template":[],"_et_theme_builder_marked_as_unused":"","_et_use_on":"","_gallery_link_target":"","_global_colors_info":"","_lh_copy_from_url-original_file":"","_version_history":"","_wp_old_date":["2022-08-01","2022-07-28","2022-08-11"],"_wpcode_auto_insert":"","_wpcode_auto_insert_number":"","_wpcode_conditional_logic":[],"_wpcode_conditional_logic_enabled":"","_wpcode_library_id":"","_wpcode_library_version":"","_wpcode_location_extra":"","_wpcode_note":"","_wpcode_priority":"","_wpcode_shortcode_attributes":[],"_wpmf_gallery_custom_image_link":"","ao_post_optimize":[],"author_photo":"255852","doc_url":"","et_enqueued_post_fonts":{"family":{"et-gf-lato":"Lato:100,100italic,300,300italic,regular,italic,700,700italic,900,900italic"},"subset":["latin","latin-ext"],"cache_key":"{\"gph\":0,\"divi\":\"4.24.1\",\"wp\":\"6.6.2\",\"enable_all_character_sets\":\"false\"}"},"rank_math_contentai_score":{"wordCount":"100","linkCount":"0","headingCount":"100","mediaCount":"62.22"},"rank_math_description":"","rank_math_facebook_image":"https:\/\/www.webscale.com\/wp-content\/uploads\/2022\/07\/Headless-Wordpress-2-1.png","rank_math_facebook_image_id":"252289","rank_math_internal_links_processed":["1","1"],"rank_math_og_content_image":[],"rank_math_seo_score":"29","rank_math_title":"","version_history":"","wp-smpro-smush-data":[],"wp-smush-animated":"","wpmf_filetype":"","wpmf_order":"","wpmf_size":"","_":"","_bj_lazy_load_skip_post":[],"_divi_filters_post_type":"","_et_dynamic_cached_attributes":{"sticky_position":["top"],"use_custom_gutter":["on"],"fullwidth":["off"],"button_icon":["$||divi||400"],"social_network":["facebook","twitter","linkedin","youtube","last_fm"],"header_2_font":"|800|||||||","header_2_font_size":"34px","header_2_text_align":"center","animation_intensity_slide":"10%","animation_duration":"800ms","animation_delay":"15ms","animation_intensity_zoom":"15%","animation_intensity_flip":"15%","animation_intensity_fold":"15%","animation_intensity_roll":"15%","animation_direction":"center","animation_style":"none","background_color_gradient_start":"rgba(255,255,255,0)","background_color_gradient_end":"#fafafa","custom_padding":"120px||0px||false|false","background_color_gradient_stops":"rgba(255,255,255,0) 0%|#fafafa 100%","custom_padding_last_edited":"on|desktop","custom_padding_tablet":"||30px||false|false","custom_padding_phone":"60px||||false|false"},"_et_dynamic_cached_shortcodes":["et_pb_post_content","et_pb_contact_field","et_pb_signup_custom_field","et_pb_social_media_follow_network","et_pb_section","et_pb_row","et_pb_column","et_pb_blog","et_pb_blurb","et_pb_button","et_pb_code","et_pb_contact_form","et_pb_post_nav","et_pb_post_title","et_pb_signup","et_pb_social_media_follow","et_pb_text"],"_et_pb_ab_bounce_rate_limit":"","_et_pb_ab_stats_refresh_interval":[],"_et_pb_content_area_background_color":"","_et_pb_dark_text_color":"","_et_pb_light_text_color":"","_et_pb_section_background_color":"","_job_location":"","_job_locations":"","_links_to":"","_links_to_target":"","_product_image_gallery":"","_schema_code":"","_synced_version":"","_wp_attachment_context":"","_wp_attachment_image_alt":[],"_wpie_source_url":"","_yoast_wpseo_content_score":"90","_yoast_wpseo_focuskeywords":"[]","_yoast_wpseo_metadesc":"","_yoast_wpseo_opengraph-image":"https:\/\/www.webscale.com\/wp-content\/uploads\/2022\/07\/Headless-Wordpress-2-1.png","_yst_prominent_words_version":"1","inline_featured_image":["0"],"job_location":[],"job_locations":"","options":"","original-file":"","post_views_count":"","rank_math_analytic_object_id":"1751","rank_math_canonical_url":"","rank_math_focus_keyword":[],"rank_math_news_sitemap_robots":"index","rank_math_primary_category":"0","rank_math_primary_ccategory":"","rank_math_primary_job_locations":"","rank_math_primary_partners_category":"","rank_math_primary_pr_category":"","rank_math_primary_press_release_year":"","rank_math_rich_snippet":"","rank_math_robots":["index"],"rank_math_schema_Article":[],"rank_math_schema_Organization":[],"rank_math_schema_VideoObject":[],"rank_math_shortcode_schema_s-23675683-fff5-4300-88fe-da8afc8b1bb9":"","rank_math_shortcode_schema_s-307bbc91-c6b1-41aa-950d-c50d435a949c":"","rank_math_shortcode_schema_s-63a052dbc0384":"","rank_math_shortcode_schema_s-63a052dbc039d":"","rank_math_shortcode_schema_s-63a052dbc03a6":"","rank_math_shortcode_schema_s-63a052dbc03aa":"","rank_math_shortcode_schema_s-63a052dbc03b5":"","rank_math_shortcode_schema_s-63a052dbc03ba":"","rank_math_shortcode_schema_s-63a052dbc03bd":"","rank_math_shortcode_schema_s-63b6dd7d53a96":"","rank_math_shortcode_schema_s-63b6dd7d53a9f":"","rank_math_shortcode_schema_s-63b6dd7d53aa2":"","rank_math_shortcode_schema_s-63b6dd7d53aa4":"","rank_math_shortcode_schema_s-63b6dd7d53aa7":"","rank_math_shortcode_schema_s-63b6dd7d53aa9":"","rank_math_shortcode_schema_s-63b6dd7d53aab":"","rank_math_shortcode_schema_s-63b6dd7d53aad":"","rank_math_shortcode_schema_s-63b6dd7d53aaf":"","rank_math_shortcode_schema_s-63c15fcf43311":"","rank_math_shortcode_schema_s-63c15fcf43322":"","rank_math_shortcode_schema_s-63c15fcf43325":"","rank_math_shortcode_schema_s-63c15fcf43327":"","rank_math_shortcode_schema_s-63c15fcf43329":"","rank_math_shortcode_schema_s-63c15fcf4332a":"","rank_math_shortcode_schema_s-63c15fcf4332c":"","rank_math_shortcode_schema_s-63c15fcf4332e":"","rank_math_shortcode_schema_s-63c15fcf43330":"","rank_math_shortcode_schema_s-63f52c5ed40bb":"","rank_math_shortcode_schema_s-6409f40a9b7d5":"","rank_math_shortcode_schema_s-64354a3892419":"","rank_math_shortcode_schema_s-6440158136148":"","rank_math_shortcode_schema_s-6446d2f9353ee":"","rank_math_shortcode_schema_s-6446d2f9353f3":"","rank_math_shortcode_schema_s-6447c0fe4673c":"","rank_math_shortcode_schema_s-64e4d743542d7":"","schema_code":"","smush-complete":"","smush-info":"","smush-stats":[],"synced_version":"","wpmf_remote_video_link":"","_exp":"","_inc":"","_mc4wp_settings":[],"_post-subtitle":"","_pwh_dcfh_contact_email":"","_pwh_dcfh_contact_form_id":"","_pwh_dcfh_form_fields":"","_pwh_dcfh_ip_address":"","_pwh_dcfh_page_id":"","_pwh_dcfh_read_by":"","_pwh_dcfh_referer_url":"","_pwh_dcfh_user_agent":[],"_section1_col1":"","_section1_col2":"","_section1_col3":"","_section1_col4":"","_section2_col1":"","_section2_col2":"","_section2_col3":"","_section2_col4":"","_section2_col5":"","_section2_col6":"","_section3_col1":"","_section3_col2":"","_section3_col3":"","_section3_col4":"","_section3_col5":"","_section3_col6":"","_section4_col1":"","_section4_col2":"","_section4_col3":"","_section4_col4":"","_section4_col5":"","_section4_col6":"","_section5_col1":"","_section5_col2":"","_section5_col3":"","_section5_col4":"","_section5_col5":"","_section5_col6":"","_section6_col1":"","_section6_col2":"","_section6_col3":"","_section6_col4":"","_section6_col5":"","_section6_col6":"","_select_author":"","_test":"","_wp_attachment_backup_sizes":[],"_yoast_wpseo_estimated-reading-time-minutes":[],"_yoast_wpseo_focuskw":[],"_yoast_wpseo_focuskw_text_input":[],"_yoast_wpseo_linkdex":[],"_yoast_wpseo_meta-robots-nofollow":[],"_yoast_wpseo_meta-robots-noindex":[],"_yoast_wpseo_primary_category":[""],"_yoast_wpseo_title":[],"_yoast_wpseo_wordproof_timestamp":"","exp":"","inc":"","post-subtitle":[],"rank_math_schema_BlogPosting":[],"section1_col1":"","section1_col2":"","section1_col3":"","section1_col4":"","section2_col1":"","section2_col2":"","section2_col3":"","section2_col4":"","section2_col5":"","section2_col6":"","section3_col1":"","section3_col2":"","section3_col3":"","section3_col4":"","section3_col5":"","section3_col6":"","section4_col1":"","section4_col2":"","section4_col3":"","section4_col4":"","section4_col5":"","section4_col6":"","section5_col1":"","section5_col2":"","section5_col3":"","section5_col4":"","section5_col5":"","section5_col6":"","section6_col1":"","section6_col2":"","section6_col3":"","section6_col4":"","section6_col5":"","section6_col6":"","select_author":"","test":"","footnotes":""},"categories":[1,31],"tags":[],"class_list":["post-252280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-headless-pwa"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/posts\/252280"}],"collection":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/comments?post=252280"}],"version-history":[{"count":0,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/posts\/252280\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/media\/255597"}],"wp:attachment":[{"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/media?parent=252280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/categories?post=252280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webscale.com\/wp-json\/wp\/v2\/tags?post=252280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}