Fork me on GitHub

Proton

Proton is the cleanest way to create static sites for any occassion.

Proton solves the common problems plaguing
creating sites. Here's how:

Adios, copy-paste.
Hello, dynamic layouts.



  • ./
  • _layouts/
  • default.html
  • index.html
  • about_us.html

Imagine your HTML project looked like this.

_layouts/default.html

<html>
  <head>
    <title>
      <%= meta.title %>
    </title>
  </head>
  <body>

    <%= yield %>

  </body>
</html>

Step 1: Define a layout

Create a layout in _layouts/default.html.

index.html

title: Hello world!
---

<h1>Welcome!</h1>


<p>This is my page.</p>

Step 2: Create a page

Now your files will all use it.

When updating an entire site's footer, you just have to edit one file instead of 200.

Never repeat yourself again by creating layouts. Just create a layout page, and use the tag <%= yield %> to mark where the content should go.



_output/index.html

<html>
  <head>
    <title>Hello world!</title>
  </head>
  <body>
    <div id='container'>

        <h1>Welcome!</h1>


        <p>This is my page.</p>

    </div>
  </body>
</html>

Proton will automatically put them together for you!

Notice how the layout’s <%= meta.title %> tag pulled what’s in the title: Hello world! line. You can define metadata in your files.

How it works:


  • _layouts
  • about_us.html
  • index.html
  • contact_us.html
proton build
  • _output

LOL


Clean, no fuzz

There is nothing to install in your server. Just install Proton in your local machine. It generates normal HTML/CSS files that will work anywhere.

Packed up and good to go!

Once you have your output folder, simply upload it to a server, send it to your client, whatever—it’s ready to work.

Code in any language, not just HTML...

  • ./
  • foo.textile
  • index.haml
  • style.scss
  • background.png

Imagine your HTML project looked like this.

foo.textile

h1(hello). Hello from Proton
via textile!

Lorem *ipsum* dolor sit amet, 
consecteteur...

Textile/Markdown support

Write articles in simple shorthand with Textile or Markdown. This will be magically converted to HTML.

index.haml

%div.article
  %h1
    Hello from Proton via HAML!
  %p
    Lorem ipsum dolor sit
    amet, consecteteur...

Supervalid HTML via HAML

Write your HTML in terse, error-resistant HAML. HAML lets you generate HTML files from a simpler syntax.

css/style.scss

$red: #833;

.article {
  h1 { color: $red; }
  p  { line-height: 1.5; }
}

Painless CSS

You can use variables, nested rules, mixins, and other conveniences in your CSS files! Powered by Sass CSS.


↓ Build it

...and Proton will build it for you.

$ proton build



  • ./
  • _output/
  • foo.html
  • index.html
  • style.css
  • background.png
  • foo.textile
  • index.haml
  • style.scss
  • background.png

After typing proton build, Proton will create the output folder for you. Anything that’s not supported is simply copied over.

_output/foo.html

<div class='article'>
  <h1>Hello from Proton via Textile!</h1>
  <p>Lorem <em>ipsum</em> dolor sit amet, consecteteur...</p>
</div>

Proton automatically guesses file extensions. Textile files, for instance, become .html files…

_output/style.css

.article h1 {
  color: #833; }

.article p {
  line-height: 1.5; }

…and SCSS files become .css. You may specify your own extensions if need be.

Proton works by taking a folder with files in any template format (Markdown, HAML, etc), and magically creating the output files (HTML, CSS, etc) for you.

Proton takes this folder of files and crunches them.


Why this is awesome:

Write articles in lightweight markup.

You may write your pages with the simple markup styles of Markdown, and let Proton take care of converting it to HTML for you. It will even apply layouts to it.

  • Textile
  • Markdown
 → HTML

Build templates with templating languages.

You can take advantage of the beautiful syntax of HAML in your sites.

  • HAML
  • Liquid
  • Radius
  • ERB
 → HTML

Supercharge your CSS.

Ever wanted to have nested CSS rules? Variables? Mixins? Now you can do these with static sites.

  • Sass
  • SCSS
  • Less
 → CSS

And finally...

Write in plain HTML if you so wish.

Yes, all these benefits are optional!

These are 2 ways Proton can help you.
There are more.



Partials

Lorem upsum dolor sit amet socentoteur adipicising elit. Sed do eiusmod tem por incidudunt nma posture magna aliqua.

Extensions

Lorem upsum dolor sit amet socentoteur adipicising elit. Sed do eiusmod tem por incidudunt nma posture magna aliqua.

Helpers

Lorem upsum dolor sit amet socentoteur adipicising elit. Sed do eiusmod tem por incidudunt nma posture magna aliqua.

World peace

Lorem upsum dolor sit amet socentoteur adipicising elit. Sed do eiusmod tem por incidudunt nma posture magna aliqua.

Partials

index.erb

<%= partial :'post_author', 
    name: "Christian Troy" %>

Snippets getting repetitive? You may put stuff into “partials” that you can use without repeating the code.

+

_layouts/post_author.erb

<p class='colophon'>
  This is post was written
  by <%= post_author %>.
</p>

Simply define partials here.

→

_output/index.html

<p class='colophon'>
  This is post was written
  by Christian Troy.
</p>

Helpers

_extensions/helpers/helpers.rb

 module Proton::Helpers
   def date_format(date)
     date.strftime('%Y/%m/%d')
   end
 end
Proton supports extensions where you can add arbitrary functionality to your site. You may define helpers by adding an extension to your site.
+

index.erb

<footer>
  Generated on <%= date_format(Time.now) %>.
</footer>
→

_output/index.html

<footer>
  Generated on 2006/04/12.
</footer>

Installation

$ gem install proton $ proton

Also, read the manual.

Proton manual →