- A suitable computer with Sprinkles installed (see below).
- Your favorite text editor.
- A web browser.
Head over to the Download section and grab a copy of Sprinkles. Follow the included installation instructions.
Your First Project
- Create a directory for your project.
Inside that directory, create a file named
project.yml, and paste the following code into it:
Create a directory
datain your project directory, and inside that, a directory named
pages. Then create a file named
home.markdownin that directory, and paste the following code:
Create a directory
templatesin your project directory, and inside that, create a file named
page.html; paste the following code:
You should now have a directory structure like this:
+-- project.yml | +-- data | | | +-- pages | | | +-- home.markdown | +-- templates | +-- page.html
Open a terminal in the project directory, and issue the following command:
sprinkles -serve 5000
If all goes well, you’ll see a line saying something like:
2016-08-15 17:21:06.162955 UTC [Notice] Running server on port 5000
Point your web browser at http://localhost:5000. You should see a barebones HTML page titled “Home”, that says “Hello, world!”.
What Just Happened?
project.yml, you defined a route. A route defines a rule that tells Sprinkles:
- which URLs the rule applies to (
- which backend data to load (
- which template to apply (
Making Routes Dynamic
A route that always serves the same file isn’t very powerful. Here’s how to parametrize routes.
Add the following to the bottom of your
Now create another markdown file
Navigate to http://localhost:5000/example. Observe how it displays the text from
example.markdown, using the same template as before.
pattern: used in this second route contains a dynamic part, the bit between double curly braces. Inside, the asterisk (
*) means “match any one path element in its entirety”, and it is bound to the variable
This means that our route pattern will match anything that starts with
/, followed by exactly one path item and no slashes. It will, thus, match
/oh-no.jpg, but not
data: part, the
page value is injected into the data source specifier. So when a visitor requests
/home, the “home” part gets captured as
page, and inserting it into the data source string gives
Adding Static Assets
The HTML produced so far has been rather bland, so you will want to add CSS.
Create a file
Add a rule to the stylesheet for serving static files:
Navigate to http://localhost:5000/static/css/style.css, and verify that it serves the stylesheet.
Link to it from the HTML by adding a
<link>tag to the template. Add this to the
Check the site root again; the HTML should now look a little bit less bland.
patternfeatures a dynamic part with a double asterisk, which means “match multiple path elements”. The route will match
/static/foobar, but also
/static/foo/bar/baz.css, capturing all path elements after
- The line
static: truetells Sprinkles that this is a static route. A static route expects a data key named
file, and whatever comes out of that is served verbatim.
- Static routes do not have a