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

Edit on Github

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

  1. Download Docker Desktop for Mac: Go to the Docker website and download Docker Desktop for Mac.

  2. Install Docker Desktop: Open the downloaded file and follow the installation instructions.

Step 2: Verify Docker Installation

  1. 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

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

Step 2: Create Dockerfile

  1. 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

  1. Create a docker-compose.yml File:
    version: '3'
        image: jekyll/jekyll:latest
        command: jekyll serve --watch --force_polling
          - "4000:4000"
          - .:/srv/jekyll

Step 4: Create a New Jekyll Site

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

Level 010: Adding Bootstrap 5

Step 1: Open Project Directory

  1. Navigate to Your Project Directory:
    cd my-jekyll-site

Step 2: Include Bootstrap 5

  1. Create _includes/head.html if it doesn’t exist:
    touch _includes/head.html
  2. Edit _includes/head.html to Include Bootstrap 5:
    <!-- Bootstrap CSS -->
    <link href="" rel="stylesheet" integrity="sha384-xxx" crossorigin="anonymous">
    <!-- Bootstrap JS and Popper.js -->
    <script src="" integrity="sha384-xxx" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-xxx" crossorigin="anonymous"></script>
    <script src="" 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

  1. Edit or index.html to Add Bootstrap Components:
    <!DOCTYPE html>
      <meta charset="UTF-8">
      <title>My Jekyll Site</title>
    {% include head.html %}
      <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>
        <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 class="nav-item">
              <a class="nav-link" href="#">Features</a>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
      <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>
      {% include footer.html %}

Step 2: Customize Bootstrap

  1. 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

  1. Create a Repository on GitHub:

Step 2: Push Site to Repository

  1. Run the Following Commands in Terminal:
    git init
    git add .
    git commit -m "Initial commit"
    git remote add origin
    git push -u origin master

Step 3: Deploy to GitHub Pages

  1. 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

  1. Run the Following Command in Terminal:
    docker-compose up
  2. 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! 🌟