Alex Lugo presents:
WebStatic is a free JavaScript front-end framework designed to streamline static web design.
With WebStatic you can compile modular HTML components into your webpages. It interfaces directly with standard web languages so you can use it without learning any new syntax. When you build a project WebStatic automatically creates a web directory structure based on routing and file dependencies. Component source is then scoped and inserted into their references in each of your HTML pages. These two processes let you work with components and define static URL routing without a learning curve.
The WebStatic framework runs on Node and does not require any config files or meta data. Simply initialize the project directory with a single command and start coding! WebStatic takes care of all the heavy lifting when you build a project so you can focus on your site's design and content.
There's an easy way to install WebStatic and there's a harder way for masochists. If you choose the easy way, simply type npm install -g web-static in the command line and let npm do the rest of the work.
If you're one of those aforementioned masochists then download the source from GitHub and copy it into your global Node packages directory. Remember to copy the static.js script into whatever bin folder is present in your npm installation's PATH variable. Also don't forget to install all of WebStatic's dependencies. I would not recommend being a masochist.
With WebStatic it's easy to start a new project. Simply cd into your soon-to-be project directory and run static init. You should now find all the folders you need present in your project directory. They will all be empty except for the pages folder with its index.html file.
You can then start coding .css files in the styles folder, .js files in scripts and .html files in pages and components. Run static build from your project directory when you've finished writing or updating your code and call static open to view it in your default browser. If you prefer to alternate between coding and testing, use static auto and WebStatic will automatically rebuild your project every 3 seconds when it detects a change in your project.
WebStatic v1 comes with two features: components and routing. Components essentially allow you to write object-oriented HTML. You can write secondary html files complete with their own scripting and stylesheet properties and then insert them into one or more full-fledged pages within your project. Scripts and styles are automatically scoped to a particular component before insertion, so you don't have to worry about any scope leakage. That way you can create and reuse custom HTML structures throughout your site. Currently WebStatic only supports static components, but v2 will include component parameters and dynamic component creation via a jQuery extension.
The WebStatic framework also makes routing easy. Your pages folder will contain every complete web page in your project. You get to control which page maps to what url purely by its filename. For example, say you have index.html and foo.html in your pages folder. You can access foo.html in your browser by adding a link in index.html and setting its href to foo. When you build a WebStatic project, your files get reorganized as a web server directory. This is what allows the framework to implement such an elegant, config-less routing feature.
WebStatic comes with an easy-to-use command line interface. Simply type static to access the tool followed by whatever command you'd like to run:
These tools alone will allow you to create fully-realized static web sites.
