Static Sites with Sculpin (php[tek] 2014)

Sculpin Static Sites with ddd.io/phptek14-sculpin

Beau Simensen @beausimensen +BeauSimensen beau.io

Dragonfly Development @dflydev dflydev.com

What is a static site generator?

STATIC

not interpreted

every request served directly from the ﬁlesystem

plain ol' HTML ﬁles

JavaScript and CSS

images

JSON, XML, and other supporting ﬁles

static sites have some advantages

less restrictions on hosting environment

less moving pieces

can more easily absorb trafﬁc spikes

more security / less maintenance

DyNaMic

interpreted at runtime

most html is rendered at the time of every request

cache can be used to bypass rendering on every request

static site generators give you the best of both worlds

all of the advantages of static

and the power of dynamic

Should my next site be static?

Should my next site be static? Wrong Question

Does my next site need to be dynamic?

comments

Disqus

Google Forms

search

lunr.js

JavaScript!!!1!

if you do not need a dynamic site then a
static site may be for you

Sculpin?

my baby

extensible

embedded composer

SALES PITCH <still working on this part>

What can Sculpin do?

"Can Sculpin do [anything]?"

No, not directly... <99% of the time>

"How can I do [anything]?"

Templates!!!1! <99% of the time>

over twenty the number of sculpin sites i've published

beau.io dﬂydev.com sculpin.io srcmvn.com reﬂxlabsinc.com beausimensen.com stackphp.com thatpodcast.io

zero the number of sculpin speciﬁc extensions i've written

one the number of extensions i've used (i don't use
it anymore)

So what would you say Sculpin does here?

to be honest, not much (remember what I said earlier
about my sales pitch?)

it reads metadata from sources typically sources are just plain
ﬁles on disk

and site-wide metadata this is maintained in a global conﬁguration
ﬁle, sculpin_site.yml

does hand-wavy stuff with permalinks don't ask...

injects everything into a Twig environment

and writes rendered output to disk

That's it. ok, there is a little more to it
than that...

you can think of Sculpin as a playground for Twig

So how do I use Sculpin?

https://sculpin.io/getstarted/ @emmajanehw

or jut start small!

# mkdir -p source/_layouts # vi source/_layouts/default.html ! <html> <head><title>{{
page.title }}</title></head> {% block content %}Fallback content{% endblock %} </html>

# mkdir -p source # vi source/index.md ! --- layout:
default title: My first Sculpin source --- ! # Hello World! ! Yay! You did it. You created your first [Sculpin](https://sculpin.io) page!

sculpin generate --watch --server

Detected new or updated files Generating: 100% (120 sources /
0.01 seconds) Converting: 100% (120 sources / 0.32 seconds) Formatting: 100% (120 sources / 0.05 seconds) ! ... ! Processing completed in 0.81 seconds Starting Sculpin server for the dev environment with debug true Development server is running at http://localhost:8000 Quit the server with CONTROL-C.

Where can I see how to do [anything]?

