Entries

• Implementing eleventy-auto-cache-buster

  Solution

  const eleventyAutoCacheBuster = require("eleventy-auto-cache-buster");
  // Alternatively, you can use ESM
  import eleventyAutoCacheBuster from "eleventy-auto-cache-buster";
  
  module.exports = function (eleventyConfig) {
      eleventyConfig.addPlugin(eleventyAutoCacheBuster);
  }

  Related:

  • Implementing eleventy-sass

• Pre-rendering Markdown data in Eleventy

  Solution

  // Example pre-rendering data
  // src/_data/eleventyComputed.js
  import markdownit from "markdown-it";
  const md = markdownit();
  
  export default {
      renderedPosts: (data) => {
          const posts = data.posts.map(post => {
              post.content = md.render(post.content);
              return post;
          })
          return posts;
      }
  }

  // Example source data
  // src/_data/posts.json
  [
    {
      "title": "Example",
      "content": "## Example title\nExample line"
    }
  ]

  // Example template usage of pre-rendered data
  // src/example.pug
  for post in renderedPosts
      article
          h2=post.title
          div!=post.content

• Deploy Eleventy using Github Actions

  Solution

  Note: the first example uses yarn. For NPM, see below

  # Based on https://github.com/actions/starter-workflows/blob/main/pages/static.yml
  name: Build static & deploy to GitHub Pages
  
  on:
    # Runs on pushes targeting the default branch
    push:
      branches: ["main"]
  
    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:
  
    # Allows this workflow to be called from other workflows
    workflow_call:
  
  # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
  permissions:
    contents: read
    pages: write
    id-token: write
  
  # Allow one concurrent deployment
  concurrency:
    group: "pages"
    cancel-in-progress: true
  
  jobs:
    deploy:
      environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
          with:
            # Select latest ref instead of event trigger, in case this is triggered by another event
            ref: ${{ github.ref }}
        - uses: actions/setup-node@v4
            
        - name: Setup Pages
          uses: actions/configure-pages@v5
          
        - name: Install pre-requirements
          run: yarn install
  
        - name: Build
          run: yarn build
          
        - name: Upload artifact
          uses: actions/upload-pages-artifact@v3
          with:
            # Upload entire repository
            path: 'dist/'
  
        - name: Deploy to GitHub Pages
          id: deployment
          uses: actions/deploy-pages@v4

  NPM version:

  # Based on https://github.com/actions/starter-workflows/blob/main/pages/static.yml
  name: Build static & deploy to GitHub Pages
  
  on:
    # Runs on pushes targeting the default branch
    push:
      branches: ["main"]
  
    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:
  
    # Allows this workflow to be called from other workflows
    workflow_call:
  
  # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
  permissions:
    contents: read
    pages: write
    id-token: write
  
  # Allow one concurrent deployment
  concurrency:
    group: "pages"
    cancel-in-progress: true
  
  jobs:
    deploy:
      environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
          with:
            # Select latest ref instead of event trigger, in case this is triggered by another event
            ref: ${{ github.ref }}
        - uses: actions/setup-node@v4
            
        - name: Setup Pages
          uses: actions/configure-pages@v5
          
        - name: Install pre-requirements
          run: npm ci
  
        - name: Build
          run: npm run build
          
        - name: Upload artifact
          uses: actions/upload-pages-artifact@v3
          with:
            # Upload entire repository
            path: 'dist/'
  
        - name: Deploy to GitHub Pages
          id: deployment
          uses: actions/deploy-pages@v4

  Related:

• directus-to-data: basic usage

  Solution

  The following example. You can replace the yarn command with npm run

  # package.json
  {
    "scripts": {
      "data": "directus-to-data -c CollectionOne -c CollectionTwo --collection-output src/_data/{{collectionName}}.json",
      "_schema": "directus-to-data -c CollectionOne -c CollectionTwo --collection-output NO_WRITE --assets-output NO_WRITE",
      "schema:backup": "yarn _schema --backup-schema .directus.schema.json",
      "schema:restore": "yarn _schema --restore-schema .directus.schema.json",
      "schema:apply": "yarn schema:restore --apply-schema"
    }
  }
  
  # .directus.json
  {
      "cmsUrl": "https://cms.example.com",
      "staticToken": "DAE_DOJ?1-edOJQHDS"
  }
  

  To install, use the following command:

  # npm
  npm install --save-dev directus-to-data
  # Yarn
  yarn add -D directus-to-data

• Implementing eleventy-sass

  Solution

  import * as sass from "sass";
  import eleventySass from "@grimlink/eleventy-plugin-sass";
  
  module.exports = function (eleventyConfig) {
      eleventyConfig.addPlugin(eleventySass, {
          sass,
          outputPath: "",   // Optional subdirectory
          includePaths: ["node_modules"]
      });
  }

  To install, run

  # NPM
  npm install --save-dev sass @grimlink/eleventy-plugin-sass
  # Yarn
  yarn add -D sass @grimlink/eleventy-plugin-sass

  Related:

  • Implementing eleventy-auto-cache-buster