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>
|