Sculpin docs suck. :(

people are trying to help make them better @emmajanehw

learn by example

http://thatpodcast.io

// source/itunes.xml ! --- use: ["episodes"] permalink: itunes.rss --- <?xml
version="1.0" encoding="utf-8"?> <rss xmlns:itunes="http://www.itunes.com/dtds/ <channel> <atom:link href="{{ site.url }}{{ page.url } <title>That Podcast</title> <link>http://thatpodcast.io</link>

// source/itunes.xml ! {% for episode in data.episodes %} <item>
<title>Episode {{ episode.number }}: {{ e <itunes:author>Beau Simensen & Dave M {% if episode.subtitle %} <itunes:subtitle>{{ episode.subtitle {% endif %} <itunes:explicit>{{ episode.explicit }}

https://github.com/thatpodcast/ thatpodcast.io/

search

http://blog.andrewshell.org/ @andrewshell

lunr.js with custom Twig extension @andrewshell

// source/search.txt ! --- use: ["posts"] permalink: search.json --- {{
lunr(data.posts) | raw }} @andrewshell

https://github.com/andrewshell/ blog.andrewshell.org @andrewshell

https://beau.io/talks/

leverages custom content types and does fun stuff with sorting

--- title: Static Sites with Sculpin location: "php[tek] 2014" slides:
https://speakerdeck.com/simensen/s slides_embed: <script async class="speaker cover: assets/images/talks/2014-05-22-scul logo: assets/images/talks/tek2014-logo.png logo_link: http://tek.phparch.com/speakers joinedin: https://joind.in/talk/view/10658 tags: - conference

{% extends "base" %} {% block content %} <section id="talk"
class="talk"> <header> <div class="container"> <div class="header-container"> <h1>{{ page.title }}</h1> <p>{{ page.location }}</p> </div> </div> </header> {% if page.slides_embed %} <div class="container slides-player"> <div class="row"> <div class="col-md-8 col-md-offset-2"> {{ page.slides_embed|raw}} </div> </div>

<section id="talks"> {% set now = "now"|date_modify("-2 day")|date("U") %} !
{% set found = false %} {% for talk in data.talks|reverse if talk.date >= now %} {% if loop.first %} <header> <div class="container"> <div class="header-container"> <h1>Upcoming Talks</h1> <p>Where I will be speaking in the future. </div> </div> </header> <div class="container"> {% set found = true %} {% endif %} {% include "talks_listing_item" %}

{% set found = false %} {% for talk in
data.talks if talk.date < now %} {% if loop.first %} <header> <div class="container"> <div class="header-container"> <h1>Past Talks</h1> <p>Where I have spoken in the past. </div> </div> </header> <div class="container"> {% set found = true %} {% endif %} {% include "talks_listing_item" %} !

https://github.com/simensen/ beau.io/

authors

http://dev-human.com/ @erikaheidi

leverages site metadata to build and maintain author data @erikaheidi

authors: erikaheidi: name: Erika Heidi url: http://erikaheidi.com avatar: https://pbs.twimg.com/profile_images/45104284520638 twitter:
http://twitter.com/erikaheidi googleplus: https://plus.google.com/102734777555057691872 bio: independent web developer && open source enthusiast. s cordoval: name: Luis Cordova url: http://pilotci.com avatar: https://pbs.twimg.com/profile_images/45432988585964 @erikaheidi

https://github.com/dev-human/ dev-human/ @erikaheidi

projects

http://dﬂydev.com/

ﬁrst Sculpin site to leverage custom content types

also uses some fun metadata and template tricks to get
speciﬁc artwork on different pages

https://github.com/dﬂydev/ dﬂydev.com/

external services

http://cooklufa.seancoates.com/ @coates

Twig extension to enable embedding Flickr images @coates

{% if page.bg %} <style> body:after { content : "";
display: block; position: fixed; top: 0; left: 0; background: url('{{flickr_url(page.bg, "Large")}}'); background-repeat: no-repeat; background-position: center center; ... @coates

{{ﬂickr_img('https://www.ﬂickr.com/ photos/scoates/14130067715')}} @coates

https://github.com/scoates/ cooklufa/ @coates

team directory

http://reﬂxlabsinc.com/

leverages custom content types

https://github.com/reﬂxlabs/ reﬂxlabsinc.com/

[this page intentionally left blank]

Not every site needs to be dynamic

Not every site should be static

Sculpin is a great choice if you like PHP and
Twig

Don't expect Sculpin to do anything for you and you'll
get along just ﬁne

If you love Twig or want to learn it, you'll
love Sculpin

Get involved in the community!! ! #sculpin

Questions? @beausimensen +BeauSimensen joind.in/10658 ddd.io/phptek14-sculpin

[this page intentionally left blank]

Sculpin metadata.

page.[something]

--- title: All about metadata --- ! # This is
a markdown file with YAML frontmatter

--- title: All about metadata --- ! # This is
a markdown file with YAML frontmatter {{ page.title }}

site.[something]

from app/conﬁg/sculpin_site.yml

title: Dragonfly Development, Inc. (dflydev) google_analytics_tracking_name: dflydev.com google_analytics_tracking_id: setme assets_version:
6 default_artwork: ninjagrl-seattle artists: ninjagrl: name: ninjagrl url: http://ninjagrl.com tonytaj: name: Tony Taj url: http://tonytaj.com johnosgood: name: John Osgood url: http://johnosgood.com artworks: johnosgood-sitka-pt3:

{% if page.full_title %} <title>{{ page.full_title|raw }}</title> {% else %}
<title> {{ page.title }} · {{ site.title }} &middit; {{ site.subtitle }} </title> {% endif %}

Sculpin layouts and Twig inheritance.

--- layout: default title: All about metadata --- ! #
This is a markdown file with YAML frontmatter

This is a markdown file with YAML frontmatter ! ! // Sculpin transforms this source file into something that // looks more like this... ! ! {% extends "default" %} {% block content %} ! # This is a markdown file with YAML frontmatter {% endblock %}

This is a markdown file with YAML frontmatter

This is a markdown file with YAML frontmatter ! ! <html> <head><title>{{ page.title }}</title></head> {% block content %}Fallback content{% endblock %} </html>

This is a markdown file with YAML frontmatter ! ! <html> <head><title>{{ page.title }}</title></head> {% block content %}Fallback content{% endblock %} </html> ! ! <html> <head><title>All about metadata</title></head> <h1>This is a markdown file with YALM frontmatter</h1> </html>

"Pretty" permalink strategy.

source/index.md! becomes output_dev/index.html

source/about.md! becomes output_dev/about/index.html

source/faq.html! becomes output_dev/faq/index.html

Static Sites with Sculpin (php[tek] 2014)

Static Sites with Sculpin (php[tek] 2014)

More Decks by Beau Simensen

Other Decks in Programming

Featured

Transcript