-
-
Notifications
You must be signed in to change notification settings - Fork 681
/
index.webc
321 lines (261 loc) · 15.3 KB
/
index.webc
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
---
eleventyNavigation:
key: Getting Started
title: Get Started
order: 2
communityLinksKey: getting-started
overrideCommunityLinks: true
---
<h1>Get Started</h1>
<template webc:type="11ty" 11ty:type="njk" webc:raw webc:nokeep>
{% callout %}
{% include "star-on-github.njk" %}
{% endcallout %}
</template>
<p>Eleventy <eleventy-version></eleventy-version> requires <strong><a href="https://nodejs.org/">Node.js</a> version <node-minimum></node-minimum></strong> or higher.</p>
<p>You can check whether or not you have Node installed by running <code>node --version</code> in a terminal application. (<a href="/docs/terminal-window/"><em>Well, wait—what is a Terminal?</em></a>) If the command is not found or it reports a number lower than <node-minimum></node-minimum>, you will need to <a href="https://nodejs.org/en/download/">download and install Node.js</a> before moving on to the next step.</p>
<p>Prefer to watch videos instead? Check out <a href="https://www.youtube.com/watch?v=kzf9A9tkkl4"><strong>6 minutes to Build a Blog from Scratch</strong></a>.</p>
<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>
## <span class="numberflag"><span class="sr-only">Step</span> 1</span> Make a Project Directory
Create a directory for your project using the `mkdir` command (short for _make directory_):
```bash
mkdir eleventy-sample
```
Now move into that directory with the `cd` command (short for _change directory_):
```bash
cd eleventy-sample
```
## <span class="numberflag"><span class="sr-only">Step</span> 2</span> Install Eleventy
### Create a `package.json`
Installing Eleventy into a project requires a `package.json` file.
</template>
<script type="module" src="/js/seven-minute-tabs.js" webc:keep></script>
<seven-minute-tabs class="tabs-flush tabs-right tabs-firstonly" persist sync>
<div role="tablist" aria-label="Choose your Package Manager">
<a href="#quickstart-run-2a-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>
<a href="#quickstart-run-2a-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>
<a href="#quickstart-run-2a-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>
</div>
<div id="quickstart-run-2a-npm" role="tabpanel">
<syntax-highlight language="bash">
npm init -y
</syntax-highlight>
<p>The <code>npm</code> command (included with Node.js) will create a <code>package.json</code> file for you with <a href="https://docs.npmjs.com/cli/init"><code>npm init -y</code></a>. The <code>-y</code> flag tells <code>npm</code> to use default values and skips the questionnaire.</p>
<p>Use the following command if you want to use <a href="/docs/cjs-esm.md">ESM in your project and not CommonJS</a>.</p>
<syntax-highlight language="bash">
npm pkg set type="module"
</syntax-highlight>
</div>
<div id="quickstart-run-2a-pnpm" role="tabpanel">
<syntax-highlight language="bash">
pnpm init
</syntax-highlight>
<p>Learn more about <a href="https://pnpm.io/">pnpm</a> (it requires separate installation).</p>
</div>
<div id="quickstart-run-2a-yarn" role="tabpanel">
<syntax-highlight language="bash">
yarn init
</syntax-highlight>
<p>Learn more about <a href="https://yarnpkg.com/">yarn</a> (it requires separate installation).</p>
</div>
</seven-minute-tabs>
<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>
### Install Eleventy
[`@11ty/eleventy` is published on npm](https://www.npmjs.com/package/@11ty/eleventy) and we can install and save it into our project’s `package.json` by running:
</template>
<seven-minute-tabs class="tabs-flush tabs-right tabs-firstonly" persist sync>
<div role="tablist" aria-label="Choose your Package Manager">
<a href="#quickstart-run-2b-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>
<a href="#quickstart-run-2b-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>
<a href="#quickstart-run-2b-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>
</div>
<div id="quickstart-run-2b-npm" role="tabpanel">
<syntax-highlight language="bash">
npm install @11ty/eleventy
</syntax-highlight>
</div>
<div id="quickstart-run-2b-pnpm" role="tabpanel">
<syntax-highlight language="bash">
pnpm install @11ty/eleventy
</syntax-highlight>
</div>
<div id="quickstart-run-2b-yarn" role="tabpanel">
<syntax-highlight language="bash">
yarn add @11ty/eleventy
</syntax-highlight>
</div>
</seven-minute-tabs>
<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>
_You may also [install Eleventy globally](/docs/global-installation/) but the `package.json` installation method above is recommended._
## <span class="numberflag"><span class="sr-only">Step</span> 3</span> Run Eleventy
</template>
<seven-minute-tabs class="tabs-flush tabs-right tabs-firstonly" persist sync>
<div role="tablist" aria-label="Choose your Package Manager">
<a href="#quickstart-run-3a-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>
<a href="#quickstart-run-3a-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>
<a href="#quickstart-run-3a-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>
</div>
<div id="quickstart-run-3a-npm" role="tabpanel">
<syntax-highlight language="bash">
npx @11ty/eleventy
</syntax-highlight>
<p>We can use the <code>npx</code> command (also provided by Node.js) to run our local project's version of Eleventy.</p>
</div>
<div id="quickstart-run-3a-pnpm" role="tabpanel">
<syntax-highlight language="bash">
pnpm exec eleventy
</syntax-highlight>
</div>
<div id="quickstart-run-3a-yarn" role="tabpanel">
<syntax-highlight language="bash">
yarn exec eleventy
</syntax-highlight>
</div>
</seven-minute-tabs>
<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>
Here’s what your command line might look like after you run Eleventy:
{% codewithprompt "lastlinegreen" %}
[11ty] Wrote 0 files in 0.03 seconds ({% latestVersion versions, config %})
{% endcodewithprompt %}
If you see `({% latestVersion versions, config %})` in your output you know you’re using the newest version. However, Eleventy didn’t process any files! This is expected—we have an empty folder with no templates inside.
## <span class="numberflag"><span class="sr-only">Step</span> 4</span> Create some templates
A <dfn>template</dfn> is a content file written in a [format such as Markdown, HTML, Liquid, Nunjucks, and more](/docs/languages/), which Eleventy transforms into a page (or pages) when building our site.
Let’s run two commands to create two new template files.
</template>
<seven-minute-tabs class="tabs-flush" persist sync>
<div role="tablist" aria-label="Choose your Operating System">
<a href="#quickstart-os-nix" id="quickstart-os-mac-btn" role="tab" data-tabs-persist="os:mac">macOS</a>
<a href="#quickstart-os-nix" role="tab" data-tabs-persist="os:posix">Linux</a>
<a href="#quickstart-os-win" role="tab" data-tabs-persist="os:win">Windows</a>
<a href="#quickstart-os-all" role="tab" data-tabs-persist="os:all">Cross Platform</a>
</div>
<div id="quickstart-os-nix" role="tabpanel">
<syntax-highlight language="bash">
echo '<!doctype html><title>Page title</title><p>Hi</p>' > index.html
echo '# Heading' > README.md
</syntax-highlight>
</div>
<div id="quickstart-os-win" role="tabpanel">
<syntax-highlight language="bash">
echo '<!doctype html><title>Page title</title><p>Hi</p>' | out-file -encoding utf8 'index.html'
echo '# Heading' | out-file -encoding utf8 'README.md'
</syntax-highlight>
<p>If the <code>out-file</code> command is not available in your Windows Terminal window (it’s PowerShell specific), use the Cross Platform method instead.</p>
</div>
<div id="quickstart-os-all" role="tabpanel">
<syntax-highlight language="bash">
npx @11ty/create index.html "<!doctype html><title>Page title</title><p>Hi</p>"
npx @11ty/create README.md "# Heading"
</syntax-highlight>
<p>Learn more about <a href="https://github.com/11ty/create"><code>@11ty/create</code></a> <em>(requires Node.js 18 or newer)</em>.</p>
</div>
</seven-minute-tabs>
<p>Alternatively, you can create these using any text editor—just make sure you save them into your project folder and they have the correct file extensions.</p>
<p>After you’ve created an HTML template and a Markdown template, let’s run Eleventy again with the following command:</p>
<seven-minute-tabs class="tabs-flush tabs-right tabs-firstonly" persist sync>
<div role="tablist" aria-label="Choose your Package Manager">
<a href="#quickstart-run-4-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>
<a href="#quickstart-run-4-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>
<a href="#quickstart-run-4-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>
</div>
<div id="quickstart-run-4-npm" role="tabpanel">
<syntax-highlight language="bash">
npx @11ty/eleventy
</syntax-highlight>
</div>
<div id="quickstart-run-4-pnpm" role="tabpanel">
<syntax-highlight language="bash">
pnpm exec eleventy
</syntax-highlight>
</div>
<div id="quickstart-run-4-yarn" role="tabpanel">
<syntax-highlight language="bash">
yarn exec eleventy
</syntax-highlight>
</div>
</seven-minute-tabs>
<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>
The output might look like this:
{% codewithprompt "lastlinegreen" %}
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Wrote 2 files in 0.04 seconds ({% latestVersion versions, config %})
{% endcodewithprompt %}
We’ve compiled our two content templates in the current directory into the output folder (`_site` is the default).
## <span class="numberflag"><span class="sr-only">Step</span> 5</span> Gaze upon your templates
Use `--serve` to start up a hot-reloading local web server.
</template>
<seven-minute-tabs class="tabs-flush tabs-right tabs-firstonly" persist sync>
<div role="tablist" aria-label="Choose your Package Manager">
<a href="#quickstart-run-5-npm" role="tab" data-tabs-persist="pkgmgr:npm">npm</a>
<a href="#quickstart-run-5-pnpm" role="tab" data-tabs-persist="pkgmgr:pnpm">pnpm</a>
<a href="#quickstart-run-5-yarn" role="tab" data-tabs-persist="pkgmgr:yarn">Yarn</a>
</div>
<div id="quickstart-run-5-npm" role="tabpanel">
<syntax-highlight language="bash">
npx @11ty/eleventy --serve
</syntax-highlight>
</div>
<div id="quickstart-run-5-pnpm" role="tabpanel">
<syntax-highlight language="bash">
pnpm exec eleventy --serve
</syntax-highlight>
</div>
<div id="quickstart-run-5-yarn" role="tabpanel">
<syntax-highlight language="bash">
yarn exec eleventy -- --serve
</syntax-highlight>
</div>
</seven-minute-tabs>
<template webc:type="11ty" 11ty:type="njk,md" webc:raw webc:nokeep>
Your command line might look something like:
<style>
#getting-started-serve .highlight-line:first-child + br + .highlight-line + br + .highlight-line,
#getting-started-serve .highlight-line:first-child + br + .highlight-line + br + .highlight-line * {
color: #0dbc79 !important;
}
#getting-started-serve .highlight-line:first-child + br + .highlight-line + br + .highlight-line + br + .highlight-line + br + .highlight-line,
#getting-started-serve .highlight-line:first-child + br + .highlight-line + br + .highlight-line + br + .highlight-line + br + .highlight-line * {
color: #4c8bcf !important;
}
</style>
{% codewithprompt "noop", "getting-started-serve" %}
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 2 files in 0.04 seconds ({% latestVersion versions, config %})
[11ty] Watching…
[11ty] Server at http://localhost:8080/
{% endcodewithprompt %}
Open `http://localhost:8080/` or `http://localhost:8080/README/` in your favorite web browser to see your Eleventy site live! When you save your template files—Eleventy will refresh the browser with your new changes automatically!
## <span class="numberflag"><span class="sr-only">Step</span> 6</span> Put it online (optional)
Head over to our [deployment documentation](/docs/deployment/) to read more about putting your Eleventy project online for everyone to see.
## <span class="numberflag"><span class="sr-only">Step</span> 7</span> Continue Learning…
Congratulations—you made something with Eleventy! Now put it to work:
1. Add more content! In the above tutorial we used [HTML](/docs/languages/html/) and [Markdown](/docs/languages/markdown/). Why not [JavaScript](/docs/languages/javascript/) or [WebC](/docs/languages/webc/) (for components) next? [Nunjucks](/docs/languages/nunjucks/) and [Liquid](/docs/languages/liquid/) are also very popular. Maybe you’re feeling super adventurous and want to [add your own custom type?](/docs/languages/custom/).
1. Use [a layout file so that you don’t have to repeat boilerplate on every template](/docs/layouts/).
1. Add a [configuration file](/docs/config/) to unlock advanced Eleventy capabilities!
1. Add [CSS, JavaScript, or Web Fonts](/docs/assets/) to your project.
1. Learn more of the [command line options for Eleventy](/docs/usage/).
1. Perhaps you’d like to [consume data from third party APIs](/docs/data-js/) in your project?
</template>
<h3>Tutorials and Starter Projects</h3>
<p>For folks wanting to <strong>build a blog</strong>, you can learn how to <a href="https://www.youtube.com/watch?v=kzf9A9tkkl4">start from scratch</a> <em>(learn how it works)</em> or use our <a href="https://github.com/11ty/eleventy-base-blog">official Blog starter project</a> <em>(get up and running faster)</em>:</p>
<sites-list @size="lg">
<site-card @url="https://www.youtube.com/watch?v=kzf9A9tkkl4" @name="6 Minutes to Build a Blog from Scratch with Eleventy" @date="2023-03-20" @medialength="6m"></site-card>
<site-card @url="https://github.com/11ty/eleventy-base-blog" @name="eleventy-base-blog (Official Starter Project)" @date=""></site-card>
<site-card @url="https://www.filamentgroup.com/lab/build-a-blog/" @name="Build your own Blog from Scratch using Eleventy" @date="2018-12-26"></site-card>
</sites-list>
<p>You can also use one of the many <a href="/docs/starter/"><strong>Starter Projects</strong></a> or read some of our excellent Community-contributed <a href="/docs/tutorials/"><strong>Tutorials</strong></a> (a curated few of which are included below):</p>
<sites-list @size="md">
<site-card @url="https://www.youtube.com/watch?v=BKdQEXqfFA0" @name="Build an 11ty Site in 3 Minutes" @date="2021-02-20" @medialength="3m"></site-card>
<site-card @url="https://www.learnwithjason.dev/lets-learn-eleventy" @name="Let’s Learn Eleventy! on Learn with Jason" @date="2020-01-08" @medialength="1h32m"></site-card>
<site-card @url="https://www.youtube.com/watch?v=rZyNBd1WgVM" @name="Templating: Eleventy’s Superpower" @date="2021-07-17" @medialength="15m"></site-card>
<site-card @url="https://learneleventyfromscratch.com/" @name="Learn Eleventy from Scratch" @date="2020-05"></site-card>
<site-card @url="https://tatianamac.com/posts/beginner-eleventy-tutorial-parti/" @name="Beginner’s Guide to Eleventy" @date="2020-04-02"></site-card>
<site-card @url="https://sia.codes/posts/itsiest-bitsiest-eleventy-tutorial/" @name="Itsiest, Bitsiest Eleventy Tutorial" @date="2021-05-24"></site-card>
<site-card @url="https://www.youtube.com/watch?v=4wD00RT6d-g" @name="Turn static HTML/CSS into a blog with CMS using the JAMStack" @date="2021-06-24" @medialength="1h23m"></site-card>
</sites-list>
<template webc:type="11ty" 11ty:type="njk" webc:raw webc:nokeep>
<h3>More From the Community</h3>
{% include "11tybundle.njk" %}
</template>