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

Building Static Websites with Sculpin

Oliver Davies
May 23, 2024
Technology
0
1.3k

Building Static Websites with Sculpin

https://www.oliverdavies.uk/talks/building-static-websites-sculpin

Oliver Davies

May 23, 2024
Tweet

More Decks by Oliver Davies

See All by Oliver Davies
Taking Flight with Tailwind CSS
opdavies
0
4.5k
TDD - Test Driven Drupal
opdavies
0
3.2k
Building "Build Configs"
opdavies
0
300
Communities and contribution
opdavies
0
100
Working without Workspace
opdavies
0
170
Things you should know about PHP
opdavies
1
670
An Introduction to Mob Programming
opdavies
0
200
Deploying PHP applications with Ansible, Ansible Vault and Ansistrano
opdavies
0
5.9k
Upgrading to Drupal 9
opdavies
0
690

Other Decks in Technology

See All in Technology
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
MySQLのロックの種類とその競合
yoku0825
6
1.6k
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
Classmethod Odyssey 登壇資料
yamahiro
0
390

Featured

See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Into the Great Unknown - MozCon
thekraken
20
1.3k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
A designer walks into a library…
pauljervisheath
201
24k
Producing Creativity
orderedlist
PRO
340
39k

Transcript

  1. Building static websites with Sculpin Oliver Davies (@opdavies)

  2. @opdavies

  3. @opdavies

  4. What is Sculpin? • Static site generator • CLI tool

    • Built on Symfony components • Markdown + Twig = Static HTML @opdavies

  5. Why use a static site generator? • Rapid development. •

    Security. • Performance. • Easy and cheap to host. @opdavies

  6. What do I use it for? • My personal website.

    • Some client websites. • HTML prototypes and testing. • Learning YAML and Twig (and some Symfony). @opdavies

  7. Installation composer require sculpin/sculpin composer create-project sculpin/blog-skeleton my-blog composer create-project

    opdavies/sculpin-skeleton my-site @opdavies

  8. Using Sculpin • Configuration in app/config • Source files in

    source. • Templates in source/_templates or source/_layouts. • Includes in source/_includes or source/_partials. @opdavies

  9. . app config sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev output_prod source

    _includes _templates index.md vendor @opdavies

  10. . app config sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev output_prod source

    _includes _templates index.md vendor @opdavies

  11. . app config sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev output_prod source

    _includes _templates index.md vendor @opdavies

  12. . app config sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev output_prod source

    _includes _templates index.md vendor @opdavies

  13. . app config sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev output_prod source

    _includes _templates index.md vendor @opdavies

  14. Generate a site • vendor/bin/sculpin generate • --server • --watch

    • --env @opdavies

  15. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  16. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  17. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  18. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  19. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @opdavies

  20. output_dev/index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello!</title>

    5 </head> 6 <body> 7 <p>Hello, World!</p> 8 </body> 9 </html> @opdavies

  21. output_dev/index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello!</title>

    5 </head> 6 <body> 7 <p>Hello, World!</p> 8 </body> 9 </html> @opdavies

  22. output_dev/index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Hello!</title>

    5 </head> 6 <body> 7 <p>Hello, World!</p> 8 </body> 9 </html> @opdavies

  23. Configuration • Stored in app/config • sculpin_site.yml • sculpin_site_{env}.yml •

    Key-value pairs 1 --- 2 name: oliverdavies.uk 3 menu_links: 4 - { title: Home, href: / } 5 - { title: About, href: /about } @opdavies

  24. Using on pages <!DOCTYPE html> <html> <head> <title>{{ site.name }}</title>

    </head> </html> @opdavies

  25. YAML front matter --- layout: post title: New blog post

    draft: yes --- # My new blog post @opdavies

  26. YAML front matter 1 --- 2 layout: post 3 title:

    New blog post 4 draft: yes 5 --- 6 7 # My new blog post @opdavies

  27. YAML front matter 1 --- 2 layout: post 3 title:

    New blog post 4 draft: yes 5 --- 6 7 # My new blog post @opdavies

  28. YAML front matter 1 --- 2 layout: post 3 title:

    New blog post 4 draft: yes 5 --- 6 7 # My new blog post @opdavies

  29. More front matter 1 --- 2 layout: post 3 title:

    New blog post 4 draft: yes 5 tags: 6 - drupal 7 - php 8 - sculpin 9 --- 10 11 # My new blog post @opdavies

  30. Even more front matter 1 --- 2 layout: post 3

    title: New blog post 4 draft: yes 5 tags: 6 - drupal 7 - php 8 - sculpin 9 tweets: yes 10 foo: bar 11 --- 12 13 # My new blog post @opdavies

  31. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  32. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  33. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  34. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  35. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  36. Using on pages 1 --- 2 ... 3 testimonials: 4

    - { name: ..., role: ..., text: ..., url: ... } 5 - { name: ..., role: ..., text: ..., url: ... } 6 - { name: ..., role: ..., text: ..., url: ... } 7 --- 8 9 {% for testimonial in page.testimonials %} 10 <h2>{{ testimonial.name }} - {{ testimonial.role }}</h2> 11 <p>{{ testimonial.text }}</p> 12 {% endfor %} @opdavies

  37. Layouts 1 {# source/_layouts/base.html.twig #} 2 3 <!DOCTYPE html> 4

    <html lang="{{ site.locale|default('en') }}"> 5 <head> 6 <title>{{ site.name|default('Sculpin Skeleton') }}</title> 7 </head> 8 <body> 9 {% block body %}{% endblock %} 10 </body> 11 </html> @opdavies

  38. Layouts 1 {# source/_layouts/base.html.twig #} 2 3 <!DOCTYPE html> 4

    <html lang="{{ site.locale|default('en') }}"> 5 <head> 6 <title>{{ site.name|default('Sculpin Skeleton') }}</title> 7 </head> 8 <body> 9 {% block body %}{% endblock %} 10 </body> 11 </html> @opdavies

  39. Layouts 1 {# source/_layouts/base.html.twig #} 2 3 <!DOCTYPE html> 4

    <html lang="{{ site.locale|default('en') }}"> 5 <head> 6 <title>{{ site.name|default('Sculpin Skeleton') }}</title> 7 </head> 8 <body> 9 {% block body %}{% endblock %} 10 </body> 11 </html> @opdavies

  40. Layouts 1 {# source/_layouts/page.html.twig #} 2 3 {% extends 'base'

    %} 4 5 {% block body %} 6 {% block content %}{% endblock %} 7 {% endblock %} @opdavies

  41. Layouts 1 {# source/_layouts/page.html.twig #} 2 3 {% extends 'base'

    %} 4 5 {% block body %} 6 {% block content %}{% endblock %} 7 {% endblock %} @opdavies

  42. Layouts 1 {# source/_layouts/page.html.twig #} 2 3 {% extends 'base'

    %} 4 5 {% block body %} 6 {% block content %}{% endblock %} 7 {% endblock %} @opdavies

  43. Layouts 1 {# source/_layouts/page.html.twig #} 2 3 {% extends 'base'

    %} 4 5 {% block body %} 6 {% block content %}{% endblock %} 7 {% endblock %} @opdavies

  44. Includes {% include 'about-author' with { avatar: site.avatar, work: site.work,

    } only %} {% for link in links %} {% include 'menu-link' with { link } only %} {% endfor %} @opdavies

  45. Content types # app/config/sculpin_kernel.yml sculpin_content_types: daily_emails: permalink: daily/:slug_title/ @opdavies

  46. Accessing custom content types 1 --- 2 title: My Daily

    Email Archive 3 layout: default 4 use: 5 - daily_email 6 --- 7 8 {% for email in data.daily_emails %} 9 <p>{{ email.title }}</p> 10 {% endfor %} @opdavies

  47. Accessing custom content types 1 --- 2 title: My Daily

    Email Archive 3 layout: default 4 use: 5 - daily_email 6 --- 7 8 {% for email in data.daily_emails %} 9 <p>{{ email.title }}</p> 10 {% endfor %} @opdavies

  48. Accessing custom content types 1 --- 2 title: My Daily

    Email Archive 3 layout: default 4 use: 5 - daily_email 6 --- 7 8 {% for email in data.daily_emails %} 9 <p>{{ email.title }}</p> 10 {% endfor %} @opdavies

  49. Making things more dynamic @opdavies

  50. {{ 'today' }} {{ 'today'|date }} {{ 'today'|date('Y') }} {{

    'today'|date('Y') - 2007 }} # 17 @opdavies

  51. {{ 'today' }} {{ 'today'|date }} {{ 'today'|date('Y') }} {{

    'today'|date('Y') - 2007 }} # 17 @opdavies

  52. {{ 'today' }} {{ 'today'|date }} {{ 'today'|date('Y') }} {{

    'today'|date('Y') - 2007 }} # 17 @opdavies

  53. {{ 'today' }} {{ 'today'|date }} {{ 'today'|date('Y') }} {{

    'today'|date('Y') - 2007 }} # 17 @opdavies

  54. --- title: Building Static Websites with Sculpin events: - name:

    BrumPHP date: 2024-05-23 location: Birmingham, UK url: https://www.eventbrite.com/e/brumphp-23rd-may-2024-tickets-803037766577 - name: PHP South West date: 2024-02-14 location: Bristol, UK url: https://www.meetup.com/php-sw/events/298880313 --- @opdavies

  55. {% set talkCount = 0 %} {% for talk in

    data.talks %} {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} {% set talkCount = talkCount + 1 %} {% endfor %} {% endfor %} <p>I have given {{ talkCount }} talks.</p> @opdavies

  56. {% set talkCount = 0 %} {% for talk in

    data.talks %} {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} {% set talkCount = talkCount + 1 %} {% endfor %} {% endfor %} <p>I have given {{ talkCount }} talks.</p> @opdavies

  57. {% set talkCount = 0 %} {% for talk in

    data.talks %} {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} {% set talkCount = talkCount + 1 %} {% endfor %} {% endfor %} <p>I have given {{ talkCount }} talks.</p> @opdavies

  58. {% set talkCount = 0 %} {% for talk in

    data.talks %} {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} {% set talkCount = talkCount + 1 %} {% endfor %} {% endfor %} <p>I have given {{ talkCount }} talks.</p> @opdavies

  59. {% set talkCount = 0 %} {% for talk in

    data.talks %} {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} {% set talkCount = talkCount + 1 %} {% endfor %} {% endfor %} <p>I have given {{ talkCount }} talks.</p> @opdavies

  60. {% set talkCount = 0 %} {% for talk in

    data.talks %} {% for event in talk.events if 'today'|date('U') >= event.date|date('U') %} {% set talkCount = talkCount + 1 %} {% endfor %} {% endfor %} <p>I have given {{ talkCount }} talks.</p> @opdavies

  61. {% set talks = site.talks|filter(talk => talk.speaker == page.name) %}

    {% if talks is not empty %} <section class="mt-10"> <h2 class="text-2xl font-bold">Talks <span class="sr-only"> by {{ page.name }}</span></h2> <div class="mt-6"> <ul class="pl-4 list-disc"> {% for talk in talks %} <li> <a class="hover:underline" href="#0">{{ talk.title }}</a> </li> {% endfor %} </ul> </div> </section> {% endif %} @opdavies

  62. {% set talks = site.talks|filter(talk => talk.speaker == page.name) %}

    {% if talks is not empty %} <section class="mt-10"> <h2 class="text-2xl font-bold">Talks <span class="sr-only"> by {{ page.name }}</span></h2> <div class="mt-6"> <ul class="pl-4 list-disc"> {% for talk in talks %} <li> <a class="hover:underline" href="#0">{{ talk.title }}</a> </li> {% endfor %} </ul> </div> </section> {% endif %} @opdavies

  63. {% set talks = site.talks|filter(talk => talk.speaker == page.name) %}

    {% if talks is not empty %} <section class="mt-10"> <h2 class="text-2xl font-bold">Talks <span class="sr-only"> by {{ page.name }}</span></h2> <div class="mt-6"> <ul class="pl-4 list-disc"> {% for talk in talks %} <li> <a class="hover:underline" href="#0">{{ talk.title }}</a> </li> {% endfor %} </ul> </div> </section> {% endif %} @opdavies

  64. Demo @opdavies

  65. Extending Sculpin # app/config/sculpin_kernel.yml ... services: App\TwigExtension\TalkExtension: tags: - {

    name: twig.extension } @opdavies

  66. @opdavies

  67. // app/SculpinKernel.php use Opdavies\Sculpin\Bundle\TwigMarkdownBundle\SculpinTwigMarkdownBundle; use Sculpin\Bundle\SculpinBundle\HttpKernel\AbstractKernel; final class SculpinKernel extends

    AbstractKernel { protected function getAdditionalSculpinBundles(): array { return [ SculpinTwigMarkdownBundle::class, ]; } } @opdavies

  68. Thanks! References: • https://www.oliverdavies.uk/brumphp • https://sculpin.io • https://github.com/opdavies/phpsw-sculpin-demo • https://github.com/opdavies/oliverdavies.uk

    Me: • https://www.oliverdavies.uk • @opdavies @opdavies