docs.sheetjs.com/docz/docs/03-demos/04-static/01-lume.md
2023-02-28 06:40:44 -05:00

2.2 KiB

title pagination_prev pagination_next sidebar_custom_props
Lume demos/net/index demos/mobile/index
type
native

Lume is a lightweight, fast and flexible static site generator.

The official Sheets plugin 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 2023 January 20.

This example uses the Nunjucks template format. Lume plugins support additional template formats, including Markdown and JSX.

:::

  1. Create a stock site:
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.

  1. Download https://sheetjs.com/pres.numbers and place in a _data folder:
mkdir -p _data
curl -L -o _data/pres.numbers https://sheetjs.com/pres.numbers
  1. Create a index.njk file that references the file. Since the file is pres.numbers, the parameter name is pres:
<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>
  1. Run the development server:
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

  1. Stop the server (press CTRL+C in the terminal window) and run
deno task lume

This will create a static site in the _site folder, which can be served with:

npx http-server _site

Accessing the page http://localhost:8080 will show the page contents.

This site is self-contained and ready for deployment!