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

Static Sites with Sculpin (ZendCon 2014)

Static Sites with Sculpin (ZendCon 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

October 30, 2014
Tweet

More Decks by Beau Simensen

Other Decks in Programming

Transcript

  1. Sculpin
    Static Sites with
    joind.in/12100

    View Slide

  2. What is a static site
    generator?

    View Slide

  3. STATIC

    View Slide

  4. not interpreted

    View Slide

  5. every request served directly
    from the filesystem

    View Slide

  6. plain ol' HTML files

    View Slide

  7. JavaScript and CSS

    View Slide

  8. images

    View Slide

  9. JSON, XML, and other
    supporting files

    View Slide

  10. static sites have some advantages

    View Slide

  11. less restrictions on hosting
    environment

    View Slide

  12. less moving pieces

    View Slide

  13. can more easily absorb
    traffic spikes

    View Slide

  14. more security / less maintenance

    View Slide

  15. DyNaMic

    View Slide

  16. interpreted at runtime

    View Slide

  17. most html is rendered at the
    time of every request

    View Slide

  18. cache can be used to bypass
    rendering on every request

    View Slide

  19. static site generators give you
    the best of both worlds

    View Slide

  20. all of the advantages of static

    View Slide

  21. and the power of dynamic

    View Slide

  22. Should my next site
    be static?

    View Slide

  23. Should my next site
    be static?
    Wrong Question

    View Slide

  24. Does my next site need
    to be dynamic?

    View Slide

  25. comments

    View Slide

  26. Disqus

    View Slide

  27. forms

    View Slide

  28. Wufoo

    View Slide

  29. Google Forms

    View Slide

  30. search

    View Slide

  31. lunr.js

    View Slide

  32. JavaScript!!!1!

    View Slide

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

    View Slide

  34. Sculpin?

    View Slide

  35. my baby

    View Slide

  36. PHP

    View Slide

  37. Twig

    View Slide

  38. extensible

    View Slide

  39. embedded composer

    View Slide

  40. SALES PITCH

    View Slide

  41. What can
    Sculpin do?

    View Slide

  42. "Can Sculpin do [anything]?"

    View Slide

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

    View Slide

  44. "How can I do [anything]?"

    View Slide

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

    View Slide

  46. over twenty
    the number of sculpin sites i've published

    View Slide

  47. beau.io dflydev.com
    sculpin.io srcmvn.com
    reflxlabsinc.com
    beausimensen.com
    stackphp.com
    thatpodcast.io

    View Slide

  48. zero
    the number of sculpin specific extensions i've written

    View Slide

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

    View Slide

  50. So what would you say
    Sculpin does here?

    View Slide

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

    View Slide

  52. it reads metadata from sources
    typically sources are just plain files on disk

    View Slide

  53. and site-wide metadata
    this is maintained in a global configuration file, sculpin_site.yml

    View Slide

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

    View Slide

  55. injects everything into a
    Twig environment

    View Slide

  56. and writes rendered output to disk

    View Slide

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

    View Slide

  58. you can think of Sculpin as a
    playground for Twig

    View Slide

  59. So how do I use
    Sculpin?

    View Slide

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

    View Slide

  61. or just start small

    View Slide

  62. # mkdir -p source/_layouts
    # vi source/_layouts/default.html
    !

    {{ page.title }}
    {% block content %}Fallback content{% endblock %}

    View Slide

  63. # 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!

    View Slide

  64. sculpin generate --watch --server

    View Slide

  65. 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.

    View Slide

  66. 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.

    View Slide

  67. View Slide

  68. Sculpin metadata.

    View Slide

  69. page.[something]

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  73. site.[something]

    View Slide

  74. from app/config/sculpin_site.yml

    View Slide

  75. 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:

    View Slide

  76. {% if page.full_title %}
    {{ page.full_title|raw }}
    {% else %}

    {{ page.title }} ·
    {{ site.title }} &middit;
    {{ site.subtitle }}

    {% endif %}

    View Slide

  77. Sculpin layouts and
    Twig inheritance.

    View Slide

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

    View Slide

  79. ---
    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 %}

    View Slide

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

    View Slide

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

    {{ page.title }}
    {% block content %}Fallback content{% endblock %}

    View Slide

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

    {{ page.title }}
    {% block content %}Fallback content{% endblock %}

    !
    !

    All about metadata
    This is a markdown file with YALM frontmatter

    View Slide

  83. "Pretty" permalink
    strategy.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  87. Where can I see how
    to do [anything]?

    View Slide

  88. Sculpin docs suck. :(

    View Slide

  89. people are trying to help make
    them better
    @emmajanehw

    View Slide

  90. learn by example

    View Slide

  91. feeds

    View Slide

  92. View Slide

  93. http://thatpodcast.io

    View Slide

  94. // source/itunes.xml
    !
    ---
    use: ["episodes"]
    permalink: itunes.rss
    ---

    That Podcast
    http://thatpodcast.io

    View Slide

  95. // source/itunes.xml
    !
    {% for episode in data.episodes %}

    Episode {{ episode.number }}: {{ e
    Beau Simensen & Dave M
    {% if episode.subtitle %}
    {{ episode.subtitle
    {% endif %}
    {{ episode.explicit }}

    View Slide

  96. search

    View Slide

  97. View Slide

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

    View Slide

  99. lunr.js with custom Twig
    extension
    @andrewshell

    View Slide

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

    View Slide

  101. talks

    View Slide

  102. View Slide

  103. https://beau.io/talks/

    View Slide

  104. leverages custom content types
    and does fun stuff with sorting

    View Slide

  105. ---
    title: Static Sites with Sculpin
    location: "php[tek] 2014"
    slides: https://speakerdeck.com/simensen/s
    slides_embed:

    View Slide

  106. {% extends "base" %}
    {% block content %}




    {{ page.title }}
    {{ page.location }}



    {% if page.slides_embed %}



    {{ page.slides_embed|raw}}


    View Slide


  107. {% 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 %}



    Upcoming Talks
    Where I will be speaking in the future.




    {% set found = true %}
    {% endif %}
    {% include "talks_listing_item" %}

    View Slide

  108. {% set found = false %}
    {% for talk in data.talks if talk.date < now %}
    {% if loop.first %}



    Past Talks
    Where I have spoken in the past.




    {% set found = true %}
    {% endif %}
    {% include "talks_listing_item" %}
    !

    View Slide

  109. authors

    View Slide

  110. View Slide

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

    View Slide

  112. leverages site metadata to build
    and maintain author data
    @erikaheidi

    View Slide

  113. 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

    View Slide

  114. projects

    View Slide

  115. View Slide

  116. http://dflydev.com/

    View Slide

  117. first Sculpin site to leverage
    custom content types

    View Slide

  118. also uses some fun metadata and
    template tricks to get specific
    artwork on different pages

    View Slide

  119. external services

    View Slide

  120. View Slide

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

    View Slide

  122. Twig extension to enable
    embedding Flickr images
    @coates

    View Slide

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

    View Slide

  124. {{flickr_img('https://www.flickr.com/
    photos/scoates/14130067715')}}
    @coates

    View Slide

  125. team directory

    View Slide

  126. View Slide

  127. http://reflxlabsinc.com/

    View Slide

  128. leverages custom content types

    View Slide

  129. [this page intentionally left blank]

    View Slide

  130. Not every site
    needs to be
    dynamic

    View Slide

  131. Not every site
    should be static

    View Slide

  132. Sculpin is a great
    choice if you like
    PHP and Twig

    View Slide

  133. Don't expect Sculpin
    to do anything for
    you and you'll get
    along just fine

    View Slide

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

    View Slide

  135. Get involved in the
    community!!
    !
    #sculpin

    View Slide

  136. Questions?
    @beausimensen • @getsculpin • @dflydev
    @thatpodcast • thatpodcast.io
    joind.in/12100
    ddd.io/zendcon2014-sculpin

    View Slide

  137. [this page intentionally left blank]

    View Slide