@devdojo/static
Advanced tools
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:
No longer will this stand! Static is here to reclaim the throne of simplicity!
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:
_site directory)Next, head on over to the official documentation to learn more about building your site.
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
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>
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>
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.
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.
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 👑
FAQs
Static Site Generator
We found that @devdojo/static demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.
Research
/Security News
Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers