380 lines
9.4 KiB
HTML
380 lines
9.4 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
|
|||
|
|
<title>PHPSW - Sculpin</title>
|
|||
|
|
|
|||
|
|
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
|
|||
|
|
<meta name="author" content="Hakim El Hattab">
|
|||
|
|
|
|||
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|||
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|||
|
|
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="css/reveal.css">
|
|||
|
|
<link rel="stylesheet" href="css/theme/black.css" id="theme">
|
|||
|
|
|
|||
|
|
<!-- Code syntax highlighting -->
|
|||
|
|
<link rel="stylesheet" href="lib/css/zenburn.css">
|
|||
|
|
|
|||
|
|
<!-- Printing and PDF exports -->
|
|||
|
|
<script>
|
|||
|
|
var link = document.createElement( 'link' );
|
|||
|
|
link.rel = 'stylesheet';
|
|||
|
|
link.type = 'text/css';
|
|||
|
|
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
|
|||
|
|
document.getElementsByTagName( 'head' )[0].appendChild( link );
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="lib/js/html5shiv.js"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="reveal">
|
|||
|
|
|
|||
|
|
<!-- Any section element inside of this container is displayed as a slide -->
|
|||
|
|
<div class="slides">
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h1>Building Static Websites with Sculpin</h1>
|
|||
|
|
<h3>PHPSW - October 2015</h3>
|
|||
|
|
<small>By <a href="http://www.oliverdavies.uk">Oliver Davies</a> / <a href="http://twitter.com/opdavies">@opdavies</a></small>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>opdavies</h2>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>Senior Developer at <a href="https://microserve.io">Microserve</a></li>
|
|||
|
|
<li>Drupaler who uses Sculpin</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>What is Sculpin?</h2>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>Static site generator</li>
|
|||
|
|
<li>CLI tool</li>
|
|||
|
|
<li>Built on Symfony’s HttpKernel</li>
|
|||
|
|
<li>HTML + Markdown + Twig > static site</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<aside class="notes">
|
|||
|
|
Static site generator which means that it takes dynamic content and changes it into static, deployable HTML.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>What do I use it For?</h2>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="http://www.oliverdavies.uk">My personal website</a></li>
|
|||
|
|
<li>HTML prototypes and testing</li>
|
|||
|
|
<li>Learning YAML and Twig (and maybe some Symfony)</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<aside class="notes">
|
|||
|
|
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
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>Installation</h2>
|
|||
|
|
|
|||
|
|
<pre><code data-trim class="bash">
|
|||
|
|
$ curl -O https://download.sculpin.io/sculpin.phar
|
|||
|
|
$ chmod +x sculpin.phar
|
|||
|
|
$ mv sculpin.phar /usr/local/bin/sculpin
|
|||
|
|
</code></pre>
|
|||
|
|
|
|||
|
|
<p>Or use the <a href="https://galaxy.ansible.com/list#/roles/4063">Sculpin Ansible role</a>. :)</p>
|
|||
|
|
|
|||
|
|
<aside class="notes">
|
|||
|
|
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.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h2>Using Sculpin</h2>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>Configuration lives in <code>app/config</code></li>
|
|||
|
|
<li>Source code lives in <code>source</code></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>Generate a Site</h2>
|
|||
|
|
|
|||
|
|
<p><code>$ sculpin generate</code> builds the things</p>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li><code>--server</code></li>
|
|||
|
|
<li><code>--watch</code></li>
|
|||
|
|
<li><code>--env</code></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>source/index.md</h2>
|
|||
|
|
|
|||
|
|
<pre><code data-trim class="md">
|
|||
|
|
---
|
|||
|
|
layout: default
|
|||
|
|
title: Hello!
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
Hi, [PHPSW](https://phpsw.uk)!
|
|||
|
|
</code></pre>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>Super Simple Sculpin Site</h2>
|
|||
|
|
|
|||
|
|
<video controls data-autoplay>
|
|||
|
|
<source src="videos/super-simple-sculpin-site.mp4" type="video/mp4">
|
|||
|
|
</video>
|
|||
|
|
|
|||
|
|
<aside class="notes">
|
|||
|
|
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
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h2>Configuration</h2>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>Stored in <code>app/config</code>
|
|||
|
|
<ul>
|
|||
|
|
<li><code>sculpin_site.yml</code></li>
|
|||
|
|
<li><code>sculpin_site_ENV.yml</code></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>Key-value pairs</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<pre><code data-trim>
|
|||
|
|
---
|
|||
|
|
title: My PHPSW talk
|
|||
|
|
foo: bar
|
|||
|
|
main_menu_links:
|
|||
|
|
- { title: About, href: / }
|
|||
|
|
- { title: Talks, href: /talks/ }
|
|||
|
|
</code></pre>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>Simple Settings</h2>
|
|||
|
|
|
|||
|
|
<video controls data-autoplay>
|
|||
|
|
<source src="videos/layouts-includes-configuration.mp4" type="video/mp4">
|
|||
|
|
</video>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>Environment Settings</h2>
|
|||
|
|
|
|||
|
|
<video controls data-autoplay>
|
|||
|
|
<source src="videos/environment-settings.mp4" type="video/mp4">
|
|||
|
|
</video>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h2>YAML Front Matter</h2>
|
|||
|
|
|
|||
|
|
<pre><code data-trim>
|
|||
|
|
---
|
|||
|
|
layout: post
|
|||
|
|
title: New Blog Post
|
|||
|
|
draft: yes
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# My New Blog Post
|
|||
|
|
</code></pre>
|
|||
|
|
|
|||
|
|
<aside class="notes">
|
|||
|
|
If a files doesn't have the front matter included, it will be copied as-is into the source directory.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>More Front Matter</h2>
|
|||
|
|
|
|||
|
|
<pre><code data-trim>
|
|||
|
|
---
|
|||
|
|
layout: post
|
|||
|
|
title: New Blog Post
|
|||
|
|
draft: yes
|
|||
|
|
tags:
|
|||
|
|
- drupal
|
|||
|
|
- sculpin
|
|||
|
|
- phpsw
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# My New Blog Post
|
|||
|
|
</code></pre>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>Even More Front Matter</h2>
|
|||
|
|
|
|||
|
|
<pre><code data-trim>
|
|||
|
|
---
|
|||
|
|
layout: post
|
|||
|
|
title: New Blog Post
|
|||
|
|
draft: yes
|
|||
|
|
tags:
|
|||
|
|
- drupal
|
|||
|
|
- sculpin
|
|||
|
|
- phpsw
|
|||
|
|
tweets: yes
|
|||
|
|
foo: bar
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# My New Blog Post
|
|||
|
|
</code></pre>
|
|||
|
|
|
|||
|
|
<aside class="notes">
|
|||
|
|
You can keep adding more things, including arbitrary things.
|
|||
|
|
Used in my talks for URLs to slide decks, event name, location etc.
|
|||
|
|
</aside>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>Using on Pages</h2>
|
|||
|
|
|
|||
|
|
<pre><code data-trim class="php">
|
|||
|
|
---
|
|||
|
|
...
|
|||
|
|
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 %}
|
|||
|
|
</code></pre>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h2>Content Types</h2>
|
|||
|
|
|
|||
|
|
<p>Sculpin does custom content types!</p>
|
|||
|
|
|
|||
|
|
<pre><code data-trim>
|
|||
|
|
# app/config/sculpin_kernel.yml
|
|||
|
|
|
|||
|
|
sculpin_content_types:
|
|||
|
|
projects:
|
|||
|
|
permalink: projects/:slug_title/
|
|||
|
|
</code></pre>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h2>Accessing Custom Content Types</h2>
|
|||
|
|
|
|||
|
|
<pre><code data-trim>
|
|||
|
|
---
|
|||
|
|
title: My Projects
|
|||
|
|
layout: default
|
|||
|
|
use:
|
|||
|
|
- projects
|
|||
|
|
---
|
|||
|
|
{% for project in data.projects %}
|
|||
|
|
<h2> {{ project.title }} </h2>
|
|||
|
|
{% endfor %}
|
|||
|
|
</code></pre>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<section>
|
|||
|
|
<h2>Extending Sculpin</h2>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>Custom (Symfony) bundles</li>
|
|||
|
|
<li>Twig extensions</li>
|
|||
|
|
<li>Other Symfony components or PHP libraries</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Integrating <a href="https://twitter.com/getsculpin">@getsculpin</a> and some <a href="https://twitter.com/symfony">@symfony</a> components for new <a href="https://twitter.com/supportyard">@supportyard</a> website is very powerful and productive. Should blog about it!</p>— Pera Jovic (@_korso_) <a href="https://twitter.com/_korso_/status/652218502871433216">October 8, 2015</a></blockquote>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section data-markdown>
|
|||
|
|
## Resources
|
|||
|
|
|
|||
|
|
[http://bit.ly/sculpin-twig-resources](http://bit.ly/sculpin-twig-resources)
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section data-markdown>
|
|||
|
|
## Questions?
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section data-markdown>
|
|||
|
|
## Feedback
|
|||
|
|
|
|||
|
|
[https://joind.in/talk/view/15486](https://joind.in/talk/view/15486)
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</div> <!-- /.slides -->
|
|||
|
|
</div> <!-- /.reveal -->
|
|||
|
|
|
|||
|
|
<script src="lib/js/head.min.js"></script>
|
|||
|
|
<script src="js/reveal.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
// Full list of configuration options available at:
|
|||
|
|
// https://github.com/hakimel/reveal.js#configuration
|
|||
|
|
Reveal.initialize({
|
|||
|
|
controls: true,
|
|||
|
|
progress: true,
|
|||
|
|
history: true,
|
|||
|
|
center: true,
|
|||
|
|
|
|||
|
|
transition: 'slide', // none/fade/slide/convex/concave/zoom
|
|||
|
|
|
|||
|
|
// Optional reveal.js plugins
|
|||
|
|
dependencies: [
|
|||
|
|
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
|||
|
|
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|||
|
|
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
|||
|
|
{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
|
|||
|
|
{ src: 'plugin/zoom-js/zoom.js', async: true },
|
|||
|
|
{ src: 'plugin/notes/notes.js', async: true }
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|