Building Static Websites with Sculpin – PHPSW - October 2015 – Using Sculpin



Building Static Websites with Sculpin – PHPSW - October 2015 – Using Sculpin

0 0


phpsw-sculpin


On Github opdavies / phpsw-sculpin

Building Static Websites with Sculpin

PHPSW - October 2015

By Oliver Davies / @opdavies

opdavies

  • Senior Developer at Microserve
  • Drupaler who uses Sculpin

What is Sculpin?

  • Static site generator
  • CLI tool
  • Built on Symfony’s HttpKernel
  • HTML + Markdown + Twig > static site
Static site generator which means that it takes dynamic content and changes it into static, deployable HTML.

What do I use it For?

  • My personal website
  • HTML prototypes and testing
  • Learning YAML and Twig (and maybe some Symfony)
My site didn't need complex data modelling Less to edit or modify changes to templates if using a SSG Drupal 8 uses Twig and YAML - re-usable skills and familiar syntax Learning Symfony

Installation

$ curl -O https://download.sculpin.io/sculpin.phar
$ chmod +x sculpin.phar
$ mv sculpin.phar /usr/local/bin/sculpin
					

Or use the Sculpin Ansible role. :)

Download sculpin.phar from sculpin.io (phar is PHP archive file containing the library or application) Give it executable permissions Move it to somewhere within your $PATH if you want it to be available globally.

Using Sculpin

  • Configuration lives in app/config
  • Source code lives in source

Generate a Site

$ sculpin generate builds the things

  • --server
  • --watch
  • --env

source/index.md

---
layout: default
title: Hello!
---

Hi, [PHPSW](https://phpsw.uk)!
						

Super Simple Sculpin Site

Start with an empty repo Create a `source` directory - `app` is optional Add index.md with empty front matter Add page content Check the output and view the page

Configuration

  • Stored in app/config
    • sculpin_site.yml
    • sculpin_site_ENV.yml
  • Key-value pairs
---
title: My PHPSW talk
foo: bar
main_menu_links:
    - { title: About, href: / }
    - { title: Talks, href: /talks/ }
						

Simple Settings

Environment Settings

YAML Front Matter

---
layout: post
title: New Blog Post
draft: yes
---

# My New Blog Post
						
If a files doesn't have the front matter included, it will be copied as-is into the source directory.

More Front Matter

---
layout: post
title: New Blog Post
draft: yes
tags:
    - drupal
    - sculpin
    - phpsw
---

# My New Blog Post
						

Even More Front Matter

---
layout: post
title: New Blog Post
draft: yes
tags:
    - drupal
    - sculpin
    - phpsw
tweets: yes
foo: bar
---

# My New Blog Post
						
You can keep adding more things, including arbitrary things. Used in my talks for URLs to slide decks, event name, location etc.

Using on Pages

---
...
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 %}

Content Types

Sculpin does custom content types!

# app/config/sculpin_kernel.yml

sculpin_content_types:
    projects:
        permalink: projects/:slug_title/
						

Accessing Custom Content Types

---
title: My Projects
layout: default
use:
    - projects
---
{% for project in data.projects %}
    

{{ project.title }}

{% endfor %}

Extending Sculpin

  • Custom (Symfony) bundles
  • Twig extensions
  • Other Symfony components or PHP libraries

Integrating @getsculpin and some @symfony components for new @supportyard website is very powerful and productive. Should blog about it!

— Pera Jovic (@_korso_) October 8, 2015

Resources

http://bit.ly/sculpin-twig-resources

Questions?

Feedback

https://joind.in/talk/view/15486

Building Static Websites with Sculpin PHPSW - October 2015 By Oliver Davies / @opdavies