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

Building Static Websites with Sculpin

Oliver Davies
August 28, 2024
Technology
0
1.5k

Building Static Websites with Sculpin

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

Oliver Davies

August 28, 2024
Tweet

More Decks by Oliver Davies

See All by Oliver Davies
Taking Flight with Tailwind CSS
opdavies
0
4.8k
TDD - Test Driven Drupal
opdavies
0
3.6k
Building "Build Configs"
opdavies
0
370
Communities and contribution
opdavies
0
150
Working without Workspace
opdavies
0
210
Things you should know about PHP
opdavies
1
700
An Introduction to Mob Programming
opdavies
0
230
Deploying PHP applications with Ansible, Ansible Vault and Ansistrano
opdavies
0
6.1k
Upgrading to Drupal 9
opdavies
0
740

Other Decks in Technology

See All in Technology
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
The Rise of LLMOps
asei
7
1.5k
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
300
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
200
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
400
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Statistics for Hackers
jakevdp
796
220k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Become a Pro
speakerdeck
PRO
25
5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Producing Creativity
orderedlist
PRO
341
39k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Docker and Python
trallard
40
3.1k
Done Done
chrislema
181
16k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Automating Front-end Workflow
addyosmani
1366
200k

Transcript

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

  2. @opdavies

  3. @opdavies

  4. What is a static website? .htaccess assets/images/od-logo.jpg build/tailwind.css call/index.html daily/2024/03/18/automated-drupal-11-compatibility-fixes/index.html

    drupal-upgrade/index.html favicon.ico index.html phpberks/index.html podcast/19-sam-mortenson/index.html pricing/index.html talks/taking-flight-with-tailwind-css/index.html talks/tdd-test-driven-drupal/index.html @opdavies

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

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

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

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

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

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

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

    opdavies/sculpin-skeleton my-site @opdavies

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

  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. app/ config/ sculpin_kernel.yml sculpin_site.yml composer.json composer.lock output_dev/ output_prod/ source/ _includes/

    _templates/ index.md vendor/ @opdavies

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

    • --env @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. source/index.md 1 --- 2 layout: default 3 title: Hello! 4

    --- 5 6 Hello, World! @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. 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

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

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

    </head> </html> @opdavies

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

    draft: yes --- @opdavies

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

    New blog post 4 draft: yes 5 --- @opdavies

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

    New blog post 4 draft: yes 5 --- @opdavies

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

    New blog post 4 draft: yes 5 --- @opdavies

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

    New blog post 4 draft: yes 5 tags: 6 - drupal 7 - php 8 - sculpin 9 --- @opdavies

  31. 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 --- @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. 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

  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/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

  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. Layouts 1 {# source/_layouts/page.html.twig #} 2 3 {% extends 'base'

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

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

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

  46. Content types # app/config/sculpin_kernel.yml sculpin_content_types: daily_emails: permalink: daily/:slug_title/ @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. 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

  50. Making things more dynamic @opdavies

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

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

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

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

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

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

  54. 1 {{ 'today' }} 2 3 {{ 'today'|date }} 4

    5 {{ 'today'|date('Y') }} 6 7 {{ 'today'|date('Y') - 2007 }} # 17 (years of experience) @opdavies

  55. 1 --- 2 title: Daily Email Archive 3 use: [daily_emails]

    4 --- 5 6 This is an archive of the {{ data.daily_emails|length }} 7 email messages I have sent to my daily email list 8 since the 12th of August, 2022. This is an archive of the 599 email messages I have sent to my daily email list since the 12th of August, 2022. @opdavies

  56. 1 --- 2 title: Building Static Websites with Sculpin 3

    events: 4 - name: PHP Berkshire 5 date: 2024-08-28 6 location: Reading, UK 7 url: https://www.meetup.com/php-berkshire/events/301850284 8 - name: BrumPHP 9 date: 2024-05-23 10 location: Birmingham, UK 11 url: https://www.eventbrite.com/e/brumphp-23rd-may-2024-tickets-803037766577 12 --- 13 @opdavies

  57. 1 {% set talkCount = 0 %} 2 3 {%

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

  58. 1 {% set talkCount = 0 %} 2 3 {%

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

  59. 1 {% set talkCount = 0 %} 2 3 {%

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

  60. 1 {% set talkCount = 0 %} 2 3 {%

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

  61. 1 {% set talkCount = 0 %} 2 3 {%

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

  62. 1 {% set talkCount = 0 %} 2 3 {%

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

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

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

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

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

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

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

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

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

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

    %} 2 3 {% if talks is not empty %} 4 <section> 5 <h2>Talks by {{ page.name }}</h2> 6 7 <div> 8 <ul> 9 {% for talk in talks %} 10 <li><a href="#0">{{ talk.title }}</a></li> 11 {% endfor %} 12 </ul> 13 </div> 14 </section> 15 {% endif %} @opdavies

  68. Demo @opdavies

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

    name: twig.extension } @opdavies

  70. @opdavies

  71. // 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

  72. Thanks! References: https://www.oliverdavies.uk/phpberks Me: • https://www.oliverdavies.uk • @opdavies @opdavies