| 
									
										
										
										
											2023-01-15 03:36:13 +00:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Lume | 
					
						
							|  |  |  | pagination_prev: demos/extensions/index | 
					
						
							| 
									
										
										
										
											2023-02-15 06:00:28 +00:00
										 |  |  | pagination_next: demos/cloudata/index | 
					
						
							| 
									
										
										
										
											2023-01-15 03:36:13 +00:00
										 |  |  | 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 | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-21 10:50:57 +00:00
										 |  |  | This was tested against `lume v1.14.2` on 2023 January 20. | 
					
						
							| 
									
										
										
										
											2023-01-15 03:36:13 +00:00
										 |  |  | 
 | 
					
						
							|  |  |  | 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! |