Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thedevdojo/static
⚡️ The ultimate static site generator. Tailor-made for killer blogs, sizzling SaaS landings, audacious personal sites, and every web fantasy you dare to dream up.
https://github.com/thedevdojo/static
generator html site ssg static website
Last synced: 3 months ago
JSON representation
⚡️ The ultimate static site generator. Tailor-made for killer blogs, sizzling SaaS landings, audacious personal sites, and every web fantasy you dare to dream up.
- Host: GitHub
- URL: https://github.com/thedevdojo/static
- Owner: thedevdojo
- License: mit
- Created: 2023-08-30T13:12:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-23T20:31:08.000Z (4 months ago)
- Last Synced: 2024-10-24T03:13:37.516Z (4 months ago)
- Topics: generator, html, site, ssg, static, website
- Language: JavaScript
- Homepage: https://static.devdojo.com
- Size: 554 KB
- Stars: 176
- Watchers: 4
- Forks: 13
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚡️ Static - The Pure Power of Simplicity.
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](https://static.devdojo.com/docs) 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.
```html
{title}
{slot}
```
Then, use it in any page.
```
🏄♂️ Totally Tubuloso Website
```
### 3. Includes
Create re-usable HTML partials with the `` tag. Specify the HTML file with the `src` attribute.
```
```
### 4. TailwindCSS Integration
Add the TailwindCSS **shortcode** to the `` of any layout and it will automatically be injected. Example:
```
{title}
{tailwindcss}
{slot}
```
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:
```
```
> Those are just a few of the hot features available, but there's [so much more to uncover and learn](https://static.devdojo.com/docs).
# Learn More
You can learn about all the features available in Static by visiting the [official documentation](https://static.devdojo.com/docs). You may also be interested in checking out some of the [templates here](https://static.devdojo.com/templates).
Static HTML is King 👑