.. 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
Hello, World!
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
{{ site.name }}
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 %}
{{ testimonial.name }} - {{ testimonial.role }}
{{ testimonial.text }}
{% endfor %}
Layouts
=======
.. code-block:: twig
{# source/_layouts/app.html.twig #}
{{ site.name|default('Sculpin Skeleton') }}
{% block body %}{% endblock %}
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 %}
{{ project.title }}
{% 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