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!