A simple website framework.

This is a lightweight, opinionated framework for developers who want simplicity, speed, and ease in creating, maintaining, and deploying static websites.

How do I get started?

Download the sssg binary from here.

This is the only dependency. You'll need the right version for your platform (Windows, Mac, Linux, etc).

Run sssg --init.

This will create the directory structure in the current directory.

Run sssg --dev to start the dev server.

Start the dev server. The output will tell you which port the dev server is running on. Make changes, save, and your page will automatically reload in the browser.

Modify your content.

Your content lives in the ./src directory. Make and save changes and they will be reflected in the browser.

Run:

sssg --register --domain <domain>

or

sssg --register --domain <subdomain.sssg.dev>

If you have your own domain you can specify it here. Otherwise, you can choose a sub-domain on sssg.dev to get started. As long as someone else hasn't chosen that sub-domain, you can use it. When you register a domain you will also get a "staging" sub-domain on sssg.dev. You can deploy to staging without affecting your production site.

Run:
sssg --deploy --staging
or
sssg --deploy --production.

This will build your site, zip it up, and deploy it to our servers (staging or production). You can access both of your sites via HTTPS.

If you want to deploy to your own server you can do that manually. Run sssg --build and then deploy the contents of ./dist to your server.

Why would you make this?!

I was tired of overly complicated and unnecessarily powerful static site generators and web hosts that do way more than I need so I made my own.

Why would I use this?

No dependencies.
No configuration.

Get started quickly.

Create your content in HTML or markdown.

Re-use custom layouts.

Re-use HTML snippets.

Lightning fast hot reload during development.

Beautiful styling via OpenProps + Normalize.

Simple javascript sprinkles via VanJS or AlpineJS.

Deploy easily to our server or manually to your own.

Where does my content go?

Your content goes in the ./src directory.

./dist

This is where your site is built. This is where the dev server serves content from. You should deploy from here. You shouldn't edit anything in this directory.

./src/assets

This directory is copied straight across to the ./dist directory during build. This is where you put images, custom javascript, and custom css. You refer to these assets like so in your pages: /assets/images/logo.png.

./src/layouts

This is where you can create your own layouts. Be sure to include <slot></slot> where you want your content placed in the layout.

To use a custom layout on a given page, wrap the page content in a tag that matches the name of the layout file you want to use. For instance, If you wanted to use the "Default" layout you would wrap your page content in <Default></Default>.

<Default>
  <!-- The rest of your content goes here. -->
</Default>

./src/pages

This directory is where your content pages live. It supports subdirectories.

  my-site
  ├── dist
  └── src
      ├── assets
      │   ├── css
      │   │   ├── pico.colors.min.css
      │   │   ├── pico.min.css
      │   │   └── styles.css
      │   ├── images
      │   │   └── logo.png
      │   └── js
      │       └── app.js
      ├── layouts
      │   ├── default.html
      │   └── blog.html
      ├── pages
      │   ├── about.html
      │   ├── index.html
      │   └── markdown.md
      └── snippets
          └── Test.html

./src/snippets

This directory is where your reusable snippets of HTML go. Subdirectories are supported. Name each snippet uniquely within the project. If you name the file MySnippet.html then you can include that snippet in your HTML using <MySnippet></MySnippet>.