Giter VIP home page Giter VIP logo

smoosh's Introduction

๐Ÿ”จ Smoosh.sh

Smoosh is a stand-alone Bash script aimed at generating full-featured, routable static websites from reusable HTML snippets. This script is heavily based off Statix. Here are the high-level features:

Feature How?
Work with bash, with only pandoc as a dependency if you use md files ./smoosh.sh
Reuse HTML snippets anywhere in your HTML code {{#include:path/to/snippet.html}}
Generate HTML from a CSV file and an HTML snippet {{#data:mywork.csv#template:card.html}}
define page specific variables {{#set:title=Hi there ๐Ÿ‘‹}}
use defined variables anywhere you want {{title}}
render markdown anywhere (You will need pandoc installed.) {{#markdown:README.md}}
Define site-wide variables like base-name, base-url, etc. Edit the file _data.conf
Define routes, like about.html -> /about/. Edit the file _routes.conf
TODO:Generate sitemap.xml Automatic

Data files and folders

  • routes.conf: a file that maps each publicly accessible template to a SEO-friendly URL
  • data.conf: a file that contains global data for your website (base url, author, support email, etc)
  • source/: a folder containind all the template files that will be processed.
  • source/static: a folder for assets that are copied over without processing.
  • output/: a directory with optional files copied to the output website directory with no processing.

This script is also lightweight. Aside from some standard file management commands such as cp, mkdir and rm, the only serious dependency for Statix is GNU Grep compiled with PCRE support (i.e. the version that supports -P flag, included in most Linux distributions).

This script is based off Statix - the simplest static website generator in Bash

Templates

In Statix, a template is a simple HTML file (or its partial) where also several special directives are allowed:

  • Include block ({{#include:_include/_footer.html}}) is a block that allows including another template to reuse existing HTML code.
  • Set block ({{#set:variable=some new value}}) is a block that allows setting a variable to the specific string value.
  • Use block ({{variable}}) is a block that inserts a previously set variable value.

Note that if a variable is set twice, the first set block occurence overrides any others. So if you want to set some page-specific variables and want to be sure they will not be overwritten by any included templates, please put the appropriate set blocks at the very top of the page.

Inline bash

Markdown support

Site configuration

Route configuration

To let Statix know the entire structure of your website, it's mandatory to specify all routing in a separate file (say, routes.conf). This file contains the mapping of a physical template name (relative to your templates directory) and logical URL (relative to the supposed website root). Note that in order to avoid any building errors all URLs must end in / (forward slash). Physical names and URLs are separated with a colon (:). Each mapping pair is on a new line.

Example of a typical routes.conf file:

index.html:/
about.html:/about-us/
contact.html:/contact/
work.html:/portfolio/

Build process

Just run the command in the base directory (where source/ and output/ are):

./smoosh.sh

Everything but asset directory is mandatory here. If <asset directory> is not specified, output will contain just the generated HTML tree and nothing else will be copied. If <output directory> doesn't exist, it will be created, but if it does and is not empty, it will be completely overwritten, so be careful! After the build completes, you can transfer the output directory contents wherever you want to host it.

smoosh's People

Contributors

lobau avatar michaelthatsit avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.