Search
Alto is a minimal and modern template for static documentation sites.
Alto is a minimal and modern Hugo template for static documentation sites, created by and optimized for CloudCannon. Browse through a live demo.
Designed initially for open-source software, Alto has many built-in features to aid both site users and documentation writers:
CloudCannon uses Alto as the documentation site template for our own open-source tools. Take a look at these sample sites to see what's possible with static documentation on Alto:
alpinejs to be installed by the site.Required information can be seen in the data/meta.yml
project_name
default_og_image
favicon
This site template is intended to be used as a documentation site with a landing page.
content/_index.md should be used for the homepage.content/docs/_index.md represents the /docs/ page.docs will live at their respective path.
content/docs/this/that.md represents /docs/this/that/title
nav_title
nav_section
weight
The site side-navigation only supports one level of nesting, and is configured via the nav_section front matter.
The top-level groups are in the order that they are first encountered after sorting all pages by weight. Lowering a page's weight may move the nav_section for that page up the hierarchy.
Pages can be placed outside of a group (alongside the homepage) by assigning them the nav_section of Root.
This template provides a diffcode shortcode that can provide source highlighting alongside diff highlighting. This shortcode should wrap a markdown code block that has a tagged language. For example, from the pagefind docs:
{{< diffcode >}}
```js
new PagefindUI({
element: "#search",
+ mergeIndex: [{
+ bundlePath: "https://docs.example.com/_pagefind"
+ }]
})
```
{{< /diffcode >}}
The code block will be rendered with the leading + removed from each line, and those lines will then be highlighted green to represent a diff.
This template provides a tree shortcode that can help render an ASCII directory tree structure. The given char (default >) will be replaced with the appropriate box drawing character from the supported set. For example:
{{% tree %}}
package.json
_includes/
>> _layouts/
> >> default.liquid
> >> page.liquid
>> file.liquid
_site/
>> index.html
{{% /tree %}}
Will output:
package.json
_includes/
├─ _layouts/
│ ├─ default.liquid
│ └─ page.liquid
└─ file.liquid
_site/
└─ index.html
The tree shortcode delegates its output to diffcode automatically, so lines can be prepended with a + character to represent new files.
All headings on doc pages will have a clickable hash link inserted in the left gutter.
data/banner.yml can be provided to show a banner on the top of each page:
enable_banner
true to show the bannerhtml
<p> tag) to show in the banner. Supports adding alpine directives.id
show_until
Alto is a minimal and modern Eleventy template for static documentation sites, created by and optimized for CloudCannon. Browse through a live demo.
Designed initially for open-source software, Alto has many built-in features to aid both site users and documentation writers:
CloudCannon uses Alto as the documentation site template for our own open-source tools. Take a look at these sample sites to see what's possible with static documentation on Alto:
alpinejs to be installed by the site.Required information can be seen in the data/meta.yml
project_name
default_og_image
favicon
This site template is intended to be used as a documentation site with a landing page.
pages/index.md should be used for the homepage.docs/_index.md represents the /docs/ page.docs will live at their respective path.
docs/this/that.md represents /docs/this/that/title
eleventyNavigation > key
tags
order
The site side-navigation only supports one level of nesting, and is configured via the eleventyNavigation front matter.
The top-level groups (tags: 'page') are in the order that they are first encountered after sorting all pages by order. Lowering a page's weight may move the eleventyNavigation for that page up the hierarchy.
Pages can be placed outside of a group (alongside the homepage) by assigning them the tags of page.
This template provides a diffcode shortcode that can provide source highlighting alongside diff highlighting. This shortcode should wrap a markdown code block that has a tagged language. For example, from the pagefind docs:
{% capture content %}
```js
new PagefindUI({
element: "#search",
+ mergeIndex: [{
+ bundlePath: "https://docs.example.com/_pagefind"
+ }]
})
```
{% endcapture %}
{% diffcode content %}
The code block will be rendered with the leading + removed from each line, and those lines will then be highlighted green to represent a diff.
This template provides a tree shortcode that can help render an ASCII directory tree structure. The given char (default >) will be replaced with the appropriate box drawing character from the supported set. For example:
{% capture treecontent %}
package.json
_includes/
>> _layouts/
> >> default.liquid
> >> page.liquid
>> file.liquid
_site/
>> index.html
{% endcapture %}{% tree treecontent %}
Will output:
package.json
_includes/
├─ _layouts/
│ ├─ default.liquid
│ └─ page.liquid
└─ file.liquid
_site/
└─ index.html
The tree shortcode delegates its output to diffcode automatically, so lines can be prepended with a + character to represent new files.
All headings on doc pages will have a clickable hash link inserted in the left gutter.
data/banner.yml can be provided to show a banner on the top of each page:
enable_banner
true to show the bannerhtml
<p> tag) to show in the banner. Supports adding alpine directives.id
show_until