forked from sheetjs/docs.sheetjs.com
91 lines
2.2 KiB
Markdown
91 lines
2.2 KiB
Markdown
|
---
|
||
|
|
title: Lume
|
||
|
|
pagination_prev: demos/extensions/index
|
||
|
|
pagination_next: demos/gsheet
|
||
|
|
sidebar_custom_props:
|
||
|
|
type: native
|
||
|
|
---
|
||
|
|
|
||
|
|
Lume is a lightweight, fast and flexible static site generator.
|
||
|
|
|
||
|
|
The official [Sheets plugin](https://lume.land/plugins/sheets/) uses SheetJS to
|
||
|
|
load data from spreadsheets. New users should consult the official docs.
|
||
|
|
|
||
|
|
Lume supports refreshing data during development. The generated static sites
|
||
|
|
include the raw data without referencing the underlying spreadsheet files.
|
||
|
|
|
||
|
|
## Lume Demo
|
||
|
|
|
||
|
|
:::note
|
||
|
|
|
||
|
|
This was tested against `lume v1.14.2` on 2022 December 27.
|
||
|
|
|
||
|
|
This example uses the Nunjucks template format. Lume plugins support additional
|
||
|
|
template formats, including Markdown and JSX.
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
1) Create a stock site:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
mkdir -p sheetjs-lume
|
||
|
|
cd sheetjs-lume
|
||
|
|
deno run -Ar https://deno.land/x/lume/init.ts
|
||
|
|
```
|
||
|
|
|
||
|
|
When prompted, enter the following options:
|
||
|
|
|
||
|
|
- `Use TypeScript for the configuration file`: press Enter (use default `N`)
|
||
|
|
- `Do you want to use plugins`: type `sheets` and press Enter
|
||
|
|
|
||
|
|
The project will be configured and modules will be installed.
|
||
|
|
|
||
|
|
2) Download <https://sheetjs.com/pres.numbers> and place in a `_data` folder:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
mkdir -p _data
|
||
|
|
curl -L -o _data/pres.numbers https://sheetjs.com/pres.numbers
|
||
|
|
```
|
||
|
|
|
||
|
|
3) Create a `index.njk` file that references the file. Since the file is
|
||
|
|
`pres.numbers`, the parameter name is `pres`:
|
||
|
|
|
||
|
|
```liquid title="index.njk"
|
||
|
|
<h2>Presidents</h2>
|
||
|
|
<table><thead><th>Name</th><th>Index</th></thead>
|
||
|
|
<tbody>
|
||
|
|
{% for row in pres %}{% if (loop.index >= 1) %}
|
||
|
|
<tr>
|
||
|
|
<td>{{ row.Name }}</td>
|
||
|
|
<td>{{ row.Index }}</td>
|
||
|
|
</tr>
|
||
|
|
{% endif %}{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
```
|
||
|
|
|
||
|
|
4) Run the development server:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
deno task lume --serve
|
||
|
|
```
|
||
|
|
|
||
|
|
To verify it works, access http://localhost:3000 from your web browser.
|
||
|
|
Adding a new row and saving `pres.numbers` should refresh the data
|
||
|
|
|
||
|
|
5) Stop the server (press `CTRL+C` in the terminal window) and run
|
||
|
|
|
||
|
|
```bash
|
||
|
|
deno task lume
|
||
|
|
```
|
||
|
|
|
||
|
|
This will create a static site in the `_site` folder, which can be served with:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npx http-server _site
|
||
|
|
```
|
||
|
|
|
||
|
|
Accessing the page http://localhost:8080 will show the page contents.
|
||
|
|
|
||
|
|
This site is self-contained and ready for deployment!
|