You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 11KB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. # Gutenberg
  2. [![Build Status](https://travis-ci.org/Keats/gutenberg.svg?branch=master)](https://travis-ci.org/Keats/gutenberg)
  3. [![Build status](https://ci.appveyor.com/api/projects/status/h4t9r6h5gom839q0/branch/master?svg=true)](https://ci.appveyor.com/project/Keats/gutenberg/branch/master)
  4. [![Chat](https://img.shields.io/gitter/room/gitterHQ/gitter.svg)](https://gitter.im/gutenberg-rs/Lobby#)
  5. An opinionated static site generator written in Rust.
  6. ## Installation
  7. You can get the latest release by going to the [Release page](https://github.com/Keats/gutenberg/releases).
  8. Alternatively, if you have the rust toolchain on your computer, you can also install it
  9. through Cargo: `cargo install gutenberg`.
  10. ## Usage
  11. ### Creating a new site
  12. Use `gutenberg init <a_directory_name>`.
  13. This will create a folder with the name given and the base structure of a gutenberg site.
  14. ### Working on a site
  15. Use `gutenberg serve` to spin up a server that will automatically live reload any changes to the
  16. content, templates or static files.
  17. ### Building a site
  18. Use `gutenberg build` to generate the site in the `public/` directory.
  19. ### Gutenberg terms
  20. Some words are going to be repeated in the docs so let's make sure they are clear.
  21. - Page: a markdown file in the `content` directory that has a name different from `_index.md`
  22. - Section: a group of pages in the `content` directory that has `_index.md` in the same folder
  23. ### Configuration
  24. Configuration is using the [TOML](https://github.com/toml-lang/toml) language.
  25. Only 2 parameters are required: `title` and `base_url`.
  26. The other options are:
  27. - `highlight_code`: Whether to highlight all code blocks found in markdown files. Defaults to false
  28. - `highlight_theme`: Which themes to use for code highlighting. Defaults to "base16-ocean-dark"
  29. - `language_code`: The language used in the site. Defaults to "en"
  30. - `generate_rss`: Whether to generate RSS, defaults to false
  31. - `generate_tags_pages`: Whether to generate tags and individual tag pages if some pages have them. Defaults to true
  32. - `generate_categories_pages`: Whether to generate categories and individual category categories if some pages have them. Defaults to true
  33. If you want to add some of your own variables, you will need to put them in the `[extra]` table in `config.toml` or
  34. they will be silently ignored.
  35. ### Templates
  36. Templates live in the `templates/` directory and the files need to end by `.html`.
  37. Only [Tera](https://github.com/Keats/tera) templates are supported.
  38. Each kind of page get their own variables:
  39. // TODO: detail the schema of the variables
  40. - index.html: gets `pages` that contain all pages in the site
  41. - page.html: gets `page` that contains the data for that page
  42. - section.html: gets `section` that contains the data for pages in it and its subsections
  43. - tags.html: gets `tags`
  44. - tag.html: gets `tag` and `pages`
  45. - categories.html: gets `categories`
  46. - category.html: gets `category` and `pages`
  47. Additionally, all pages get a `config` variable representing the data in `config.toml`, `current_url` that represent
  48. the absolute URL of the current page and `current_path` that represents the path of the URL of the current page, starting with `/`.
  49. If you want to know all the data present in a template content, simply put `{{ __tera_context }}`
  50. in the templates and it will print it.
  51. ### Static files
  52. Everything in the `static` folder will be copied into the output directory as-is.
  53. ### Pages
  54. Pages have to start with a front-matter enclosed in `+++`. Here is a minimal example:
  55. ```md
  56. +++
  57. title = "My page"
  58. description = "Some meta info"
  59. +++
  60. A simple page with fixed url
  61. ```
  62. A front-matter has only optional variables:
  63. - title
  64. - description
  65. - date: a YYYY-MM-DD or RFC339 formatted date
  66. - slug: what slug to use in the url
  67. - url: this overrides the slug and make this page accessible at `{config.base_url}/{url}`
  68. - tags: an array of strings
  69. - category: only one category is allowed
  70. - draft: whether the post is a draft or not
  71. - template: if you want to change the template used to render that specific page
  72. Even if your front-matter is empty, you will need to put the `+++`.
  73. You can also, like in the config, add your own variables in a `[extra]` table.
  74. The front-matter will be accessible in templates at the `page.meta` field.
  75. By default, the URL of a page will follow the filesystem paths. For example, if you have
  76. a page at `content/posts/python3.md`, it will be available at `{config.base_url}/posts/python3/`.
  77. You can override the slug created from the filename by setting the `slug` variable in the front-matter.
  78. Quite often, a page will have assets and you might want to co-locate them with the markdown file.
  79. Gutenberg supports that pattern out of the box: you can create a folder, put a file named `index.md` and any number of files
  80. along with it that are NOT markdown.
  81. Those assets will be copied in the same folder when building so you can just use a relative path to use them.
  82. A summary is only defined if you put `<!-- more -->` in the content. If present in a page, the summary will be from
  83. the start up to that tag.
  84. ### Sections
  85. Sections represent a group of pages, for example a `tutorials` section of your site.
  86. Sections are only created in Gutenberg when a file named `_index.md` is found in the `content` directory.
  87. This `_index.md` file needs to include a front-matter as well, but won't have content:
  88. ```md
  89. +++
  90. title = "Tutorials"
  91. +++
  92. ```
  93. You can also set the `template` variable to change which template will be used to render that section.
  94. Sections will also automatically pick up their subsections, allowing you to make some complex pages layout and
  95. table of contents.
  96. You can define how a section pages are sorted using the `sort_by` key in the front-matter. The choices are `date`, `order`
  97. and `none` (default). Pages that can't be sorted will currently be silently dropped: the final page will be rendered but it will not appear in
  98. the `pages` variable in the section template.
  99. A special case is the `_index.md` at the root of the `content` directory which represents the homepage. It is only there
  100. to control pagination and sorting of the homepage.
  101. You can also paginate section, including the index by setting the `paginate_by` field in the front matter to an integer.
  102. This represents the number of pages for each pager of the paginator.
  103. You will need to access pages through the `paginator` object. (TODO: document that).
  104. ### Code highlighting themes
  105. Code highlighting can be turned on by setting `highlight_code = true` in `config.toml`.
  106. When turned on, all text between backticks will be highlighted, like the example below.
  107. ```rust
  108. let site = Site::new();
  109. ```
  110. If the name of the language is not given, it will default to plain-text highlighting.
  111. Gutenberg uses Sublime Text themes for syntax highlighting. It comes with the following theme
  112. built-in:
  113. - base16-ocean-dark
  114. - base16-ocean-light
  115. - gruvbox-dark
  116. - gruvbox-light
  117. - inspired-github
  118. - kronuz
  119. - material-dark
  120. - material-light
  121. - monokai
  122. - solarized-dark
  123. - solarized-light
  124. ### Internal links
  125. You can have internal links in your markdown that will be replaced with the full URL when rendering.
  126. To do so, use the normal markdown link syntax, start the link with `./` and point to the `.md` file you want
  127. to link to. The path to the file starts from the `content` directory.
  128. For example, linking to a file located at `content/pages/about.md` would be `[my link](./pages/about.md)`.
  129. ### Anchors
  130. Headers get an automatic id from their content in order to be able to add deep links. By default no links are actually created but
  131. the `insert_anchor_links` option in `config.toml` can be set to `true` to link tags. The default template is very ugly and will need
  132. CSS tweaks in your projet to look decent. The default template can also be easily overwritten by creating a `anchor-link.html` file in
  133. the `templates` directory.
  134. ### Shortcodes
  135. Gutenberg uses markdown for content but sometimes you want to insert some HTML, for example for a YouTube video.
  136. Rather than copy/pasting the HTML around, Gutenberg supports shortcodes, allowing you to define templates using Tera and call those templates inside markdown.
  137. #### Using a shortcode
  138. There are 2 kinds of shortcodes: simple ones and those that take some content as body. All shortcodes need to be preceded by a blank line or they
  139. will be contained in a paragraph.
  140. Simple shortcodes are called the following way:
  141. ```markdown
  142. {{ youtube(id="my_youtube_id") }}
  143. ```
  144. Shortcodes with a body are called like so:
  145. ```markdown
  146. {% quote(author="Me", link="https://google.com") %}
  147. My quote
  148. {% end %}
  149. ```
  150. The shortcodes names are taken from the files they are defined in, for example a shortcode with the name youtube will try to render
  151. the template at `templates/shortcodes/youtube.html`.
  152. #### Built-in shortcodes
  153. Gutenberg comes with a few built-in shortcodes:
  154. - YouTube: embeds a YouTube player for the given YouTube `id`. Also takes an optional `autoplay` argument that can be set to `true`
  155. if wanted
  156. - Vimeo: embeds a Vimeo player for the given Vimeo `id`
  157. - Gist: embeds a Github gist from the `url` given. Also takes an optional `file` argument if you only want to show one of the files.
  158. #### Defining a shortcode
  159. All shortcodes need to be in the `templates/shortcodes` folder and their files to end with `.html`.
  160. Shortcodes templates are simple Tera templates, with all the args being directly accessible in the template.
  161. In case of shortcodes with a body, the body will be passed as the `body` variable.
  162. ## Example sites
  163. - [vincent.is](https://vincent.is): https://gitlab.com/Keats/vincent.is
  164. ## Adding syntax highlighting languages and themes
  165. ### Adding a syntax
  166. Syntax highlighting depends on submodules so ensure you load them first:
  167. ```bash
  168. $ git submodule update --init
  169. ```
  170. Gutenberg only works with syntaxes in the `.sublime-syntax` format. If your syntax
  171. is in `.tmLanguage` format, open it in Sublime Text and convert it to `sublime-syntax` by clicking on
  172. Tools > Developer > New Syntax from ... and put it at the root of `sublime_syntaxes`.
  173. You can also add a submodule to the repository of the wanted syntax:
  174. ```bash
  175. $ cd sublime_syntaxes
  176. $ git submodule add https://github.com/elm-community/Elm.tmLanguage.git
  177. ```
  178. Note that you can also only copy manually the updated syntax definition file but this means
  179. Gutenberg won't be able to automatically update it.
  180. You can check for any updates to the current packages by running:
  181. ```bash
  182. $ git submodule update --remote --merge
  183. ```
  184. And finally from the root of the repository run the following command:
  185. ```bash
  186. $ cargo run --example generate_sublime synpack sublime_syntaxes sublime_syntaxes/newlines.packdump sublime_syntaxes/nonewlines.packdump
  187. ```
  188. ### Adding a theme
  189. A gallery containing lots of themes at https://tmtheme-editor.herokuapp.com/#!/editor/theme/Agola%20Dark.
  190. More themes can be easily added to gutenberg, just make a PR with the wanted theme added in the `sublime_themes` directory
  191. and run the following command from the repository root:
  192. ```bash
  193. $ cargo run --example generate_sublime themepack sublime_themes sublime_themes/all.themedump
  194. ```
  195. You should see the list of themes being added.