11ty

#11ty #webDev #node #SSG

What is 11ty?

11ty is a Node.js-based static site generator that offers a simpler experience compared to other static site generators in the Node.js ecosystem.

How to start?

To get started, go to 11ty.dev and check out the documentation for a quick start guide. I'll summarize it in my own words.

I plan to use npm for package manager, but it will be a bit different since I'll be working within a docker container as my coding environment. The reason for this is that I don't have Node.js installed on my Windows 10, the host machine, and I also want a clean, dedicated environment specifically for 11ty.

Setup with Docker

Tip

Ensure that Docker is installed and functioning properly before proceeding to the next step.

docker run hello-world

mkdir my-11ty
cd my-11ty

touch Dockerfile .gitignore .dockerignore docker-compose.yml

Select your preferred IDE; for this example, I'll be using my favorite, VSCodium.

code .

We need to create 11ty Docker image, so we have to complete the Dockerfile since the source of the Docker image comes from it.

# Use the official Node.js LTS Alpine image
FROM node:22-alpine

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Expose the port the app runs on
EXPOSE 8080
# Command to run the 11ty development server

CMD ["npm", "start"]

Once we finish creating the Dockerfile,we should move on to the next steps.

These steps are necessary because we need to install Node in order to set up 11ty.

First, create a Docker image named ivanhertanto/node-dev:11ty.

docker build -t ivanhertanto/node-dev:11ty .

Next, set up a temporary Docker container and run it.

docker run --rm -it ivanhertanto/node-dev:11ty sh

--rm When you use this flag, your Docker container will be automatically deleted once you close it. This ensures that you always start with a clean, fresh container from the Docker image for your next use.
-it This flag indicates that you will be enter the container, which in this case will be through the shell terminal using /bin/sh.

You now have node and npm ready, so you can proceed with the 11ty initialization installation.

npm init -y

npm install @11ty/eleventy --save-dev

Architecture of 11ty

Hello World!

# version: '3.8'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    image: ivanhertanto/node-dev:11ty
    container_name: dev-11ty
    ports:
      - "8080:8080"
    volumes:
      - .:/app
    command: npm run start