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="/?originalUrl=https%3A%2F%2Fstatic.devdojo.com%2F%26quot%3Bmain.html%26quot%3B%26gt%3B%2520%2520%2520%2520%26lt%3Bh1%26gt%3BLayouts%2520Rock%2520%26%23x1F918%3B%26lt%3B%2Fh1%26gt%3B%2520%2520%2520%2520%26lt%3B%2Flayout%26gt%3B%253C%2Fcode">

HTML Includes

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

<header>
    <a href="/?originalUrl=https%3A%2F%2Fstatic.devdojo.com%2F%26%23x22%3B%2F%26%23x22%3B%26%23x3E%3B%2520%2520%2520%2520%2520%2520%2520%2520%26%23x3C%3Bimg%2520src%3D%26%23x22%3B%7Blogo%7D%26%23x22%3B%2520%2F%26%23x3E%3B%2520%2520%2520%2520%26%23x3C%3B%2Fa%26%23x3E%3B%2520%2520%2520%2520%26%23x3C%3Bnav%26%23x3E%3B%2520%2520%2520%2520%2520%2520%2520%2520%26%23x3C%3Ba%2520href%3D%26%23x22%3B%2F%26%23x22%3B%26%23x3E%3BLink%26%23x3C%3B%2Fa%26%23x3E%3B%2520%2520%2520%2520%2520%2520%2520%2520%26%23x3C%3Ba%2520href%3D%26%23x22%3B%2F%26%23x22%3B%26%23x3E%3BLink%26%23x3C%3B%2Fa%26%23x3E%3B%2520%2520%2520%2520%2520%2520%2520%2520%26%23x3C%3Ba%2520href%3D%26%23x22%3B%2F%26%23x22%3B%26%23x3E%3BLink%26%23x3C%3B%2Fa%26%23x3E%3B%2520%2520%2520%2520%26%23x3C%3B%2Fnav%26%23x3E%3B%26%23x3C%3B%2Fheader%26%23x3E%3B%253C%2Fcode">

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!