Frontend Forests Levels

By GPT and bamr87

Embark on a quest to build a Jekyll site using Bootstrap 5 for CSS and JavaScript in the Frontend Forests

Estimated reading time: 4 minutes

Absolutely! Let’s structure our adventure with binary-coded levels, making our journey both organized and fun. Each level will have specific tasks and goals to help you progress step by step. Here’s our quest map in binary-coded levels:

Level 000: Initial Setup

Step 1: Install Docker Desktop

Download Docker Desktop for Mac: Go to the Docker website and download Docker Desktop for Mac.
Install Docker Desktop: Open the downloaded file and follow the installation instructions.

Step 2: Verify Docker Installation

Open Terminal:
- Type docker --version to check if Docker is installed correctly.
- You should see something like Docker version 20.10.7, build f0df350.

Level 001: Create Jekyll Site with Docker

Step 1: Set Up Project Directory

Open Terminal and Create Project Directory:
```
mkdir my-jekyll-site
cd my-jekyll-site
```

Step 2: Create Dockerfile

Create a Dockerfile in Your Project Directory:

FROM jekyll/jekyll:latest
WORKDIR /srv/jekyll
COPY . /srv/jekyll
EXPOSE 4000

Step 3: Create Docker Compose File

Create a docker-compose.yml File:

version: '3'
services:
  jekyll:
    image: jekyll/jekyll:latest
    command: jekyll serve --watch --force_polling
    ports:
      - "4000:4000"
    volumes:
      - .:/srv/jekyll

Step 4: Create a New Jekyll Site

Run the Following Command in Terminal:
```
docker-compose run jekyll jekyll new .
```

Level 010: Adding Bootstrap 5

Step 1: Open Project Directory

Navigate to Your Project Directory:
```
cd my-jekyll-site
```

Step 2: Include Bootstrap 5

Create _includes/head.html if it doesn’t exist:
```
touch _includes/head.html
```

Edit _includes/head.html to Include Bootstrap 5:

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xxx" crossorigin="anonymous">

<!-- Bootstrap JS and Popper.js -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-xxx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-xxx" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.min.js" integrity="sha384-xxx" crossorigin="anonymous"></script>

Replace the xxx with the appropriate integrity values from the Bootstrap CDN site.

Level 011: Customize Your Site

Step 1: Create Basic Layout

Edit index.md or index.html to Add Bootstrap Components:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Jekyll Site</title>
   
{% include head.html %}
   
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</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">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="jumbotron">
      <h1 class="display-4">Hello, world!</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <hr class="my-4">
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>
  </div>
     
  {% include footer.html %}
     
</body>
</html>

Step 2: Customize Bootstrap

Edit Main Stylesheet:
- You can override Bootstrap styles by editing assets/css/style.scss or your main stylesheet.

Level 100: Deploy Your Site

Step 1: Create GitHub Repository

Create a Repository on GitHub:

Step 2: Push Site to Repository

Run the Following Commands in Terminal:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/your-repo-name.git
git push -u origin master

Step 3: Deploy to GitHub Pages

Go to Your Repository Settings on GitHub:
- Scroll down to the GitHub Pages section.
- Select the branch to deploy from (usually main or master).

Level 101: Running and Viewing Your Site Locally

Step 1: Start Docker Container

Run the Following Command in Terminal:
```
docker-compose up
```
Visit http://localhost:4000 in Your Browser:

Congratulations! You’ve reached the end of our binary-coded adventure, and your Docker-powered Jekyll site with Bootstrap 5 is up and running. If you need any more help or want to explore more features, feel free to ask. Happy coding! 🌟