Static Site Generation (SSG) Lab Write-Up

Introduction

Static Site Generation (SSG) is a method used in web development to generate static HTML pages from templates. Instead of rendering web pages on each request, SSG pre-creates all pages at build time. This leads to faster load times and faster performance.

Template Engines

Template eengines are the core of SSG allowing developers to define structures for content and easily reuse these structures across different pages. After reading about several template engines, here are the three that I explored:

1. Nunjucks

• Pros:

  • Simple syntax and very similar to Jinja2 (Python's popular template engine).
  • Allows for reusable components (includes, macros).
  • It’s well-supported by 11ty.

• Cons:

  • JavaScript-heavy, may require some learning if you're unfamiliar with JavaScript (like myself).
  • Limited documentation compared to other more mainstream engines.

2. Liquid

• Pros:

  • Widely used, especially in Shopify, so it has a large user base.
  • Simple syntax that’s very beginner-friendly.
  • Supports easy data manipulation and loops.

• Cons:

  • Less powerful than some other engines in terms of logic handling.
  • Can become verbose if the project has complex logic requirements.

3. Pug (formerly Jade)

• Pros:

  • Minimal syntax, reduces the need for closing tags and braces.
  • Clean, readable template code.
  • Well-suited for smaller, more compact projects.

• Cons:

  • Harder to learn initially due to the unconventional syntax.
  • Not ideal for large-scale applications with complex templates.

For my assignment, I chose Nunjucks. The reason behind this decision is its simplicity and flexibility. While Liquid is very beginner friendly too, Nunjucks provides more power and customizability from what i've seen which I found necessary as I wanted to include dynamic content in some areas. Also 11ty's strong integration with Nunjucks means less hassle during setup.

Other SSG Applications

Besides 11ty, there are several other popular Static Site Generators:

1. Gatsby

• Pros:

  • React-based, great for those familiar with React.
  • Vast ecosystem of plugins, which makes integration with various tools and services easy.
  • Great support for GraphQL.

• Cons:

  • Complex build process, can become slow with larger sites.
  • Higher learning curve for those unfamiliar with React or GraphQL.

2. Hugo

• Pros:

  • Extremely fast build times, even with large sites.
  • Minimal setup required, with a strong out-of-the-box experience.

• Cons:

  • The template engine (Go-based) can be confusing for beginners.
  • Not as customizable as other SSGs, particularly if you need more complex features.

3. Jekyll

• Pros:

  • Deep integration with GitHub Pages, making it ideal for deploying simple blogs.
  • Mature ecosystem and large community support.

• Cons:

  • Ruby-based, which may not be ideal for developers unfamiliar with Ruby.
  • Slow build times for larger projects.

Each of these platforms has its strengths but 11ty's flexibility with template engines and its simple setup made it a better choice for this project Gatsby’s reliance on React felt too complex for a simpler static site as well as my knowledge levels while Hugo’s templating system felt limited.

11ty Configuration Settings

After reviewing the 11ty documentation I found configuration options. In this assignment, we are using the following:

• Template Formats:
  We are using .md (Markdown) and .html for templating. This simplifies content creation and is ideal for both structured and unstructured content.

• Passthrough File Copy:
  This setting ensures that static assets (like images or stylesheets) are copied over without being processed. It’s useful for handling non-dynamic resources.

Other settings that might be useful to explore:

• BrowserSync Configuration: Useful for live-reloading when developing. This can help with quicker iteration times during development.
• Input/Output Directory Configuration: This allows us to customize the folder structure, which could be important for larger projects with specific organizational needs.

Front Matter

Front matter refers to metadata that is embedded at the top of a file in SSGs, formatted in YAML or JSON. It provides information like the title, date, and tags for a page. In the context of SSG, front matter is critical as it provides a way for developers to define variables and content metadata that can be used by the template engine to render the page dynamically. This approach allows for creating custom page templates, such as blog posts or project pages, where each page has a unique front matter section but shares a common template layout.

Conclusion

Static Site Generation provides an efficient way to create fast, optimized websites. By exploring different template engines and SSG tools like 11ty, I gained insight into how SSG helps optimize workflows and content organization. Through this lab, I’ve learned how to configure 11ty and make use of its flexible template engines and settings, making it a powerful tool for static site creation.