Hi There,
I think I solved all your worries and problems for you (I hope!). Buckle in!
Before you begin
- Please test using the Jekyll Minima theme and override the theme. Once you understand the process, add it to whatever theme you like
- Connect your code to GitHub with GitHub Pages active. I assume you know how to do all this
Manually copy Bootstrap to your site (we will automate updates later)
We are going to do this step manually so you understand the process. Later, you will know what happens when I provide you with an automated way of getting the latest version.
- Go to the Bootstrap download page and download the files
- Extract that zip file; you will have a
css and js folder.
- In your Jekyll site, copy those two folders into your
assets folder. Your new assets folder will look something like this:
/assets
├── /css
│ └── [all the Bootstrap stuff you copied]
├── /js
│ └── [all the Bootstrap stuff you copied]
├── main.scss
└── minima-social-icons.svg
Add Bootstrap capabilities to your site
In this step, you will ensure Bootstrap is available to your entire site by updating the theme (remember earlier, I asked you to override the theme? This is why).
- Open
_includes/head.html. The code will look something like this:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{%- seo -%}
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
{%- feed_meta -%}
{%- if jekyll.environment == 'production' and site.google_analytics -%}
{%- include google-analytics.html -%}
{%- endif -%}
</head>
- This is very important since you want to override Bootstrap colors later. Locate where the code links
main.css and add your Bootstrap code above that. Here is the new code with that one new single line (and some comments):
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{%- seo -%}
<!-- Add bootstrap -->
<link rel="stylesheet" href="{{ "/assets/css/bootstrap.min.css" | relative_url }}">
<!-- Jekyll theme comes after bootstrap so you can do overrides -->
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
{%- feed_meta -%}
{%- if jekyll.environment == 'production' and site.google_analytics -%}
{%- include google-analytics.html -%}
{%- endif -%}
</head>
- Since you likely want to use Bootstrap with JavaScript, open the
_layouts/default.html file. It should look something like this:
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
{%- include head.html -%}
<body>
{%- include header.html -%}
<main class="page-content" aria-label="Content">
<div class="wrapper">
{{ content }}
</div>
</main>
{%- include footer.html -%}
</body>
</html>
- It is a best practice to add your Bootstrap JS code just above the
</body> element. Include that line just as I have done in the sample code below:
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
{%- include head.html -%}
<body>
{%- include header.html -%}
<main class="page-content" aria-label="Content">
<div class="wrapper">
{{ content }}
</div>
</main>
{%- include footer.html -%}
<!-- Add bootstrap js -->
<script src="{{ '/assets/js/bootstrap.bundle.min.js' | relative_url }}"></script>
</body>
</html>
Test that Bootstrap functions properly
Now that you have successfully added Bootstrap to your site, test it to ensure that it functions properly.
- Open your
/index.md file
- The code should look something like this:
---
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
layout: home
---
- Update the
index.md file to display a navbar and button. Here is some sample code:
<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>
</ul>
</div>
</nav>
<div class="container">
<h1 class="text-primary">Hello, Bootstrap!</h1>
<button class="btn btn-primary">Primary Button</button>
</div>
**The rest of Jekyll Minima stuff will display below:**
- Run
bundle exec jekyll serve --livereload and open the link. Your new site should look something like this:
Accomplishment #1: Add Bootstrap to your site
You have included Bootstrap on your Jekyll site, so you could stop here and create whatever code you want to manage your site.
If you started with a blank Jekyll site, you now know the best way to add Bootstrap code so it appears everywhere.
Overriding Bootstrap CSS
You want to override colors in Bootstrap. Mind you, this is not easy, so know what you are getting into. You will want to ask on other forums about the best method, but I will show you a simple way to change the button text and the button from blue (default) to red.
- Locate the
/_sass/minima folder in your Jekyll site. Add a new file and call it _override-bootstrap.scss
- In your new
/_sass/minima/override-bootstrap.scss file, add the following code to change our components from blue to red:
/* custom.css */
:root {
--bs-primary: #ff0000; /* Red color */
}
.btn-primary {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
}
.text-primary {
color: var(--bs-primary) !important;
}
- Save the file
- Open the file
/_sass/minima.scss. The code should look something like this:
@charset "utf-8";
// Define defaults for each variable.
$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$base-font-size: 16px !default;
$base-font-weight: 400 !default;
$small-font-size: $base-font-size * 0.875 !default;
$base-line-height: 1.5 !default;
$spacing-unit: 30px !default;
$text-color: #111 !default;
$background-color: #fdfdfd !default;
$brand-color: #2a7ae2 !default;
$grey-color: #828282 !default;
$grey-color-light: lighten($grey-color, 40%) !default;
$grey-color-dark: darken($grey-color, 25%) !default;
$table-text-align: left !default;
// Width of the content area
$content-width: 800px !default;
$on-palm: 600px !default;
$on-laptop: 800px !default;
// Use media queries like this:
// @include media-query($on-palm) {
// .wrapper {
// padding-right: $spacing-unit / 2;
// padding-left: $spacing-unit / 2;
// }
// }
@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
}
}
@mixin relative-font-size($ratio) {
font-size: $base-font-size * $ratio;
}
// Import partials.
@import
"minima/base",
"minima/layout",
"minima/syntax-highlighting";
- Modify the
/_sass/minima.scss file to include your override file like this:
@charset "utf-8";
// Define defaults for each variable.
$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$base-font-size: 16px !default;
$base-font-weight: 400 !default;
$small-font-size: $base-font-size * 0.875 !default;
$base-line-height: 1.5 !default;
$spacing-unit: 30px !default;
$text-color: #111 !default;
$background-color: #fdfdfd !default;
$brand-color: #2a7ae2 !default;
$grey-color: #828282 !default;
$grey-color-light: lighten($grey-color, 40%) !default;
$grey-color-dark: darken($grey-color, 25%) !default;
$table-text-align: left !default;
// Width of the content area
$content-width: 800px !default;
$on-palm: 600px !default;
$on-laptop: 800px !default;
// Use media queries like this:
// @include media-query($on-palm) {
// .wrapper {
// padding-right: $spacing-unit / 2;
// padding-left: $spacing-unit / 2;
// }
// }
@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
}
}
@mixin relative-font-size($ratio) {
font-size: $base-font-size * $ratio;
}
// Import partials.
@import
"minima/base",
"minima/layout",
"minima/syntax-highlighting",
"minima/override-bootstrap"
;
- Save the file and test. When you preview the site, you will notice the text and accompanying button are now red!
Accomplishment #2: Override Boostrap
You can now use that override-bootstrap.scss file to override bootstrap elements to your heart’s content. Again, look up best practices from here because I make no guarantees I followed best practices :-).
Automatically update Bootstrap
I do not recommend updating Bootstrap automatically since you could wake up one morning and find your site not working correctly. You should probably manually update those css and js folders when necessary.
That said, you can use a GitHub Action. As I write this, GitHub Actions are free but with limitations. Look those up before blindly following my instructions, but if this is your only GitHub workflow, running a weekly update should not impact your account.
- If it does not already exist, create a new folder in the root of your Jekyll site and call it
/.github. Create a sub-folder and call it workflows. Finally, create a new file and name it update-bootstrap.yml. The folder structure should look like this:
/my-jekyll-site
├── /.github
├──── /.workflows
│ └──── update-bootstrap.yml
- Update the
update-bootstrap.yml to include the following code:
name: Update Bootstrap
on:
schedule:
- cron: '0 0 * * 0' # Run weekly on Sunday at midnight
workflow_dispatch:
jobs:
update-bootstrap:
runs-on: ubuntu-latest
steps:
# Step 1: Checkout the repository
- name: Checkout repository
uses: actions/checkout@v2
# Step 2: Set up Node.js environment
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: 14
# Step 3: Install necessary dependencies
- name: Install dependencies
run: |
sudo apt-get update
sudo apt-get install -y wget unzip jq
# Step 4: Download and extract the latest Bootstrap version
- name: Download and extract the latest Bootstrap version
run: |
# Fetch the latest release tag from the Bootstrap GitHub repository
LATEST_RELEASE=$(curl --silent "https://api.github.com/repos/twbs/bootstrap/releases/latest" | jq -r .tag_name)
LATEST_VERSION=${LATEST_RELEASE#v}
echo "Latest Bootstrap version: $LATEST_VERSION"
echo "version=$LATEST_VERSION" >> $GITHUB_ENV
# Download the latest Bootstrap distribution zip file
wget https://github.com/twbs/bootstrap/releases/download/v${LATEST_VERSION}/bootstrap-${LATEST_VERSION}-dist.zip -O bootstrap.zip
# Extract the downloaded zip file
unzip bootstrap.zip -d bootstrap
# Copy the CSS and JS files to the appropriate directories
mkdir -p assets/css assets/js
cp -r bootstrap/bootstrap-${LATEST_VERSION}-dist/css/* assets/css/
cp -r bootstrap/bootstrap-${LATEST_VERSION}-dist/js/* assets/js/
env:
version: ${{ env.version }}
# Step 5: Commit and push the changes to the repository
- name: Commit and push changes
run: |
# Configure Git with a dummy user for the commit
git config --global user.name 'github-actions[bot]'
git config --global user.email 'github-actions[bot]@users.noreply.github.com'
# Add all changes, including untracked files
git add .
git status
# Commit the changes with a message, or skip if there are no changes
git commit -m "Update Bootstrap to version $LATEST_VERSION" || echo "No changes to commit"
# Push the changes to the main branch
git push origin main
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
Save, commit, and push your code up to GitHub
-
In GitHub, navigate to the repository and:
a) Make sure GitHub Pages are active on main/root
b) Test that you can access the GitHub repository, and it looks like my previous screenshot (the one with the red text and button)
c) Go to Repository->Settings->Actions->General->Workflow Permissions->Read and write permissions (it was probably read-only)->Save
-
Go to your repository->Actions->Update Bootstrap->Run Workflow->Run Workflow
a) You can select the running workflow and watch it update
If the workflow does not run successfully, paste the code and the error log and share that on a support board. I do not claim to want to maintain this code 
Accomplishment #3: Automatically update to the latest version of Bootstrap
You now have a Jekyll site that:
- Uses Bootstrap
- Allows you to override Bootstrap
- Updates Bootstrap to the latest version every Sunday at Midnight
Code availability
I created a GitHub repo with the code I used to write this, which you can access here:
And here is a link to the working GitHub Pages site:
https://billraymond.github.io/github-pages-with-bootstrap/
I happened to create this site using Visual Studio Dev Containers with Docker (hence the Dockerfile and the .devcontainer folder), but you can ignore those if you want.
Good luck!
