Skip to content
Invisible link to canonical for Microformats

Chulapa demos

All demos in one place

Choose a starter example to see a blog, technical blog, portfolio or project configuration. Each starter demo shows its YAML header.

This is an example of how to create an index for a specific collection, in this case demo.

The following front matter selects the demo collection, orders it by file name ascending so the numbered demos appear first, and raises the default limit of 10 cards to 100:

---
layout: indexcategory
title: "Demos"
subtitle: All demos in one place
permalink: /demo
include_collection: demo
index_sort: path
index_sort_asc: true
index_items: 100
og_image: /assets/img/site/banner-demos.png
---

Plain page
This example shows a plain page. The layout and header type are set as defaults in _config.yml:

demolayout-defaultheader-base

demolayout-defaultheader-baseimagesocial-linkstagscategoriesbottom-navs

Post header
This page shows the post header with the default author set on your _config.yml file. It also shows the date on top of the content.

demolayout-defaultheader-postsocial-linkstagscategoriesbottom-navsauthordaterandom

Use MathJax

Project page with a hero header

This page shows a hero header with project buttons, MathJax and a modified date.

demolayout-defaultheader-heromathjaxsocial-linkstagscategoriesbottom-navsdateproject-linkscomments

Landing page

First impression is the last impression

This page shows the hero header with an image with the landingpage layout.

demolandingpagerelatedlayout-landingpageheader-herosocial-linkstagscategoriesbottom-navsdatecommentsimageauthor

A guest author

And with a new project

This page shows how a contributor could be added to your blog. In this case Octocat is telling us about its plans for the next few months…

demoauthor-guestlayout-defaultheader-splashsocial-linkstagscategoriesbottom-navsdatecommentsproject-linksauthorauthor-guest

Guest author

But no location or image

This page shows how a contributor could be added to your blog, but without an avatar or location. Octocat is shy today.

demoauthor-guestlayout-defaultheader-basesocial-linkstagscategoriesbottom-navsdatecommentsauthorauthor-guestno-avatarno-location

demolayoutlayout-minimalheader-splashimageproject-linksbootstrap

Image on header

Transparencies work better

This page shows the image header. It is recommended to use a .png file with a transparent background to blend into the header. Choose dimensions suitable for the displayed image; transparency is optional.

demolayoutlayout-defaultheader-imageimage

Plain page with no tags

Corner case

This page enables tag and category badges but supplies neither tags nor categories. No badges are rendered.

Related
This page enables the related cards with show_related: true. Related documents appear at the bottom, selected by shared tags and collection. See the layout options.

demolayout-defaultheader-postsocial-linkstagscategoriesbottom-navsauthordaterelated

demolayout-defaultheader-postsocial-linkstagscategoriesbottom-navsauthordaterelatedrandom

Mermaid diagrams

Flowcharts and sequence diagrams from Markdown

Mermaid support is available in v2.2.0 and later. Follow Add a Mermaid diagram to enable diagrams on your page. See the Mermaid reference for browser requirements, security restrictions and fallback behavior. The diagrams below show a publishing workflow and how rendering works in the browser.

demolayout-defaultheader-postsocial-linkstagscategoriesbottom-navsauthordatemermaiddiagramsmarkdown

PhotoSwipe image galleries

Open, zoom and explore images

PhotoSwipe support is available in v2.2.0 and later. Follow Enable PhotoSwipe on a gallery to add the viewer to an existing gallery or carousel. No page YAML setting is needed. Each gallery opens its own sequence; images remain ordinary links when JavaScript is disabled or the library cannot load.

demolayout-defaultheader-postgalleriesphotoswipeimages

My journal starter

Stories, places and everyday discoveries

This annotated example shows home-page source and sample content from personal-blog. It runs inside the documentation site, using this site’s skin and configuration; it is not the standalone example’s home page. The full folder includes its own Gemfile and _config.yml, with no publishing workflow.

starterstarterpersonal-blog

My portfolio starter

Selected projects and the work behind them

This annotated example shows home-page source and sample content from portfolio. It runs inside the documentation site, using this site’s skin and configuration; it is not the standalone example’s home page. The full folder includes its own Gemfile and _config.yml, with no publishing workflow.

starterstarterportfolio

My project starter

An open source project with a clear starting point

This annotated example shows home-page source and sample content from project. It runs inside the documentation site, using this site’s skin and configuration; it is not the standalone example’s home page. The full folder includes its own Gemfile and _config.yml, with no publishing workflow.

starterstarterproject

Engineering notes starter

Code examples, diagrams and practical tutorials

This annotated example shows home-page source and sample content from technical-blog. It runs inside the documentation site, using this site’s skin and configuration; it is not the standalone example’s home page. The full folder includes its own Gemfile and _config.yml, with no publishing workflow.

starterstartertechnical-blog