virusword.com

Learn Wordpress

Home/Videos/How to Build a Blog with GatsbyJS and Wordpress (JAMstack Tutorial)

How to Build a Blog with GatsbyJS and WordPress (JAMstack Tutorial)



Let’s build a fast and secure blogging website from scratch using GatsbyJS and WordPress CMS
Use code VADIM and Get up to 91% discount on yearly plans on Hostinger: https://www.hostinger.com/vadim

📚 Enroll in “The Full-stack Mobile Developer” and become a 6-figure dev in 2021: https://academy.notjust.dev/

In this tutorial, we will learn how we can build a fast, performant and secure blog, in less than an hour using JAMstack. We will use GatsbyJS to build the blog because it gives us the possibility to pre-built the website to HTML, CSS and vanilla Javascript. A prebuilt website does not need a server to run on, and can be easily distributed using a CDN (content delivery network). This makes a Gatsby website very fast, secure and scalable.

To manage the content of our blog, we will use WordPress CMS. WordPress is a mature technology, widely adopted and used by a lot of existing website. We will leverage the powerful CMS of wordpress for our blog by connecting the Gatsby website with WordPress.

The GatsbyJS + WordPress is a great combination to build modern websites (blogs, e-commerce, portfolios). It is also a great choice if you are redesigning an existing WordPress website and want to use a modern Javascript framework, without having to migrate the data. Existing editorial teams will keep working with WordPress to manage the content, which is a great benefit.

💬 Join the notJust Development gang and let’s build together
https://discord.gg/VpURUN2

Tag me on social media when you finish this build, and I will give you feedback on your project.

LinkedIn: https://www.linkedin.com/in/vadimsavin
IG: https://www.instagram.com/vadimsavin0
Twitter: https://twitter.com/SavinVadim_

Timecodes:
00:00 Hello world
00:11 What we are going to build in this video
01:26 The Architecture
02:44 Hostinger offer
03:40 Why WordPress?
04:21 What is GatsbyJS?
05:30 The power of WordPress + GatsbyJS stack
06:32 Setup Hostinger and Deploy a WordPress site
13:09 Install WordPress plugins (WPGraphql, WPGatsby)
15:05 Create a GatsbyJS Project
30:09 Deploy Gatsby bog to Gatsby Cloud
39:29 Setup Automatic builds (CI/CD)
47:09 Thanks for watching, see you next week 🙂

This video is sponsored by Hostinger.

#VadimSavin #notjustdev #notJustDevelopment

source

Reader Interactions

Comments

  4. so headless WordPress require 2 domain names, one for wordpress, another for gatsby front-end part? Is it possible to manage the website like normal WordPress with one 1URL? For example, type in /wp-admin in gatsby url to manage WP.

  7. nice channel love the vids! can we chat? ill hire u to ask u questions for 30 mins lol dm me on ig dmfs100 ur ig link is broken 🙂

  12. Hey, I am waiting for this kind of tutorial from a long time.
    Can you make wordpress as cms and gatsby for Frontend like this but also woocommerce functionality.
    Also how to use the same backend and use it for apps made with react native.
    So finally one cms and web ui is gatsby and application is react native.
    Please I request you to consider this.
    Edit: Instead of gatsby NextJs is also fine.

Explore more

Get our Wordpress Guide Get Plugins Get Connected