Back to documentation
# PODNAME: Statocles::Help::Config
# ABSTRACT: A guide to configuring a Statocles site
=head1 DESCRIPTION
This document describes how to set up a simple blog web site suitable to
be deployed to GitHub Pages using Statocles.
This document explains how to build a configuration file without using
the C<statocles create> command.
=head1 Building site.yml - The Main Configuration File
Statocles uses L<Beam::Wire|Beam::Wire>, a dependency-injection module, for
configuration. The format is L<YAML|http://yaml.org> and contains the data
needed to build the objects: Arguments to the object's constructor. This means
that any C<ATTRIBUTES> defined in the documentation can be used in the
configuration file.
The configuration file is, by default, called C<site.yml>. See
L<the statocles command documentation|statocles> if you want to have multiple
site configuration files.
=head2 A Source
Statocles takes simple, YAML-and-Markdown-formatted
L<document|Statocles::Document> files and builds HTML pages out of them.
So we need a place to put our source documents. A L<store|Statocles::Store>
fills multiple roles relating to reading and writing files. Right now, we need
it to hold on to our blog posts. We'll put our blog posts in the C<blog>
directory.
$ mkdir blog
The L<blog application|Statocles::App::Blog> will use this store to add new
blog posts and build web pages from the documents in the C<blog> directory.
More on that later.
=head2 An App
A L<Statocles app|Statocles::App> is the driver that turns documents into
L<pages|Statocles::Page>. To build pages, we need a store full of documents. We
define our store with the string C<blog>, which will get magically coerced into
a L<store object|Statocles::Store>.
Since we're building a blog site, we'll use the
L<Statocles blog app|Statocles::App::Blog>:
# site.yml
blog_app:
class: Statocles::App::Blog
args:
url_root: /blog
store: 'blog'
We put our blog app under the root URL C</blog>. All pages that come from this
app will start with C</blog> (except the index page, we'll move that to
C</>, later).
=head2 A Deploy
To deploy our site to Github, we need to build a L<deploy
object|Statocles::Deploy> for Git repositories using
L<Statocles::Deploy::Git|Statocles::Deploy::Git>. Our deploy object will copy
our built pages into the Git repository and commit them. Our deploy will happen
in the root directory of our site on the C<gh-pages> branch.
# site.yml
github_deploy:
class: Statocles::Deploy::Git
args:
branch: gh-pages
Though we are going to deploy to Git, we could also deploy to SFTP or FTP or
transfer the pages to a CDN. See L<Statocles::Help::Deploy> for more information.
=head2 A Theme
We could set up a theme (L<Statocles::Theme|Statocles::Theme>) to change how
our site looks, but for now, we'll use the C<default> theme included with
Statocles. See L<Statocles::Help::Theme> for information on how to change and
customize your theme.
=head2 A Site
Now that we're ready, we can tie it all together. A L<site|Statocles::Site> is
a collection of apps that build and deploy to the same place.
# site.yml
site:
class: Statocles::Site
args:
apps:
blog:
$ref: blog_app
deploy:
$ref: github_deploy
title: My Site
index: /blog
nav:
main:
- title: Blog
href: /
When adding apps to our site, we give them a name (in this case C<blog>) so
that we can refer to them on the command-line (later).
As part of the default template, we can provide a site C<title>.
The C<index> attribute gives the path to the page to use as our index page.
Since the blog's C<url_root> is C</blog>, this will move the main blog page
to the main site index C</>.
Finally, we can define a C<nav> list, again giving a name: C<main>. The
default template uses the C<main> nav across the top.
=head2 The Complete site.yml
Combine it all together and you get this. Feel free to copy and paste to start
your own site.
# site.yml
blog_app:
class: Statocles::App::Blog
args:
url_root: /blog
store: 'blog'
github_deploy:
class: Statocles::Deploy::Git
args:
branch: gh-pages
site:
class: Statocles::Site
args:
apps:
blog:
$ref: blog_app
deploy:
$ref: github_deploy
title: My Site
index: /blog
nav:
main:
- title: Blog
href: /
B<NOTE:> One of the most useful things about using a dependency injection
module is that you can easily plug-in your own classes. If you want to use your
own template format, you can build your own Statocles::Theme class that
provides a different kind of Statocles::Template object and use that instead.
If you want to use your own document format, you can make your own
Statocles::Store class that reads from a database.
=head1 The C<statocles> Command
Now that we have a C<site.yml>, we can run the L<statocles|statocles> command
to manage our site.
See L<Statocles::Help::Content> for more information about editing the site's
content.
=head1 Adding More Apps
In addition to our blog app, we also want to add some plain Markdown content, and some
images.
=head2 Basic Pages
For basic pages with no structure or extras, there is the L<basic app:
Statocles::App::Basic|Statocles::App::Basic>. The basic app takes the same
YAML-and-Markdown-formatted documents as the blog app and creates HTML pages,
without the lists, tags, and feeds the blog generates. The basic app
also takes any other files (HTML, images, audio, video, and other
formats) and copies them into the deployed site..
Like the blog, we need a store to find our documents. This time, we'll use the
root directory of our repository, C<.>. Finally, we'll need a URL root. Since
we're using the root directory for our documents, we'll use the root URL for
our destination C</>.
# site.yml
basic_app:
class: Statocles::App::Basic
args:
url_root: '/'
store: '.'
=head2 Add the New Apps
To enable the new app, we just need to add it to the site's C<apps>.
# site.yml
site:
class: Statocles::Site
args:
apps:
blog:
$ref: blog_app
basic:
$ref: basic_app
deploy:
$ref: github_deploy
title: My Site
index: /blog
nav:
main:
- title: Blog
href: /
=head2 Add Basic Content
Now, we just need some content for our basic app to deploy. The basic app uses the same
format as the blog, so we need a YAML header followed by some Markdown content:
Create a file named C<about.markdown> with the following content:
---
title: About
---
# About Me
This is a personal website!
Then, run C<statocles daemon> to test the new page.
Now we should probably make a link in our main nav to the new about page:
# site.yml
site:
class: Statocles::Site
args:
apps:
blog:
$ref: blog_app
basic:
$ref: basic_app
deploy:
$ref: github_deploy
title: My Site
index: /blog
nav:
main:
- title: Blog
href: /
- title: About
href: /about.html
Now, if we run C<statocles build> again, we can see the link in our header.
=head2 The Complete site.yml - With More Apps
Along with the blog app and our other settings, here is our new, complete site.yml:
# site.yml
blog_app:
class: Statocles::App::Blog
args:
url_root: /blog
store: 'blog'
basic_app:
class: Statocles::App::Basic
args:
url_root: '/'
store: '.'
github_deploy:
class: Statocles::Deploy::Git
args:
branch: gh-pages
site:
class: Statocles::Site
args:
apps:
blog:
$ref: blog_app
basic:
$ref: basic_app
deploy:
$ref: github_deploy
title: My Site
index: /blog
nav:
main:
- title: Blog
href: /
- title: About
href: /about.html
If we're satisfied with our new About page, we can deploy our site with
C<statocles deploy>.
=head1 DEFAULT THEME FEATURES
There are special features built-in to all default themes that can be
enabled by adding the appropriate configuration to the site object or
app objects.
=head2 Shortcut Icons
To add a shortcut icon to your site, place the image file anywhere that
will be deployed (if you're using the configuration above, you can put
it in the root). Then, add an C<icon> property to the C<images> key of
the C<site> object, like so:
site:
class: Statocles::Site
args:
images:
icon:
src: /favicon.png
For more information, see L<the C<images> attribute
documentation|Statocles::Site/images>.
=head2 Additional Stylesheets and Scripts
You can easily add extra scripts and stylesheets by adding them to the
site's C<links> attribute:
site:
class: Statocles::Site
args:
links:
stylesheet:
- href: /css/site.css
script:
- href: /js/site.js
Create the files C</css/site.css> and C</js/site.js> and they will be
picked up by the C<basic_app> we created, above. If you accidentally
create a link to a file that doesn't exist, Statocles will warn you.
=head2 Service Integration
There are third-party services that can be integrated into your site by
adding keys to the C<data> configuration section.
=over 4
=item Disqus
Disqus is a free, hosted comment system that can be easily added to static
sites to provide some user interaction.
To add L<Disqus comments|http://disqus.com> to your blog, add your Disqus
shortname (from C<http://YOUR_NAME.disqus.com/admin>) to the site data, like
so:
# site.yml
site:
class: Statocles::Site
args:
# ...
data:
disqus:
shortname: 'YOUR_NAME'
This will add a comments section to the bottom of your blog posts, and show
the number of comments in the blog list pages.
=over 4
=item *
L<What is a short name?|https://help.disqus.com/customer/portal/articles/466208>
=item *
L<Sign up for Disqus|https://disqus.com/admin/signup/>
=back
=back
=head1 ADVANCED CONFIGURATION
The configuration file is a L<Beam::Wire> container. This means that any
object attributes (in the C<ATTRIBUTES> section of their documentation)
can be set from the config file.
=head2 Plugins
Additional functionality can be added by plugins using the site's
C<plugins> attribute:
# site.yml
site:
class: Statocles::Site
args:
# ...
plugins:
highlight:
$class: Statocles::Plugin::Highlight
$args:
theme: solarized-light
Each plugin has a name (C<highlight>), and requires a C<$class> (the
class name of the plugin) and optional C<$args> (the plugin's
attributes).
See L<the list of bundled plugins|Statocles::Plugin/BUNDLED PLUGINS>.
=head2 Custom Markdown
To use a custom Markdown parser, like L<Text::MultiMarkdown>, which has L<some
extra syntax
features|https://rawgit.com/fletcher/human-markdown-reference/master/index.html>,
you can use the L<site object's C<markdown> attribute|Statocles::Site/markdown>
to configure a custom object with C<$class> and optional C<$args>:
# site.yml
site:
class: Statocles::Site
args:
# ...
markdown:
$class: Text::MultiMarkdown
$args:
use_metadata: false
=head1 SEE ALSO
=over 4
=item L<Statocles::Help::Error - How to fix error messages from Statocles|Statocles::Help::Error>
=item L<Statocles::Help::Content - How to edit content with Statocles|Statocles::Help::Content>
=item L<Statocles::Help::Deploy - How to deploy a Statocles site|Statocles::Help::Deploy>
=item L<Statocles::Help::Theme - How to customize a Statocles theme|Statocles::Help::Theme>
=back