First Lesson: Setting Up Your Development Environment and Creating a Stylish Front Page

Welcome to the first lesson! In this lesson, we'll cover how to set up your development environment, integrate Bootstrap with Sass, and create a stylish front page using Eleventy.

Step 1: Install Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript on your local machine, and npm (Node Package Manager) is a tool that helps you manage libraries and packages for Node.js.

Visit the Node.js Website:
- Go to the official Node.js website: nodejs.org.
Download the Installer:
- On the homepage, you'll see two versions available for download: the LTS (Long Term Support) version and the Current version. For most users, the LTS version is recommended because it is more stable.
- Click on the LTS button to download the installer for your operating system (Windows, macOS, or Linux).
Run the Installer:
- Once the download is complete, open the installer file.
- Follow the prompts in the installer. The default settings are fine for most users, so you can click "Next" through the prompts and then "Install."
Verify the Installation:
- After the installation is complete, open your terminal (Command Prompt on Windows, Terminal on macOS or Linux).
- Type the following commands to check that Node.js and npm are installed correctly:
```
node -v
npm -v
```
- You should see version numbers printed for both Node.js and npm, which confirms that they are installed correctly.

Step 2: Create the Project Directory and Initialize Eleventy

Create the Project Directory:
- Open your terminal and navigate to the directory where you want to create your project. For example:
```
cd path/to/your/projects
mkdir ssgatwd-main-site
cd ssgatwd-main-site
```
Initialize a New npm Project:
- Run the following command to create a package.json file:
```
npm init -y
```
Install Eleventy:
- Run the following command to install Eleventy as a development dependency:
```
npm install @11ty/eleventy --save-dev
```

Create Basic Directory Structure:

Create the necessary directories and files:

mkdir src
mkdir src/_includes
touch src/index.md
touch .eleventy.js
touch .gitignore

Step 3: Configure Eleventy and Add Initial Content

Configure Eleventy:

Open .eleventy.js and add the following configuration:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/assets");

  return {
    dir: {
      input: "src",
      output: "_site",
      includes: "_includes",
    },
  };
};

Add Initial Content:

Open src/index.md and add the following content:

---
title: Home
layout: default
---

# Welcome to My Main Site

This is the main site where we will host tutorials on creating websites using various static site generators.

Create a Layout File:

Inside src/_includes, create a file named default.njk:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
  <link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
  <header>
    <h1>{{ title }}</h1>
  </header>
  <main>
    {{ content | safe }}
  </main>
  <footer>
    <p>&copy; 2024 ssgatwd</p>
  </footer>
</body>
</html>

Step 4: Running Eleventy to Build and Serve the Site Locally

Build the Site:
- In your terminal, run the following command to build the site:
```
npx @11ty/eleventy
```
Install and Set Up browser-sync:
- Run the following command to install browser-sync:
```
npm install --save-dev browser-sync
```

Add npm Scripts:

Open your package.json file and add the following scripts:

"scripts": {
  "build": "eleventy",
  "serve": "browser-sync start --no-open --server '_site' --files '_site'",
  "start": "npm run build && npm run serve",
  "sass": "sass --load-path=node_modules src/assets/scss/main.scss src/assets/css/main.css --no-source-map --style=compressed"
}

The rest of package.json may vary depending upon your setup, but this is what my entire package.json looks like at this point:

{
  "scripts": {
    "build": "eleventy",
    "serve": "browser-sync start --no-open --server '_site' --files '_site'",
    "start": "npm run build && npm run serve",
    "sass": "sass --load-path=node_modules src/assets/scss/main.scss src/assets/css/main.css --no-source-map --style=compressed"
  },
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1",
    "browser-sync": "^3.0.2"
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
    "sass": "^1.77.8"
  }
}

Run the Development Server:
- Use the following command to build the site and start the development server:
```
npm start
```

Step 5: Deploying the Site to Cloudflare Pages

Push Your Code to GitHub:

Initialize a Git repository, add your files, and push to GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin <your-repo-url>
git push -u origin main

Set Up Cloudflare Pages:
- Go to the Cloudflare Pages dashboard, create a new project, and connect your GitHub repository.
- Configure the build settings:
  - Framework preset: None
  - Build command: npm run build
  - Output directory: _site
- Click "Save and Deploy" to deploy your site.

Step 6: Styling the Main Site with Bootstrap and Creating a Front Page

Install Bootstrap and Sass:
- Run the following command to install Bootstrap and Sass:
```
npm install bootstrap@5.3.3 sass
```
Create a Sass File:
- Create a new directory src/assets/scss and a file main.scss:
```
mkdir -p src/assets/scss
touch src/assets/scss/main.scsss
```

Import Bootstrap and Customize:

Open main.scss and add the following:

// Import Bootstrap functions and variables
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

// Customize Bootstrap variables (optional)
$primary: #007bff;
$font-family-base: 'Arial, sans-serif';

// Import Bootstrap components
@import "bootstrap/scss/bootstrap";

Compile Sass to CSS:
- Run the following command to compile the Sass file:
```
npm run sass
```

Include the Compiled CSS in Your Site:

Link the compiled CSS file in your default.njk layout:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="/assets/css/main.css">
</head>

**Update index.md with Bootstrap Classes:

Open src/index.md and update it to use Bootstrap classes:

---
title: Home
layout: default
---
<div class="container mt-5">
  <div class="jumbotron text-center">
    <h1 class="display-4">Welcome to My Main Site</h1>
    <p class="lead">This is the main site where we will host tutorials on creating websites using various static site generators.</p>
    <hr class="my-4">
    <p>Learn how to create this site step-by-step.</p>
    <a class="btn btn-primary btn-lg" href="/first-lesson" role="button">Start Learning</a>
  </div>
</div>

Add Additional Components:

Create modular components in `src/_includes":

Navbar (navbar.njk):

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="/">My Main Site</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/first-lesson">First Lesson</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Footer (footer.njk):

<div class="container">
  <footer class="text-center py-4">
    <p>&copy; 2024 ssgatwd</p>
  </footer>
</div>

Include Components in Layout:

Update default.njk to include the navbar and footer:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
  <link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
  {% include "navbar.njk" %}
  <main>
    {{ content | safe }}
  </main>
  {% include "footer.njk" %}
</body>
</html>

And now you have successfully set up your development environment, configured Eleventy, and created a stylish front page with Bootstrap.