Possum websites, done possumly

Part 1: Getting off the ground

4 minute read time / 483 words

This guide is intended as both a journey and a guide. As with most technology, it doesn't matter how good the documentation is - there's always things you can't easily find the answer too.

Getting started

Prerequisites

This guide assumes you've already got the expected basics in place:

  • A code editor. There's enough choice of powerful code editors out there. VS Code (free) is probably the obvious one, but I would highly recommend Sublime Text (paid) too.
  • A terminal emulator. If you're a Mac user, I would recommend iTerm. For Windows users, sorry but terminals are a bit poop. If you're on Windows 11 or newer, the built-in terminal is a bit better, and if you install PowerShell it'll be a bit better. Alternatively, you can use something like cmder.
  • Node/NPM installation. You'll need a recent version of Node/NPM installed to do almost anything frontend-y these days. And this is no exception.
  • A decent web browser. Any ever green browser is a decent choice. Firefox, Chrome, Edge (based on Chrome), Opera (based on Chrome), Vivaldi (based on Chrome), Arc (based on Chrome), Chromium (Chrome without the Google), or even Safari (macOS only) (much better in recent times).

Installation

Eleventy has a fully-detailed installation/getting started guide if you want all the information, but you really only need a few commands to get up and running.

Make yourself a new folder for your project, open your terminal and navigate to that folder. 

cd /Users/myname/my-sexy-eleventy-site/

Or if you're on a Windows-based platform: 

cd C:\Users\myname\Documents\my-sexy-eleventy-site

Next, we need to install the Eleventy packages: 

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

Node versions

Eleventy v2.0.1 requires Node.js version 14 or higher. The current Long Term Service (LTS) release of Node is currently 20.11.1.

The only thing you now need to start a basic site is a home page. Make youself a file called index.html, and add the skeleton structure: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Sexy Eleventy Site</title>
        <meta name="viewport" content="width=device-width">
    </head>

    <body>
        <h1>Hello World!</h1>
    </body>
</html>

Running locally

Now, to run the site on a local server and see our 'Hello World!' message, you can run: 

npx @11ty/eleventy --serve

If everything compiles correctly, you'll see something a message telling you your local development web server is running and where you can see it: 

[11ty] Server at http://localhost:8080/

So now we have a single page static site, but it's not up to much. There's no style, there's no real 'website' in this website yet. Let's start pulling together all the bits we need and get our site structure in better shape.