We’re gonna start these projects from scratch, starting with defining our package.json.

1. npm init -y to init a package.json with default values

2. yarn add -D @11ty/eleventy @netlify/functions tailwindcss node-fetch@2 dotenv npm-run-all

3. Setup our scripts

   "scripts": {
   	"dev:css": "npx tailwindcss -i src/styles.css -o dist/styles.css -w",
   	"dev:11ty": "eleventy --config=_eleventy/config.js --serve --watch",
     "dev": "node_modules/.bin/run-p dev:*",
     "build:css": "NODE_ENV=production npx tailwindcss -i src/styles.css -o dist/styles.css -m",
     "build:11ty": "eleventy --config=_eleventy/config.js --output=dist",
     "build": "node_modules/.bin/run-s build:*"
   }
   

   <aside> 💡 node_modules/.bin/run-p is shorthand for npm-run-all -p

   Run given npm-scripts in parallel (in this case anything with build in the command)

   </aside>

   <aside> 💡 node_modules/.bin/run-s is shorthand for npm-run-all -s

   Run given npm-scripts sequentially. (in this case all the scripts with dev in the command)

   </aside>

Now that we have our packages and scripts defined, let’s scaffold out the folders and files we’ll need for the site.

<aside> <img src="/icons/emoji_yellow.svg" alt="/icons/emoji_yellow.svg" width="40px" /> Emoji legend

📁 → Folder

📃 → File

</aside>

<aside> 🏗️ Project structure

📁 _eleventy

📃`config.js`

📁 src

📁 `_data`
*📁* `_includes`
     📁 `components`

📁 `layouts`

📃 `index.njk`

📃 `styles.css`

📁 netlify

📁 `functions`

📃 tailwind.config.js

📃 netlify.toml

📃 .env

📃 .gitignore

</aside>

Now that we have the scaffold setup, spend some time setting up a new Repo for us to push our initial commit up to. Once it’s created, push our scaffold up!

Account/Bot Creation & CLI installs

Configure 11ty’s config and setup defaults for netlify.toml