We’re gonna start these projects from scratch, starting with defining our package.json.
npm init -y to init a package.json with default values
yarn add -D @11ty/eleventy @netlify/functions tailwindcss node-fetch@2 dotenv npm-run-all
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!