Hello, and welcome to the course Jamstack the Complete Guide. My name is Daniel Kelley, and I'm just absolutely thrilled to be teaching you about the Jamstack. js. The application will include an easy-to-use interface for managing content.
Complete with live previews that way content creators can see how things will look in real time. While this feature may look complex, it'll actually be quick and easy to hook up since StoryBlock has done so much of the work for you. Best of all, it works effortlessly with Vue, the framework that we all know and love. Finally, we'll get automated deploys working so that whenever you push new code to GitHub, your site will automatically regenerate and go live to the world.
Before diving into the build itself though, let's take a quick step back and answer a quick question. That is, what is the Jamstack? Well, in the early days of the web, HTML files served from static servers were really the basis of most websites. Today, many websites are generated on demand by powerful backends, as the pages are requested.
The latter approach has led to many benefits, but has also led to issues with security, performance, complexity, and cost. Well, what if you could have the best of both worlds? Well, that's where Jamstack enters the picture. The Jamstack architecture is a good modern approach that capitalizes on the power of JavaScript, REST or GraphQL APIs, and good old HTML markup to keep sites lean yet still feature rich.
The idea is to generate page markup for the whole site at build time. instead of on each user request. Then, those generated static files can be hosted on CDNs with servers that are closest to the end user's actual location for a quick and speedy response. Now, there are a ton of static site generators out there that can generate this HTML for us, including Nuxt, but we'll explore those later on in another lesson.
Okay, it's also worth mentioning that this build or generation step can be set off at any time via a variety of triggers. For instance, it could be set off whenever you push new code to a Git repository on GitHub, GitLab, or whatever your favorite service is, or by sending a request to a webhook from a CMS. If you're following me so far, you may be thinking that this approach might seem a little bit limiting. After all, what if I want to show different content to a different user, depending on who they are?
where they are, or any other number of different factors. Well, obviously I can't customize the markup if it's not being generated at request time. Well, that's where JavaScript and APIs come in. For content that needs to be a bit more dynamic, we can make requests to any number of third-party microservices directly from the browser.
This opens up a huge variety of features for us, for things like authentication and authorization, comments, form handling, social media widgets, and so much more. Okay, so I know what you're thinking. This Jamstack approach seems pretty cool, and indeed it is. To recap, its benefits include better performance, since there's no server-side processing done at request time, and responses come from a CDN with geographically distributed servers.
Another benefit is higher security. since server-side processes are abstracted into microservice APIs. Therefore, the surface area for attacks are reduced. Plus, you're relying on the domain expertise of third-party specialists instead of more generally-scaled in-house devs.
Next, it's also cheaper and easier to scale. I mean, come on. What's more scalable than dumbing static files onto a CDN? There's also a better developer experience.
This is due to the loose coupling and separation of controls, which allows for more targeted development and debugging. Plus, the ever-growing number of headless CMS options out there mean that you can still get beautiful custom marketing sites without having to develop and maintain a custom CMS. Lastly, the Jamstack approach is generally considered to be a more environmentally friendly approach, since there's no compute power needed to assemble pages on each request. Lastly, I'd be doing you a disservice if I didn't briefly mention that just like any other technology, the Jamstack is no silver bullet.
It has its pros and its cons, so let's talk about those downsides briefly. One downside is that there is a short delay to viewing content updates made in your CMS, as the site must be rebuilt before it goes live. However, this becomes a lot less of an issue with the live previews provided with a tool like Storyblock. Another downside is that build time is directly coupled to the size of your site.
This is because on each build, every page must be regenerated from scratch. So the more pages you have, the longer the build will take. There are several approaches to deal with this, depending on the static site generator that you end up using. But to ease your mind, just know that Smashing Magazine, which is a developer and designer-oriented publication that has literally thousands of articles, successfully hosts their site on the Jamstack.
In fact, they wrote a whole article about how they migrated from WordPress to the Jamstack, and I've provided a link to it in the description below. Alright, if you're ready to dive into the Jamstack and build a super cool Nuxt and StoryBlock-powered site, then I invite you to join me for the rest of the course. Hello, and welcome to the course Jamstack the Complete Guide. My name is Daniel Kelley, and I'm just absolutely thrilled to be teaching you about the Jamstack.
js. The application will include an easy-to-use interface for managing content. Complete with live previews that way content creators can see how things will look in real time. While this feature may look complex, it'll actually be quick and easy to hook up since StoryBlock has done so much of the work for you.
Best of all, it works effortlessly with Vue, the framework that we all know and love. Finally, we'll get automated deploys working so that whenever you push new code to GitHub, your site will automatically regenerate and go live to the world. Before diving into the build itself though, let's take a quick step back and answer a quick question. That is, what is the Jamstack?
Well, in the early days of the web, HTML files served from static servers were really the basis of most websites. Today, many websites are generated on demand by powerful backends, as the pages are requested. The latter approach has led to many benefits, but has also led to issues with security, performance, complexity, and cost. Well, what if you could have the best of both worlds?
Well, that's where Jamstack enters the picture. The Jamstack architecture is a good modern approach that capitalizes on the power of JavaScript, REST or GraphQL APIs, and good old HTML markup to keep sites lean yet still feature rich. The idea is to generate page markup for the whole site at build time. instead of on each user request.
Then, those generated static files can be hosted on CDNs with servers that are closest to the end user's actual location for a quick and speedy response. Now, there are a ton of static site generators out there that can generate this HTML for us, including Nuxt, but we'll explore those later on in another lesson. Okay, it's also worth mentioning that this build or generation step can be set off at any time via a variety of triggers. For instance, it could be set off whenever you push new code to a Git repository on GitHub, GitLab, or whatever your favorite service is, or by sending a request to a webhook from a CMS.
If you're following me so far, you may be thinking that this approach might seem a little bit limiting. After all, what if I want to show different content to a different user, depending on who they are? where they are, or any other number of different factors. Well, obviously I can't customize the markup if it's not being generated at request time.
Well, that's where JavaScript and APIs come in. For content that needs to be a bit more dynamic, we can make requests to any number of third-party microservices directly from the browser. This opens up a huge variety of features for us, for things like authentication and authorization, comments, form handling, social media widgets, and so much more. Okay, so I know what you're thinking.
This Jamstack approach seems pretty cool, and indeed it is. To recap, its benefits include better performance, since there's no server-side processing done at request time, and responses come from a CDN with geographically distributed servers. Another benefit is higher security. since server-side processes are abstracted into microservice APIs.
Therefore, the surface area for attacks are reduced. Plus, you're relying on the domain expertise of third-party specialists instead of more generally-scaled in-house devs. Next, it's also cheaper and easier to scale. I mean, come on.
What's more scalable than dumbing static files onto a CDN? There's also a better developer experience. This is due to the loose coupling and separation of controls, which allows for more targeted development and debugging. Plus, the ever-growing number of headless CMS options out there mean that you can still get beautiful custom marketing sites without having to develop and maintain a custom CMS.
Lastly, the Jamstack approach is generally considered to be a more environmentally friendly approach, since there's no compute power needed to assemble pages on each request. Lastly, I'd be doing you a disservice if I didn't briefly mention that just like any other technology, the Jamstack is no silver bullet. It has its pros and its cons, so let's talk about those downsides briefly. One downside is that there is a short delay to viewing content updates made in your CMS, as the site must be rebuilt before it goes live.
However, this becomes a lot less of an issue with the live previews provided with a tool like Storyblock. Another downside is that build time is directly coupled to the size of your site. This is because on each build, every page must be regenerated from scratch. So the more pages you have, the longer the build will take.
There are several approaches to deal with this, depending on the static site generator that you end up using. But to ease your mind, just know that Smashing Magazine, which is a developer and designer-oriented publication that has literally thousands of articles, successfully hosts their site on the Jamstack. In fact, they wrote a whole article about how they migrated from WordPress to the Jamstack, and I've provided a link to it in the description below. Alright, if you're ready to dive into the Jamstack and build a super cool Nuxt and StoryBlock-powered site, then I invite you to join me for the rest of the course.