DevDojo
make websites fun again
make websites fun again

Static Websites

A Simple Static Site Generator

Installation

_

npm install -g @devdojo/static

static new folderName

Your new site will open up on localhost:3000
Intalled over
times per week.

This is Where the Fun Begins

Here are a handful of features to help you enjoy building static websites again.

TailwindCSS Integration

Add the {tailwindcss} shortcode to the head of your HTML file and you're ready to rock!

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

Page-based routing

Add a new file to your pages directory and Static will automatically create a route.

HTML Layouts

Create re-useable HTML layouts,

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{title}</title>
</head>
<body>
    {slot}
</body>
</html>

and use them with any number of pages.

<layout title="Title" src="main.html">

    <h1>Layouts Rock 🤘</h1>
    
</layout>

HTML Includes

Create re-usable HTML elements by utilizing the include tags, and use attributes to pass in data.

<header>
    <a href="/">
        <img src="{logo}" />
    </a>
    <nav>
        <a href="/">Link</a>
        <a href="/">Link</a>
        <a href="/">Link</a>
    </nav>
</header>

Create Content

Add a Markdown file to the content folder and it will automatically create a page.

Live Reloading

Update your code and see the results instantly with live-reloading.

How to use it?

After you you'll have three new commands that you can use in your command prompt.

🎸 It's as easy as 1 2 3, as simple as Do re mi...

  • 1.

    Static New

    The static new command will create a new site in the folder you specify.

    $ static new my-site New setup initialized Finished setting up new site Server running at http://localhost:3000 New site available inside my-site folder
  • 2.

    Static Dev

    The static dev command start a development server for the current project folder.

    $ static dev Server running at http://localhost:3000
  • 3.

    Static Build

    The static build command will build your site into a production ready masterpiece.

    $ static build Successfully built your new static website 🤘

Easily Host on GitHub Pages

Static comes with a GitHub action that allows you to automate your deployment process. Simply merge into the `main` branch and see your changes live in minutes!

Add the GitHub Action
Push Your Code
Watch It Build
Fixing Logo Position

main branch to pages: by mikejones

Adding New Blog Posts

content branch to pages: by johndoe

Updating Contact Page

main branch to pages: by johndoe

See Your Changes Live
📖

Learn More

Learn more about Static by checking out the official documentation. Thanks for visiting!