Creating an Editable Site with Google Sheets and Eleventy

This tutorial demonstrates building an editable website using Google Sheets and Eleventy, a significant improvement over client-side data fetching. We'll leverage Eleventy's static site generation capabilities to fetch data during the build process, resulting in faster loading times and enhanced security. This eliminates the need for client-side JavaScript to fetch data on every page view.

The Problem: Constant Client Revisions

Developers often face the challenge of endless content revisions from clients, even after site launch. This iterative process can be time-consuming and disruptive.

This solution empowers clients to update content independently using a familiar tool: Google Sheets.

Introducing Eleventy

While our previous article used Tabletop.js to interact with Google Sheets, this approach integrates Eleventy, a static site generator. Eleventy renders the site as a pure static site, eliminating the need to include client-side JavaScript for data handling. Content is fetched during the build process, creating a highly optimized index.html file. This static approach improves page load speed and security.

Setting up the Google Sheet

A Google Sheet serves as the data store. Create a new spreadsheet, structuring your data with column headers as references (e.g., "header," "body"). These headers will be referenced in your JavaScript code. Populate the sheet with your content.

Next, publish the sheet to the web (File → Publish to the web). While the generated link isn't directly used, this step makes the spreadsheet data publicly accessible. Note the unique Sheet ID from the URL; you'll need it later.

Node.js and Project Setup

Node.js is required. For a streamlined setup, clone the provided repository and run:

npm install
npm run seed
npm run dev

The npm run seed command is crucial; it pre-populates a local JSON file (src/site/_data/dev/sheet.json) with data from the Google Sheet, eliminating the need for repeated API calls during development.

Data Fetching and Transformation (src/site/_data/prod/sheet.js)

The core logic resides in src/site/_data/prod/sheet.js. This script fetches data from the Google Sheet using Axios, transforms it into a usable JavaScript object, and saves a local JSON copy for development. Remember to replace sheetID with your sheet's unique ID.

module.exports = () => {
  return new Promise((resolve, reject) => {
    console.log(`Requesting content from ${googleSheetUrl}`);
    axios.get(googleSheetUrl)
      .then(response => {
        var data = { content: [] };
        response.data.feed.entry.forEach(item => {
          data.content.push({
            header: item.gsx$header.$t,
            header2: item.gsx$header2.$t,
            // ... other fields ...
          });
        });
        seed(JSON.stringify(data), `${__dirname}/../dev/sheet.json`);
        resolve(data);
      })
      .catch(error => {
        console.log('Error:', error);
        reject(error);
      });
  });
};

The script uses forEach to iterate through the sheet's entries, mapping column headers to object properties. The seed function saves the data as JSON.

Templating with Nunjucks (or your preferred engine)

The transformed JSON data is readily usable with templating engines like Nunjucks. For example:

<div>
  {%- for item in sheet.content -%}
    <h1 id="item-header">{{ item.header }}</h1>
  {%- endfor -%}
</div>

Adapt this to your chosen templating engine and data structure.

Building and Deployment

Build the site:

npm run build

This generates the static site in a dist folder. For automated deployments after Google Sheet updates, integrate Zapier to connect Google Sheets and your hosting platform (e.g., Netlify). Configure a Zap to trigger a Netlify deployment whenever a new or updated row is added to the Google Sheet. This creates a seamless, automated workflow.

This comprehensive approach provides a performant, editable website with automated deployments, significantly improving the development workflow and client collaboration.

The above is the detailed content of Creating an Editable Site with Google Sheets and Eleventy. For more information, please follow other related articles on the PHP Chinese website!