English
static-sinatra
A Sinatra application with RakeFile designed for multiple static HTML sites
This project came about after a client requested multiple versions of a static site. It was agreed that these sites should use the same front-end assets and the content should be able to be entered into files using the textile markup language. The source reflects this structure and includes a working navigation for 2 side by side dummy sites
Quick start
- Download the source
- copy the downloaded dir cimex-static-sinatra-xxxxx to wherever you normally develop projects
- in the terminal, cd to that dir and
ruby app.rb - in your browser, got to http://localhost:4567/ and you should see the intro page
Table of contents
- Developing and editing
- Template version
- Running the application
- Building the HTML templates
- Testing
- Exporting a stand alone version
- Modifying the CSS
- Coding conventions
- About the technology
Developing and editing
Application structure
+ helpers - small handy ruby tools
+ public - images, javascripts, css, flash
+ views
+ + layouts - aka default master-pages - wrap around "pages"
+ + pages - this is where the textile content lives
+ + partials - repeated Haml e.g footer
+ + sass - to convert to css
- app.rb - main application file
- Rakefile - contains our "build" and "export" tasks used by…
- preview.bat - our windows "preview" double-clicker
- build.bat - our windows "build" double-clicker
- export.bat - our windows "export" double-clicker
- README.txt - minimal explanation for the uninitiated
Dependencies
The following rubygems are 'required' in app.rb - you'll need these to run the application:
redcloth - to let ruby interpret textile
compass - our stylesheet authoring environment
sinatra - the codebase that the app runs off
haml - so we can use Haml and then textile
Note: If you've already got ruby and rubygems installed correctly it should just be a case of running the following commands:
sudo gem install redcloth
sudo gem install compass
sudo gem install sinatra
sudo gem install haml
Running the application
Mac OSX
ruby app.rb
Windows
Double click the preview.bat file
The browser is now "previewing" the application - the files don't actually exist yet.
Now you can see your local modifications at http://localhost:4567/index.html
Building the HTML templates
Mac OSX
Grab the files -rake build
Windows
click the build.bat file in the root directory
This will grab all the generated HTML code from your local server,
and write it to the static folder.
Exporting a stand alone version of the sites
Mac OSX
Grab the files -svn export --force public ../site_`date +%d%m%Y`svn export --force static ../site_`date +%d%m%Y`
Windows
click the export.bat file in the root directory
This will grab all the assets, and all the HTML, and copy it to a file called site_0000, one directory up from
the root
Testing
There is now a very simple test suite that uses Rspec, in the test directory
Add whatever strings you want to search for in the stringsToSearchFor array inside test/suite.rb, and run rake run_tests from that directory
A report will then be generated that you can open manually in your browser (results.html)
As you may realise, the static content has not been built yet in this repo, so you will need to cd to the root and run rake build before the tests will have anything to test.
Template version
You can now find the code snippets needed to construct most of the elements of the site at this location:
http://localhost:4567/templates/index.html
Modifying the CSS
The CSS has been written in a meta-language called Sass. You can go right ahead and edit the
Sass files inside views/sass/core.sass and these will appear at http://localhost:4567/.
Every time localhost is refreshed, a new generated CSS file is written to public/stylesheets/*.css
About the technology
Built using the ruby "micro-framework" Sinatra
Why not code the whole lot in HTML?
- We want to reuse code and seperate it into isolated components
- We want to use helpers so that we can make our lives easier regarding things like relative paths
- Content editors are less likely to break the code using Haml, textile, or markdown
Why not use Staticmatic?
- This project is a larger than usual static HTML system (there are likely to be several "themes"), and
the project has a longer lifespan, Sinatra is more suited to this as it is more configurable, and scalable. - Sinatra has good, comprehensive documentation, see:
- There are plenty of real world examples to learn from / Active community
- Sinatra is popular, less "bleeding edge" tool used and maintained by many developers
Technical differences to Staticmatic
- You need to set up your own routes
- The site (outputted html files) folder is created one directory up from the route
