JAM Stack : Portfolio website building with Gatsby and Wordpress

Introduction

• Jamstack is an architecture designed to make the web faster, more secure, and easier to scale.
• It builds on many of the tools and workflows which developers love, and which bring maximum productivity.
• The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.
• Popular tools for generating sites, are  Gatsby, Hugo, Jekyll, Eleventy, NextJS, and very many more

GATSBY as a Static Site Generator

• Build blazing-fast, modern apps and websites with React
• Features:
• Fast no-reload page changes
• Build sites with React.js components
• Hot reload editing. Tweak pages, templates, and styles and see changes in real time.

Why GATSBY over other Static Site Generators

Modern web tech without the headache
Enjoy the power of the latest web technologies – React.js, Webpack, modern JavaScript and CSS and more — all setup and waiting for you to start building.

Bring your own data
Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system & more directly into your pages using GraphQL.

Scale to the entire internet
Gatsby.js is Internet Scale. Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears. Gatsby.js builds your site as “static” files which can be deployed easily on dozens of services.

Future-proof your website
The future of the web is mobile, JavaScript and APIs—the Jamstack. Every website is a web app and every web app is a website. Gatsby.js is the universal JavaScript framework you’ve been waiting for.

Static Progressive Web Apps
Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

Speed past the competition
Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers — ready to be delivered instantly to your users wherever they are.

Architecture

Get Started With HW/SW Requirements

Implementation

Project development objective

• The objective of this project is to explore the various benefits of Gatsby, static site generator.

The Key Performance Indicators are:

• Fast no-reload page changes
• Build sites with React.js components
• Hot reload editing. Tweak pages, templates, and styles and see changes in real time.

The Project beneficiaries are:

• Developers and end users of our organisation

where does GATSBY + Wordpress fit

WordPress + Gatsby is great for:

• Content teams who are comfortable with the WordPress content editing experience
• Development teams who value using popular, open-source technologies
• Redesigns of sites with content already stored in WordPress
• Teams who want to own their data and tech stack
• Complex access control workflows or content modelling restrictions
• Projects where security is important
• High demand projects where performance is paramount

Testing GATSBY

• One of the benefits of building a Gatsby project is the ability to add automated tests for your components, APIs, pages, and more.
• With Gatsby, you can employ modern tooling like Jest and Cypress (or other tools of your choosing) to build a robust React web application.
• This section covers common tools and setup instructions for adding testing functionality to your Gatsby project.

Frameworks examples

Results and Discussion

Conclusion

For teams experienced with WordPress development, adding Gatsby is a great way to add modern performance, scalability, security, and development speed benefits while retaining the familiar content creation user interface offered by WordPress

WordPress + Gatsby is not-so-great for:

• Teams requiring the use of WordPress UI themes
• Those looking for a fully managed cloud CMS