Our Black Friday sale is now live! All individual subscriptions are 50% OFF. This week only!

Back Button Tooling
Static Site Generators

Static Site Generators

A static site is often the ideal choice for certain types of projects. Common use cases might be portfolios, blogs, or documentation sites. They are easy to host, simple to implement, and incredibly fast. In this series, we’ll take a look at a handful of the most popular static site generators.

Intermediate
7 episodes
2h 42m
7
Latest Episode in This Series

Added 3 months ago

Testing Static Sites With Cypress

Let's take a few moments to review how to test a static site using Cypress....

Watch
Static Site Generators

Static Site Generators

A static site is often the ideal choice for certain types of projects. Common use cases might be portfolios, blogs, or documentation sites. They are easy to host, simple to implement, and incredibly fast. In this series, we’ll take a look at a handful of the most popular static site generators.

Begin
7
Latest Episode in This Series

Added 3 months ago

Testing Static Sites With Cypress

Let's take a few moments to review how to test a static site using Cypress. Because no...
Watch

Your Teacher | Andre Madarang

https://laracasts.s3.amazonaws.com/avatars/andre-madarang.jpg's avatar
Greetings! I'm Andre, a full-stack web developer and Laracasts instructor. My other hobbies include playing guitar, videography and gaming.
    1. Free Episode Run Time 18:45

      Jigsaw allows you to create static sites using Laravel's Blade templating engine. We'll take a look at creating pages, layouts, using markdown, and collections.

      View the source code for this episode on GitHub.

    2. Run Time 19:43

      Next, let's take a look at using Nuxt.js to build a static site. We'll review simple routing, layouts, and rendering markdown content using the Nuxt content module.

      View the source code for this episode on GitHub.

    3. Run Time 19:40

      Let's have a look at using VuePress to build a documentation site. You'll learn about a variety of features, including Markdown support, syntax highlighting, Vue components in Markdown, and more.

    4. Run Time 24:45

      Next up, we take a look at using Saber to build static sites in Vue. Saber is simple to use, with a wide array of built in features and minimal configuration. In this example, we build a simple blog site and make use of features like Markdown for posts and pages, syntax highlighting, Vue components in Markdown, progress loading bars, and building the site for production.

    5. Run Time 24:37

      Gridsome is a powerful static site generator in Vue that makes use of a GraphQL central store. We can source data using a variety of plugins or do it manually ourselves. In this episode, we take a look at the basics of Gridsome and build a basic blog implementation that makes use of local Markdown files.

    6. Since we ignored the styling component in the previous episodes, let's now take some time to style our static site with Tailwind CSS. We'll re-visit the Nuxt.js example and add a design based on the Gridsome Portfolio Starter.

      View the source code for this episode on GitHub.

    7. Let's take a few moments to review how to test a static site using Cypress. Because no database is involved, these tests should be fairly trivial to write.