⭐ Lvl 0100 🏰 Main Quest 🟡 Medium 90-120 minutes

Dockering Jekyll with Bootstrap 5

Embark on a quest to build a Jekyll site using Bootstrap 5 for CSS and JavaScript in the Frontend Forests. This guide will navigate you through the enchanted woods, ensuring you leverage the magical powers of Jekyll and Bootstrap to create an enchanting website.

Primary Tech: 🛠️ General
Skill Focus: Fullstack
Series: Level 0100 Quest Line
Author: GPT and bamr87

🎯 Quest Objectives

By the end of this quest, you will be able to:

Understand the core concepts introduced in this quest
Complete the hands-on exercises and verify the results
Apply what you learned to a follow-up scenario of your own design

Note: objectives auto-seeded during framework alignment — authors should refine these to reflect this quest’s specific skills.

Journey through the Frontend Forests to use Docker on a macOS system for building our Jekyll site with Bootstrap 5. This way, you won’t have to worry about installing Ruby or other dependencies directly on your system.

Step 1: Set Up Your Environment

Tools You Need:

Docker Desktop
Node.js (optional, but handy for managing JavaScript dependencies)

Installing 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: Create a New Jekyll Site

We’ll create a Docker container for Jekyll and use it to create a new Jekyll site.

Create a Dockerfile: In your project directory, create a Dockerfile:

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

Create a Docker Compose file: Create a docker-compose.yml file in the same directory:

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

Create a New Jekyll Site: Open a terminal, navigate to your project directory, and run:
```
docker-compose run jekyll jekyll new .
```

Step 3: Add Bootstrap 5 to Your Jekyll Site

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

Include Bootstrap: Open _includes/head.html (create this file if it doesn’t exist) and add the following lines 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.

Step 4: Customize Your Site with Bootstrap Components

Homepage Layout: Open index.md or index.html and add some 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>

Styling Your Site: You can customize Bootstrap’s look and feel by overriding CSS in your main stylesheet (assets/css/style.scss or similar).

Step 5: Deploy Your Jekyll Site

Now that your site is ready, let’s deploy it to GitHub Pages.

Create a Repository on GitHub.

Push Your Jekyll Site to This Repository:

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

Deploy to GitHub Pages:
- Go to your repository settings on GitHub.
- Scroll down to the GitHub Pages section and select the branch to deploy from (usually main or master).

To start your local server with Docker, simply run:

docker-compose up

Visit http://localhost:4000 to see your Jekyll site in action!

And there you have it! Your Docker-powered Jekyll site with Bootstrap 5 is up and running. If you need any more help, feel free to ask. Happy coding! 🌟

🕸️ Knowledge Graph

Structured wiki-links connect this quest to the IT-Journey knowledge graph. Open the Obsidian Graph View to explore connections.

Level hub: [[Level 0100 - Frontend Development & Docker]] Overworld: [[🏰 Overworld - Master Quest Map]] Obsidian docs: [[Obsidian Knowledge Graph and Wiki Links]]

🎁 Rewards

0 XP

🕸️ Quest Network

graph TD loading(["Loading quest graph…"])

Referenced by

Loading…

Layout	`quest`
Collection	`quests`
Path	`_quests/0100/frontend-docker.md`
URL	`/quests/0100/frontend-docker/`
Date	`2024-05-28`

Settings

Search

Appearance

About

Page Location

Source Code

Page Info

Theme Skin

SVG Backgrounds

Layer Opacity

Dockering Jekyll with Bootstrap 5

Table of Contents

Dockering Jekyll with Bootstrap 5

🎯 Quest Objectives

Step 1: Set Up Your Environment

Tools You Need:

Installing Docker Desktop:

Step 2: Create a New Jekyll Site

Step 3: Add Bootstrap 5 to Your Jekyll Site

Step 4: Customize Your Site with Bootstrap Components

Step 5: Deploy Your Jekyll Site

🕸️ Knowledge Graph

🎁 Rewards

🕸️ Quest Network

Referenced by