Static apps intro

Building up to the static-generator app

Throughout this semester we’ve been building your coding skills, adding a new language or tool each week. For each of the three core technologies, HTML, CSS and JavaScript, we’ve enhanced the base language with tools or systems to make them more efficient to use.

When you built your Bootstrap practice project, you had to completely finish one page before you copied it to create your second page, which means you had lots of duplicate code. If you needed to change something in the Jumbotron, you had to change it on every page. Imagine if your site had hundreds of pages. That’s too labor intensive in the age of computers. With this lesson we’ll introduce a system that allows you to create a template framework that can be used to generate a number of pages with minimal extra effort.

Static-Site Generators are an approach to web development that allow you to build a powerful, server-based website locally on your computer, but then compile the pages into a single directory that can be published to a web server without the need of a live database.

There are many tools to build static sites using a myriad of programming languages. Some of them have support for themes and other significant customization. Many are built to serve as blogs, but usually they can be coerced into other purposes.

For our class, I have provided you a project framework in a repo that uses Node.js and Nunjucks to create a static-app environment.

Nunjucks

For this lesson, we’ll introduce the JavaScript template language Nunjucks and a couple of other tools. We’ll take the “Pirate Cove” Bootstrap project that you built previously, and “refactor” it so you can build similar projects with more pages much faster.