Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Static Sites with Sculpin (php[tek] 2014)

Static Sites with Sculpin (php[tek] 2014)

Already have scaling and caching tools in place, but still concerned about your site's speed? Ever wish you could go back to the days of static sites where page loads were blazing fast but still have the benefits of a dynamic site? Sculpin, a static site generator written in PHP, is a powerful alternative to deploying a PHP website. It dynamically renders your site's content into static files that can be served directly by your webserver saving you execution time on every single page load! Learn more about static site generators in general, discover which types of websites they benefit the most, and learn how to start generating static sites with Sculpin today!

Beau Simensen

May 22, 2014
Tweet

More Decks by Beau Simensen

Other Decks in Programming

Transcript

  1. if you do not need a dynamic site then a

    static site may be for you
  2. PHP

  3. # mkdir -p source/_layouts # vi source/_layouts/default.html ! <html> <head><title>{{

    page.title }}</title></head> {% block content %}Fallback content{% endblock %} </html>
  4. # 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!
  5. 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.
  6. 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.
  7. // 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>
  8. // source/itunes.xml ! {% for episode in data.episodes %} <item>

    <title>Episode {{ episode.number }}: {{ e <itunes:author>Beau Simensen &amp; Dave M {% if episode.subtitle %} <itunes:subtitle>{{ episode.subtitle {% endif %} <itunes:explicit>{{ episode.explicit }}
  9. --- 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
  10. {% 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>
  11. <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" %}
  12. {% 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" %} !
  13. 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
  14. also uses some fun metadata and template tricks to get

    specific artwork on different pages
  15. {% 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
  16. --- title: All about metadata --- ! # This is

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

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

    a markdown file with YAML frontmatter {{ page.title }}
  19. 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:
  20. {% if page.full_title %} <title>{{ page.full_title|raw }}</title> {% else %}

    <title> {{ page.title }} &middot; {{ site.title }} &middit; {{ site.subtitle }} </title> {% endif %}
  21. --- layout: default title: All about metadata --- ! #

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

    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 %}
  23. --- layout: default title: All about metadata --- ! #

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

    This is a markdown file with YAML frontmatter ! ! <html> <head><title>{{ page.title }}</title></head> {% block content %}Fallback content{% endblock %} </html>
  25. --- layout: default title: All about metadata --- ! #

    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>