Getting Started with Static

Getting Started

Static is a static site generator you're going to love. Here's the spiel:

Static is easy.
HTML is easy.
Yet, somehow we lost the art of crafting simple HTML websites

Static is going to help you rediscover your joy and excitement for building HTML websites.

Why Static

Most Static Site Generators (SSG's) are overkill and packed with unnecessary complexities. These complexities have frequently led to frustration, anger, and a strong desire to set fire to the office 🔥

This is where Static comes into play. Static is here to make things simple, bring you joy, and help you regain control over any desire to start fires.

Generating static websites can be simple and enjoyable again without the need for bloated frameworks and complicated configs. Check out a few of the key features below.

Key Features

Page-Based Routing

Static uses a simple page-based routing system where each route is mapped to a file inside of the pages directory. With a structure like this:

📁 pages ├── 📄 index.html ├── 📄 about.html ├── 📁 contact │ ├── 📄 index.html │ ├── 📁 form │ │ ├── 📄 index.html

Your new site will have the following routes available:

http://localhost:3000/ http://localhost:3000/about http://localhost:3000/contact http://localhost:3000/contact/form

Learn more about pages →

Layouts

Design layouts that multiple pages can utilize.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{title}</title>
</head>
<body>
    {slot}
</body>
</html>

Then, use it in any page.

<layout title="Radical Righteousness" src="main.html">

    <h1>🏄‍♂️ Totally Tubuloso Website</h1>

</layout>

Learn more about layouts →

Includes

Create re-usable HTML partials with the <include> tag. Specify the HTML file with the src attribute.

<layout title="Behind the Scenes!" src="main.html">

    <include src="about-header.html"></include>
    <include src="about-copy.html"></include>

</layout>

Learn more about includes →

Start your first site

Getting started with Static is super easy. The first thing that you'll want to do is install the Static CLI command globally. Make sure you have the pre-requisites installed, and then inside of your command line you can run:

npm install -g @devdojo/static

Now that you have the Static CLI command installed you can create a new static website by running:

static new folder-name

You can run this command from any directory and it will create a new website inside of the folder-name that you specified.

Boom 💥 That's it you're now ready to start building your next masterpeice.

Welcome to the Static Docs