Installing Eleventy on a New Mac
Despite the COVID-19 pandemic, a new MacBook Pro completed its journey from Shanghai to Harrogate when it arrived at my home .
The updated Magic Keyboard is delightful to type on. Key presses start softer than the older not Magic keyboard then stiffen at the bottom of the stroke, providing reassurance the press registered. Apple has reverted the layout of the arrow keys to an upside down T shape, making it easier to orient your fingers without looking down at the keyboard.
How is the MacBook Pro’s keyboard related to installing Eleventy on a new Mac? It’s tenuous: creating a website is my excuse to use the keyboard and Eleventy is static site generator I’d like to use.
Quick start
Eleventy’s website proudly displays a quick start on its home page:
% npm install -g @11ty/eleventy % echo '# Page header' > README.md % eleventy
Slow start
Following that quick start on a fresh installation of MacOS (Catalina Version 10.15), though, is less than gratifying:
mike@MacBook-Pro ~ % npm install -g @11ty/eleventy zsh: command not found: npm
The npm command isn’t found because the npm CLI isn’t installed. According to the npm blog:
The best way to install npm is to install node using the node.js installer. npm is installed as part of node.
According to me, the best way to install Node.js is to install it using nvm.
Last, the nvm README calls out: Git must be installed before nvm, giving us a list of dependencies to install in this order:
Install Git
Open Terminal and enter the command to install Apple’s Command Line Tools, which include Git.
mike@MacBook-Pro ~ % xcode-select --install xcode-select: note: install requested for command line developer tools
Click the Install button on the alert that appears.
Confirm Git was installed and its version.
mike@MacBook-Pro ~ % git --version git version 2.21.0 (Apple Git-122)
Install nvm
Create a run commands file for zsh.
mike@MacBook-Pro ~ % touch ~/.zshrc
Enter the command to run nvm’s install script. Check nvm’s README for the latest version number.
mike@MacBook-Pro ~ % curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
Quit then reopen Terminal, which will start nvm using the run commands file we just created.
Confirm nvm was installed and its version.
mike@MacBook-Pro ~ % nvm --version 0.35.3
Install Node.js
Use nvm to install the latest LTS version of Node.js.
mike@MacBook-Pro ~ % nvm install --lts Installing latest LTS version. Downloading and installing node v12.18.0... Downloading https://nodejs.org/dist/v12.18.0/node-v12.18.0-darwin-x64.tar.gz... ############################################################################################################################## 100.0% Computing checksum with shasum -a 256 Checksums matched! Now using node v12.18.0 (npm v6.14.4) Creating default alias: default -> lts/* (-> v12.18.0)
Confirm Node.js was installed and its version.
mike@MacBook-Pro ~ % node --version v12.18.0
Install Eleventy
Create a directory for our Eleventy project and change to that directory.
mike@MacBook-Pro ~ % mkdir -p ~/code/my-project mike@MacBook-Pro ~ % cd ~/code/my-project
Create a package.json file. This is optional but useful: it keeps
track of any dependencies our project is using, including Eleventy.
mike@MacBook-Pro my-project % npm init -y Wrote to /Users/mike/code/my-project/package.json: { "name": "my-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
Install Eleventy in our project’s directory.
mike@MacBook-Pro my-project % npm install --save-dev @11ty/eleventy
Use npx to confirm Eleventy was installed and its version.
mike@MacBook-Pro my-project % npx @11ty/eleventy --version 0.11.0
Finish strong
Create a simple Markdown file.
mike@MacBook-Pro my-project % echo '# Page header' > README.md
Run Eleventy to generate an HTML file from the Markdown file.
mike@MacBook-Pro my-project % npx @11ty/eleventy Writing _site/README/index.html from ./README.md. Wrote 1 file in 0.06 seconds (v0.11.0)
Confirm the HTML was created and its contents.
mike@MacBook-Pro my-project % cat _site/README/index.html <h1>Page header</h1>
Start Eleventy’s web server.
mike@MacBook-Pro my-project % npx @11ty/eleventy --serve Writing _site/test/index.html from ./test.md. Wrote 1 file in 0.21 seconds (v0.11.0) Watching… [Browsersync] Access URLs: ---------------------------------------- Local: http://localhost:8080 External: http://192.168.142.104:8080 ---------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 ---------------------------------------- [Browsersync] Serving files from: _site
Open http://localhost:8080/README/ in a browser to view our first Eleventy web page. 👏
