Starter 11ty Site

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:

1. Open Visual Studio Code
2. Open a new Window: File > New Window
3. Open the terminal by clicking: Terminal > New Terminal
4. Type the folllwing then press enter/return: node -v
5. You should see something this as a reply in the terminal: v15.5.7 
   1. 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.

1. Sign in to GitHub https://github.com 
2. Click on the following link to Generate a repo from this template: https://github.com/profstein/eleventy-basic
3. This will take you to GitHub and get you started creating a repository from my template. 
   1. 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.
4. Type a name for your repository (you can also check to include all branches from original). 
5. Click to finish and create the repo
6. You should now see a repository with the files from the template.
7. Click the green Code button and copy the link
8. Go to Visual Studio Code
9. If you don’t have a blank window open, Open a new window: File > New Window
10. Click Clone Git Repository
11. Paste in the URL you copied from GitHub (step 8) and press enter/return
12. Click to Open the new repository
13. If prompted click Yes I trust the authors
14. You should see the files in VS Code
15. Open a new Terminal Window: Terminal > New Window
16. Type: npm install
    1. You should see a bunch of things happening in the terminal
    2. There shoud be a new node_modules folder and package-lock.json file.
    3. If you get some messages about updating node or nvm you can address those later.
17. Type: npm start
    1. This should compile/build your files and start a server where you can see your site.
    2. Your build files will be in a new folder named public.
18. 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.
19. You should see the site in your browser.

Alternative

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

Go to the Starter example page: https://smol-11ty-starter.netlify.app/

Click on Generate a repo from this template link in the Quick Start section: https://github.com/5t3ph/smol-11ty-starter/generate 

You can then clone this repo to VS Code and work with it like we work with the other repositories.