Pace

Simple static site generation

Using, Laravel Blade, Tailwind CSS, and Alpine.js

Installation

Create a new Pace project

composer create-project ellgreen/pace-template blog

This will create a directory named blog with the scaffolding for your new Pace application

Install the npm dependencies

npm install

Building the static site

For development

The following command will build the site into build/

npm run dev

Watching for changes + BrowserSync

To watch for changes in the files, and automatically rebuild the site, use:

npm run watch

Building the site for production

The following command will build the production ready static site into build_prod/

npm run prod

Serving the application

Development

The following command will serve the site to http://localhost:8000

./pace serve

Use the --prod option to serve the production site

Template

When you serve the initial template, it should look like this:

You can view the template here:

https://github.com/ellgreen/pace-template

Markdown

Using markdown in Pace is easy, just create a new page with the .md extension and write some markdown.

Embedding Markdown in Blade

To embed markdown in a blade view you can add the extends option to the yml front matter like so:

---
extends: components.layout.post
---

# This is my post

* **bold**
* *italic*
* `code`

The rendered markdown will then be made available to the template as the $markdown variable.

Adding metadata

You can pass extra metadata from the markdown to the view it extends like so:

---
extends: components.layout.post
title: This is my post
---

Post content goes **here**

Then it can be accessed in the blade view like this:

<section>
    <h1>{{ $page->title }}</h1>

    <x-markdown :markdown="$markdown" class="mt-6" />
</section>