Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@devdojo/static

Package Overview
Dependencies
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@devdojo/static

Static Site Generator

Source
npmnpm
Version
1.0.31
Version published
Weekly downloads
13
62.5%
Maintainers
1
Weekly downloads
 
Created
Source

⚡️ Static - The Pure Power of Simplicity.

github cover

A static site generator you're going to love. No more complicated configs, bloated frameworks, or feeling like you got kicked in the face by a horse! Here's the spiel:

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

No longer will this stand! Static is here to reclaim the throne of simplicity!

🛠️ Setup in a Snap

Make sure you have Node installed on your machine, and then copy/paste the following command in your terminal:

npm install -g @devdojo/static

Now you'll have the static command available on your machine, allowing you to run the following:

  • static new folder-name - Create a new website with the static starter template
  • static dev - Start up a dev environment of your static website
  • static build - Build a production ready version of your website (available in the _site directory)

Next, head on over to the official documentation to learn more about building your site.

🖐️ Five reasons this might just be your jam!

1. Page-based Routing

Each file within the pages directory corresponds to a route on your website. 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

2. 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>

3. 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>

4. TailwindCSS Integration

Add the TailwindCSS shortcode to the <head> of any layout and it will automatically be injected. Example:

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

It will be replaced with the Tailwind CDN link in dev, and a minified CSS file will be compiled during build.

5. Collections

Add collections of data to your application. Here's an example collection located at collections/menu.json

[
    {
        "title" : "Home",
        "link" : "/"
    },
    {
        "title" : "About",
        "link" : "/about"
    }
]

Now, you can easily loop through this collection:

<ForEach collection="menu">
    <li>{menu.title}</h1>
</ForEach>

Those are just a few of the hot features available, but there's so much more to uncover and learn.

Learn More

You can learn about all the features available in Static by visiting the official documentation. You may also be interested in checking out some of the templates here.

Static HTML is King 👑

Keywords

static
site
generator

FAQs

Package last updated on 27 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

Research

Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique

A malicious package uses a QR code as steganography in an innovative technique.

By Olivia Brown  -  Sep 22, 2025