barebones sinatra app with support for HTML generation
JavaScript Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_deploy
helpers
public
test
views
README.md
README.txt
Rakefile
app.rb
build.bat
export.bat
preview.bat

README.md

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

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

Rubygems

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