From e73ab4a851989e8f0dcfbb0a52c4ad75f63883da Mon Sep 17 00:00:00 2001 From: Nicolas Paul Date: Thu, 27 Apr 2023 00:09:29 +0200 Subject: Add more detailled documentation --- doc/src/example.md | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 doc/src/example.md (limited to 'doc/src/example.md') diff --git a/doc/src/example.md b/doc/src/example.md new file mode 100644 index 0000000..f608f63 --- /dev/null +++ b/doc/src/example.md @@ -0,0 +1,119 @@ +--- +title: Example +description: Crocc is a simple and fast static-site generator based on Markdown. +keywords: + - crocc + - markdown + - html + - go + - golang + - static + - site + - generator + - ssg + - website + - simple +publication_time: 2023-04-27T00:08:00Z +author: Nicolas Paul +--- +# Example + +First, make sure you have Crocc installed on your system. +If not, see the [installation](/#installation) page. + +Now, let's create a new Crocc website: + +First, create a new Crocc project: + +```bash +$ mkdir my-website +``` + +The `my-website` directory will contains all the file composing the site. + +Inside this directory, create a `.crocc.html` file. +This file contains the HTML template used to generate HTML documents. +For example, you can use the following template: + +```html + + + + + {{ .Title }} + + + + + + + + {{ .Content }} + + +``` + +> More information about the template syntax can be found in the +> [template documentation](/doc/templates) page. + +Then, create a `index.md` file next to the template file. +Each Markdown file will be converted to an HTML file. + +```markdown +--- +title: My website +description: This is my website. +keywords: + - my + - website + - example +publication_time: 2023-04-26T19:05:00Z +author: John Doe +--- +# My website + +This is my website. +``` + +Every Markdown file must have a header containing metadata about the document. +This header is known as YAML front matter. More information about it are +available in the [front matter documentation](/doc/markdown) page. + +Before building the website, we need to create a `style.css` file in the +source directory. +As with other non-Markdown file, this file will be directly copied to the +output directory. + +```css +body { + font-family: sans-serif; + color: #f2c933; /* yellow-ish */ + background-color: #1f1f1f; /* dark grey */ +} +``` + +Now, we can build the website: + +```bash +$ crocc -out=dist -url="https://example.com" my-website +``` + +The `-out` flag specifies the output directory, and the `-url` flag specifies +the base URL of the website. + +The `dist` directory now contains the generated website: + +![Screenshot of the generated dist directory](/assets/example_dist.png) + +You can now serve the `dist` directory with your favorite web server. +Here is the `index.html` file generated by Crocc: + +![Screenshot of the generated index.html file](/assets/example_index.png) + +## Conclusion + +This example is very simple, but it shows the main features of Crocc. +For more information, see the [documentation](/doc) page. + +This website itself is built with Crocc, and its source code is available +[here](https://github.com/n1c00o/crocc/tree/master/doc/). -- cgit v1.2.3