2021-08-19 21:12:39 +01:00
.. footer :: @opdavies
Building static websites with Sculpin
#####################################
|
.. class :: titleslideinfo
Oliver Davies (@opdavies)
.. page :: imagePage
2024-04-21 23:08:08 +01:00
.. image :: images/druplicon.png
2021-08-19 21:12:39 +01:00
:width: 10cm
2024-05-10 22:37:50 +02:00
.. raw :: pdf
PageBreak
2021-08-19 21:12:39 +01:00
2024-04-21 23:08:08 +01:00
.. image :: images/sculpin.png
2021-08-19 21:12:39 +01:00
:width: 10cm
.. page :: standardPage
What is Sculpin?
================
* Static site generator
* CLI tool
2024-05-23 17:09:30 +01:00
* Built on Symfony components
* Markdown + Twig = Static HTML
.. raw :: pdf
TextAnnotation "Uses various Symfony components - Console, config, DI, Filesystem, Finder, HttpKernel, YAML."
TextAnnotation "Uses Twig - Symfony's templating language."
TextAnnotation ""
TextAnnotation "Transforms markdown files and Twig templates into static HTML websites, 'generates' a static website that can easily be deployed."
Why use a static site generator?
================================
- Rapid development.
- Security.
- Performance.
- Easy and cheap to host.
.. raw :: pdf
TextAnnotation "Static websites are fast and secure as they don't have a database and only need a simple hosting environment with a basic web server."
2021-08-19 21:12:39 +01:00
What do I use it for?
=====================
2024-05-23 17:09:30 +01:00
* My personal website.
* Some client websites.
* HTML prototypes and testing.
* Learning YAML and Twig (and some Symfony).
2021-08-19 21:12:39 +01:00
Installation
============
`` composer require sculpin/sculpin ``
2021-09-07 17:43:42 +01:00
|
`` composer create-project sculpin/blog-skeleton my-blog ``
|
`` composer create-project opdavies/sculpin-skeleton my-site ``
2021-08-19 21:12:39 +01:00
Using Sculpin
=============
2024-05-23 17:09:30 +01:00
* Configuration in `` app/config ``
* Source files in `` source `` .
* Templates in `` source/_templates `` or `` source/_layouts `` .
* Includes in `` source/_includes `` or `` source/_partials `` .
.. raw :: pdf
PageBreak
.. code-block ::
:include: ./code/project-structure.txt
.. raw :: pdf
TextAnnotation "The file structure of a Sculpin project."
PageBreak
.. code-block :: shell
:include: ./code/project-structure.txt
:hl_lines: 6,7,14
.. raw :: pdf
TextAnnotation "PHP-based project."
PageBreak
.. code-block :: shell
:include: ./code/project-structure.txt
:hl_lines: 2,3,4,5
.. raw :: pdf
TextAnnotation "Configuration."
PageBreak
.. code-block :: shell
:include: ./code/project-structure.txt
:hl_lines: 10,11,12,13
.. raw :: pdf
TextAnnotation "Source files."
PageBreak
.. code-block :: shell
:include: ./code/project-structure.txt
:hl_lines: 8,9
.. raw :: pdf
TextAnnotation "Output directories with generated files."
2021-08-19 21:12:39 +01:00
Generate a site
===============
2021-09-07 17:43:42 +01:00
* `` vendor/bin/sculpin generate ``
2021-08-19 21:12:39 +01:00
* `` --server ``
* `` --watch ``
* `` --env ``
source/index.md
===============
.. code-block :: markdown
:include: code/index.md.txt
2024-05-23 17:09:30 +01:00
:linenos:
source/index.md
===============
.. code-block :: markdown
:include: code/index.md.txt
:linenos:
:hl_lines: 1,2,3,4
source/index.md
===============
.. code-block :: markdown
:include: code/index.md.txt
:linenos:
:hl_lines: 2
source/index.md
===============
.. code-block :: markdown
:include: code/index.md.txt
:linenos:
:hl_lines: 3
source/index.md
===============
.. code-block :: markdown
:include: code/index.md.txt
:linenos:
:hl_lines: 6
2021-08-19 21:12:39 +01:00
2021-09-07 17:43:42 +01:00
output_dev/index.html
=====================
.. code-block :: html
2024-05-23 17:09:30 +01:00
:include: ./code/index.html.txt
:linenos:
2021-09-07 17:43:42 +01:00
2024-05-23 17:09:30 +01:00
output_dev/index.html
=====================
.. code-block :: html
:include: ./code/index.html.txt
:linenos:
:hl_lines: 4
output_dev/index.html
=====================
.. code-block :: html
:include: ./code/index.html.txt
:linenos:
:hl_lines: 7
2021-09-07 17:43:42 +01:00
2021-08-19 21:12:39 +01:00
Configuration
=============
- Stored in `` app/config ``
2024-05-23 17:09:30 +01:00
- `` sculpin_site.yml ``
- `` sculpin_site_{env}.yml ``
2021-08-19 21:12:39 +01:00
- Key-value pairs
2024-05-23 17:09:30 +01:00
|
2021-09-07 17:43:42 +01:00
.. code-block :: yaml
2024-05-23 17:09:30 +01:00
:linenos:
2021-08-19 21:12:39 +01:00
:include: code/configuration.txt
2021-09-07 17:43:42 +01:00
Using on pages
==============
.. code-block :: html
<!DOCTYPE html>
2024-05-23 17:09:30 +01:00
<html>
<head>
<title>{{ site.name }}</title>
</head>
</html>
2021-09-07 17:43:42 +01:00
2021-08-19 21:12:39 +01:00
YAML front matter
=================
.. code-block :: yaml
2024-05-23 17:09:30 +01:00
:include: ./code/front-matter1.txt
2021-08-19 21:12:39 +01:00
2024-05-23 17:09:30 +01:00
YAML front matter
=================
2021-08-19 21:12:39 +01:00
2024-05-23 17:09:30 +01:00
.. code-block :: yaml
:include: ./code/front-matter1.txt
:linenos:
:hl_lines: 2
YAML front matter
=================
.. code-block :: yaml
:include: ./code/front-matter1.txt
:linenos:
:hl_lines: 3
YAML front matter
=================
.. code-block :: yaml
:include: ./code/front-matter1.txt
:linenos:
:hl_lines: 4
.. raw :: pdf
TextAnnotation "Draft pages aren't generated when ENV=prod".
2021-08-19 21:12:39 +01:00
More front matter
=================
.. code-block :: yaml
2024-05-23 17:09:30 +01:00
:linenos:
:hl_lines: 5,6,7,8
2021-08-19 21:12:39 +01:00
---
layout: post
title: New blog post
draft: yes
tags:
- drupal
- php
- sculpin
---
# My new blog post
Even more front matter
======================
.. code-block :: yaml
2024-05-23 17:09:30 +01:00
:linenos:
:hl_lines: 9,10
2021-08-19 21:12:39 +01:00
---
layout: post
title: New blog post
draft: yes
tags:
- drupal
- php
- sculpin
tweets: yes
foo: bar
---
# My new blog post
Using on pages
==============
.. code-block :: twig
2024-05-23 17:09:30 +01:00
:include: ./code/front-matter-on-pages.txt
:linenos:
2021-08-19 21:12:39 +01:00
2024-05-23 17:09:30 +01:00
.. raw :: pdf
2021-08-19 21:12:39 +01:00
2024-05-23 17:09:30 +01:00
PageBreak
Using on pages
==============
.. code-block :: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 3
.. raw :: pdf
PageBreak
Using on pages
==============
.. code-block :: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 4,5,6
.. raw :: pdf
PageBreak
Using on pages
==============
.. code-block :: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 9,12
.. raw :: pdf
PageBreak
Using on pages
==============
.. code-block :: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 10
Using on pages
==============
.. code-block :: bash
:include: ./code/front-matter-on-pages.txt
:linenos:
:hl_lines: 11
.. raw :: pdf
TextAnnotation "`page.` instead of `site.` ."
Layouts
=======
.. code-block :: twig
:include: ./code/layout-base.txt
:linenos:
2021-08-19 21:12:39 +01:00
2021-09-07 17:43:42 +01:00
Layouts
=======
.. code-block :: twig
2024-05-23 17:09:30 +01:00
:include: ./code/layout-base.txt
:linenos:
:hl_lines: 4,6
2021-09-07 17:43:42 +01:00
2024-05-23 17:09:30 +01:00
Layouts
=======
2021-09-07 17:43:42 +01:00
2024-05-23 17:09:30 +01:00
.. code-block :: twig
:include: ./code/layout-base.txt
:linenos:
:hl_lines: 9
2021-09-07 17:43:42 +01:00
Layouts
=======
.. code-block :: twig
2024-05-23 17:09:30 +01:00
:include: ./code/layout-page.txt
:linenos:
2021-09-07 17:43:42 +01:00
2024-05-23 17:09:30 +01:00
Layouts
=======
.. code-block :: twig
:include: ./code/layout-page.txt
:linenos:
:hl_lines: 3
Layouts
=======
.. code-block :: twig
:include: ./code/layout-page.txt
:linenos:
:hl_lines: 5,7
2021-09-07 17:43:42 +01:00
2024-05-23 17:09:30 +01:00
Layouts
=======
2021-09-07 17:43:42 +01:00
2024-05-23 17:09:30 +01:00
.. code-block :: twig
:include: ./code/layout-page.txt
:linenos:
:hl_lines: 6
2021-09-07 17:43:42 +01:00
Includes
========
.. code-block :: twig
{% include 'about-author' with {
avatar: site.avatar,
work: site.work,
} only %}
{% for link in links %}
{% include 'menu-link' with { link } only %}
{% endfor %}
2021-08-19 21:12:39 +01:00
Content types
=============
.. code-block :: yaml
# app/config/sculpin_kernel.yml
sculpin_content_types:
2024-05-23 17:09:30 +01:00
daily_emails:
permalink: daily/:slug_title/
.. raw :: pdf
TextAnnotation "A way to segregate content into different types - e.g. pages, talks, daily emails. Something that was familiar from working with Drupal."
2021-08-19 21:12:39 +01:00
Accessing custom content types
==============================
.. code-block :: yaml
2024-05-23 17:09:30 +01:00
:include: ./code/content-types.txt
:linenos:
2021-08-19 21:12:39 +01:00
2024-05-23 17:09:30 +01:00
Accessing custom content types
==============================
2021-09-07 17:43:42 +01:00
2024-05-23 17:09:30 +01:00
.. code-block :: yaml
:include: ./code/content-types.txt
:linenos:
:hl_lines: 4,5
Accessing custom content types
==============================
.. code-block :: yaml
:include: ./code/content-types.txt
:linenos:
:hl_lines: 8,9,10
.. raw :: pdf
PageBreak titlePage
.. class :: centredtitle
Making things more dynamic
.. raw :: pdf
PageBreak standardPage
.. code-block :: twig
:include: ./code/twig-1.txt
:hl_lines: 1
.. raw :: pdf
TextAnnotation "'today' as a string."
PageBreak
.. code-block :: twig
:include: ./code/twig-1.txt
:hl_lines: 3
.. raw :: pdf
TextAnnotation "Current date as a string."
PageBreak
.. code-block :: twig
:include: ./code/twig-1.txt
:hl_lines: 5
.. raw :: pdf
TextAnnotation "Current year."
PageBreak
.. code-block :: twig
:include: ./code/twig-1.txt
:hl_lines: 7
.. raw :: pdf
PageBreak
.. code-block :: php
:include: ./code/twig-2.txt
:end-before: // end yaml
.. raw :: pdf
PageBreak
.. code-block :: twig
:include: ./code/twig-2.txt
:start-after: // start twig
.. raw :: pdf
PageBreak
.. code-block :: twig
:include: ./code/twig-2.txt
:start-after: // start twig
:hl_lines: 1
.. raw :: pdf
PageBreak
.. code-block :: javascript
:include: ./code/twig-2.txt
:hl_lines: 3,7
:start-after: // start twig
.. raw :: pdf
TextAnnotation "Get each talk from the talk content type."
PageBreak
.. code-block :: twig
:include: ./code/twig-2.txt
:start-after: // start twig
:hl_lines: 4,6
.. raw :: pdf
PageBreak
.. code-block :: twig
:include: ./code/twig-2.txt
:start-after: // start twig
:hl_lines: 5
.. raw :: pdf
PageBreak
.. code-block :: javascript
:include: ./code/twig-2.txt
:start-after: // start twig
:hl_lines: 9
.. raw :: pdf
PageBreak
.. code-block :: javascript
:include: ./code/twig-3.txt
.. raw :: pdf
PageBreak
.. code-block :: javascript
:include: ./code/twig-3.txt
:hl_lines: 1,3,18
.. raw :: pdf
PageBreak
.. code-block :: javascript
:include: ./code/twig-3.txt
:hl_lines: 5,6,10,11,12,13,14
2021-08-19 21:12:39 +01:00
2021-09-07 17:43:42 +01:00
.. page :: titlePage
.. class :: centredtitle
Demo
.. page :: standardPage
2021-08-19 21:12:39 +01:00
Extending Sculpin
=================
2021-09-07 17:43:42 +01:00
.. code-block :: yaml
# app/config/sculpin_kernel.yml
...
services:
App\TwigExtension\TalkExtension:
tags:
- { name: twig.extension }
.. page :: imagePage
.. image :: images/packagist.png
:width: 22cm
.. page :: standardPage
.. code-block :: php
:startinline: true
// 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,
];
}
}
2021-08-19 21:12:39 +01:00
Thanks!
=======
References:
2024-05-23 17:09:30 +01:00
* https://www.oliverdavies.uk/brumphp
2021-08-19 21:12:39 +01:00
* https://sculpin.io
2024-05-23 17:09:30 +01:00
* https://github.com/opdavies/phpsw-sculpin-demo
2021-09-07 17:43:42 +01:00
* https://github.com/opdavies/oliverdavies.uk
2021-08-19 21:12:39 +01:00
|
Me:
* https://www.oliverdavies.uk
2024-05-23 17:09:30 +01:00
* `` @opdavies ``