Slide 1

Slide 1 text

How to Get Started With JAMSTACK A guide by Idris Olubisi

Slide 2

Slide 2 text

ABOUT ME I’m a Software Engineer and a Technical Writer passionate about writing codes that solves human problem. You can find me on twitter @olanetsoft

Slide 3

Slide 3 text

3

Slide 4

Slide 4 text

What is JAMStack ? 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. JAMstack is a software architecture and philosophy that adheres to the following components: Javascript, APIs, and Markup as the name implies “JAM”. 4

Slide 5

Slide 5 text

Why JAMStack ? ➔ Security ➔ The Jamstack removes multiple moving parts and systems from the hosting infrastructure resulting in fewer servers and systems to harden against attack. ➔ Serving pages and assets as pre-generated files allows read-only hosting reducing attack vectors even further. 5

Slide 6

Slide 6 text

Why JAMStack ? ➔ Scale ➔ Popular architectures deal with heavy traffic loads by adding logic to cache popular views and resources. ➔ The Jamstack provides this by default. When sites can be served entirely from a CDN there is no complex logic or workflow to determine what assets can be cached. 6

Slide 7

Slide 7 text

Why JAMStack ? ➔ Performance ➔ Page loading speeds have an impact on user experience and conversion. Jamstack sites remove the need to generate page views on a server at request time by instead generating pages ahead of time during a build. 7

Slide 8

Slide 8 text

Why JAMStack ? ➔ ➔ Maintainability A pre-generated site, being served directly from a simple host or directly from a CDN does not need a team of experts to "keep the lights on". ➔ Portability Jamstack sites are pre-generated. That means that you can host them from a wide variety of hosting services and have greater ability to move them to your preferred host. Any simple static hosting solution should be able to serve a Jamstack site. 8

Slide 9

Slide 9 text

What makes up jamstack ? 9

Slide 10

Slide 10 text

10

Slide 11

Slide 11 text

11

Slide 12

Slide 12 text

OLD vs new architecture. 12

Slide 13

Slide 13 text

13

Slide 14

Slide 14 text

14

Slide 15

Slide 15 text

statIC SITE GENERATOR 15

Slide 16

Slide 16 text

HEADLESS CMS 16

Slide 17

Slide 17 text

SOME JAMSTACK SITES FreeCodeCamp Louis Vuitton Logger MTS Idris Olubisi Portfolio https://www.giftegwuenu.dev/ And many more... 17

Slide 18

Slide 18 text

RESOURCES TO LEARN · How to host and deploy a static website or JAMstack app to AWS S3 and CloudFront · A Step-by-Step Guide: Gatsby on Netlify from Netlify · Build your own Blog from Scratch using Eleventy from filament group · How to Host your Static Website with AWS - A Beginner's Guide from freeCodeCamp · Hugo Tutorial: How to Build & Host a (Very Fast) Static E-Commerce Site from SnipCart · How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify 18

Slide 19

Slide 19 text

THANK YOU 19