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!

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