309 lines
4.8 KiB
ReStructuredText
309 lines
4.8 KiB
ReStructuredText
.. footer:: @opdavies
|
|
|
|
Building static websites with Sculpin
|
|
#####################################
|
|
|
|
|
|
|
|
|
.. class:: titleslideinfo
|
|
|
|
Oliver Davies (@opdavies)
|
|
|
|
.. page:: imagePage
|
|
|
|
.. image:: druplicon.png
|
|
:width: 10cm
|
|
|
|
.. page::
|
|
|
|
.. image:: sculpin.png
|
|
:width: 10cm
|
|
|
|
.. page:: standardPage
|
|
|
|
What is Sculpin?
|
|
================
|
|
|
|
* Static site generator
|
|
* CLI tool
|
|
* Built on Symfony's HttpKernel
|
|
* HTML + Markdown + Twig = Static site
|
|
|
|
What do I use it for?
|
|
=====================
|
|
|
|
* My personal website
|
|
* Some client websites
|
|
* HTML prototypes and testing
|
|
* Learning YAML and Twig (and some Symfony)
|
|
|
|
Installation
|
|
============
|
|
|
|
``composer require sculpin/sculpin``
|
|
|
|
|
|
|
|
|
``composer create-project sculpin/blog-skeleton my-blog``
|
|
|
|
|
|
|
|
|
``composer create-project opdavies/sculpin-skeleton my-site``
|
|
|
|
Using Sculpin
|
|
=============
|
|
|
|
* Configuration lives in ``app/config``
|
|
* Source files live in ``source``.
|
|
|
|
Generate a site
|
|
===============
|
|
|
|
* ``vendor/bin/sculpin generate``
|
|
* ``--server``
|
|
* ``--watch``
|
|
* ``--env``
|
|
|
|
source/index.md
|
|
===============
|
|
|
|
.. code-block:: markdown
|
|
:include: code/index.md.txt
|
|
|
|
output_dev/index.html
|
|
=====================
|
|
|
|
.. code-block:: html
|
|
|
|
<!DOCTYPE html>
|
|
<head>
|
|
</head>
|
|
<body>
|
|
<p>Hello, World!</p>
|
|
</body>
|
|
|
|
Configuration
|
|
=============
|
|
|
|
- Stored in ``app/config``
|
|
- ``sculpin_site.yml``
|
|
- ``sculpin_site_{env}.yml``
|
|
- Key-value pairs
|
|
|
|
.. code-block:: yaml
|
|
:include: code/configuration.txt
|
|
|
|
Using on pages
|
|
==============
|
|
|
|
.. code-block:: html
|
|
|
|
<!DOCTYPE html>
|
|
<head>
|
|
<title>{{ site.name }}</title>
|
|
</head>
|
|
|
|
YAML front matter
|
|
=================
|
|
|
|
.. code-block:: yaml
|
|
|
|
---
|
|
layout: post
|
|
title: New blog post
|
|
draft: yes
|
|
---
|
|
|
|
# My new blog post
|
|
|
|
More front matter
|
|
=================
|
|
|
|
.. code-block:: yaml
|
|
|
|
---
|
|
layout: post
|
|
title: New blog post
|
|
draft: yes
|
|
tags:
|
|
- drupal
|
|
- php
|
|
- sculpin
|
|
---
|
|
|
|
# My new blog post
|
|
|
|
|
|
|
|
Even more front matter
|
|
======================
|
|
|
|
.. code-block:: yaml
|
|
|
|
---
|
|
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
|
|
|
|
---
|
|
...
|
|
testimonials:
|
|
- { name: ..., role: ..., text: ..., url: ... }
|
|
- { name: ..., role: ..., text: ..., url: ... }
|
|
- { name: ..., role: ..., text: ..., url: ... }
|
|
---
|
|
|
|
{% for testimonial in page.testimonials %}
|
|
<h2>{{ testimonial.name }} - {{ testimonial.role }}</h2>
|
|
<p>{{ testimonial.text }}</p>
|
|
{% endfor %}
|
|
|
|
Layouts
|
|
=======
|
|
|
|
.. code-block:: twig
|
|
|
|
{# source/_layouts/app.html.twig #}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="{{ site.locale|default('en') }}">
|
|
<head>
|
|
<title>{{ site.name|default('Sculpin Skeleton') }}</title>
|
|
</head>
|
|
<body>
|
|
{% block body %}{% endblock %}
|
|
</body>
|
|
</html>
|
|
|
|
Layouts
|
|
=======
|
|
|
|
.. code-block:: twig
|
|
|
|
{# source/_layouts/default.html.twig #}
|
|
|
|
{% extends 'app' %}
|
|
|
|
{% block body %}
|
|
{% block content %}{% endblock %}
|
|
{% endblock %}
|
|
|
|
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 %}
|
|
|
|
Content types
|
|
=============
|
|
|
|
.. code-block:: yaml
|
|
|
|
# app/config/sculpin_kernel.yml
|
|
|
|
sculpin_content_types:
|
|
projects:
|
|
permalink: projects/:slug_title/
|
|
|
|
Accessing custom content types
|
|
==============================
|
|
|
|
.. code-block:: yaml
|
|
|
|
---
|
|
title: My Projects
|
|
layout: default
|
|
use:
|
|
- projects
|
|
---
|
|
|
|
{% for project in data.projects %}
|
|
<h2>{{ project.title }}</h2>
|
|
{% endfor %}
|
|
|
|
.. page:: titlePage
|
|
|
|
.. class:: centredtitle
|
|
|
|
Demo
|
|
|
|
.. page:: standardPage
|
|
|
|
Extending Sculpin
|
|
=================
|
|
|
|
.. 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,
|
|
];
|
|
}
|
|
}
|
|
|
|
Thanks!
|
|
=======
|
|
|
|
References:
|
|
|
|
* https://sculpin.io
|
|
* https://github.com/opdavies/sculpin-talk-demo
|
|
* https://github.com/opdavies/oliverdavies.uk
|
|
* https://github.com/opdavies/docker-image-sculpin-serve
|
|
|
|
|
|
|
|
|
Me:
|
|
|
|
* https://www.oliverdavies.uk
|