This post goes through the steps to create a basic Eleventy (11ty) site from Prof Stein’s Eleventy Basic template.
Node and NVM
Before you do this, you must have node installed on your computer.
If you know you don’t have node installed: go to the Dev Environment Setup page and click on your OS and make sure you’ve followed through these steps:
- Install NVM
- Install Node
If you’re not sure you have node: o check if you have Node installed on your machine:
- Open Visual Studio Code
- Open a new Window: File > New Window
- Open the terminal by clicking: Terminal > New Terminal
- Type the folllwing then press enter/return: node -v
- You should see something this as a reply in the terminal: v15.5.7
- If you don’t see that then you don’t have node installed. Try following the instructions from the Install NVM step
Create a Basic Eleventy Starter Site
These are the instructions on creating the GitHub repository and running 11ty to generate the site from Stephanie Eckles example.
- Sign in to GitHub https://github.com
- Click on the following link to Generate a repo from this template: https://github.com/profstein/eleventy-basic
- This will take you to GitHub and get you started creating a repository from my template.
- NOTE: this is similar to forking but you are not linked back to the original in the same way you are from a fork. It should say “Generated from profstein/eleventy-basic” under your repo name after you’re done.
- Type a name for your repository (you can also check to include all branches from original).
- Click to finish and create the repo
- You should now see a repository with the files from the template.
- Click the green Code button and copy the link
- Go to Visual Studio Code
- If you don’t have a blank window open, Open a new window: File > New Window
- Click Clone Git Repository
- Paste in the URL you copied from GitHub (step 8) and press enter/return
- Click to Open the new repository
- If prompted click Yes I trust the authors
- You should see the files in VS Code
- Open a new Terminal Window: Terminal > New Window
- Type: npm install
- You should see a bunch of things happening in the terminal
- There shoud be a new node_modules folder and package-lock.json file.
- If you get some messages about updating node or nvm you can address those later.
- Type: npm start
- This should compile/build your files and start a server where you can see your site.
- Your build files will be in a new folder named public.
- Command Click on the first link (to localhost) in the terminal to view your site. You can also copy and paste the link into a browser.
- You should see the site in your browser.
We used this example first in class. Then I created the repository above that is closer to how your all organized your Responsive Site projects. Here is the info on Stephanie Eckles starter repo we did in class on 10/13/21
You can then clone this repo to VS Code and work with it like we work with the other repositories.