1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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 <n@nc0.fr>
---
# 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ .Title }}</title>
<meta name="description" content="{{ .Description }}">
<meta name="keywords" content="{{ .Keywords }}">
<meta name="author" content="{{ .Author }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
</head>
<body>
{{ .Content }}
</body>
</html>
```
> 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:
You can now serve the `dist` directory with your favorite web server.
Here is the `index.html` file generated by Crocc:
## 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/).
|
