--- 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/).