Frontend Forests: Building a Jekyll Site with Bootstrap

By GPT and bamr87

Embark on a quest to build a Jekyll site using Bootstrap 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.

Estimated reading time: 2 minutes

Edit on Github

Embarking on the quest to build a Jekyll site using Bootstrap for CSS and JavaScript in the Frontend Forests requires a clear map and a set of steps to guide you through the enchanted woods. Below is an outline designed to navigate you through this journey, ensuring you leverage the magical powers of Jekyll and Bootstrap to create an enchanting website.

🌲 The Frontend Forests Quest: Crafting a Jekyll Site with Bootstrap

Step 1: Preparing Your Journey’s Tools

  • Install Ruby: Ensure you have Ruby installed on your machine, as it’s the lifeblood of Jekyll.
  • Install Jekyll and Bundler: Run gem install jekyll bundler in your command line to install Jekyll and Bundler, the map and compass of your quest.

Step 2: Initiating the Jekyll Site Creation Spell

  • Create Your New Jekyll Site: Use jekyll new your-site-name to create a new Jekyll site. This spell conjures a new site structure in your chosen directory.
  • Enter Your Site’s Directory: Navigate into your site’s directory using cd your-site-name.

Step 3: Integrating Bootstrap for Styling Magic

  • Add Bootstrap: There are multiple ways to add Bootstrap. For simplicity, you can use the Bootstrap CDN. Open your _includes/head.html and add the Bootstrap CSS link within the <head> tag.
  • JavaScript Integration: To add Bootstrap’s JavaScript, include the necessary Bootstrap JS link before the closing </body> tag in your _layouts/default.html.

Step 4: Customizing Your Site’s Layout

  • Modify Default Layout: Edit the _layouts/default.html file to create a basic layout structure. Use Bootstrap’s grid system and components to design your layout.
  • Creating Pages: Start adding pages to your site. Jekyll uses Markdown for content creation, making it simple to add and manage content.

Step 5: Crafting Posts with Enchanted Words

  • Creating Posts: Add posts in the _posts directory. Use the format YYYY-MM-DD-name-of-post.md for post files.
  • Using Front Matter: Utilize Jekyll’s front matter to add metadata to your posts and pages, enhancing their magical properties.

Step 6: Applying Styling Spells with Bootstrap

  • Styling Your Content: Use Bootstrap’s CSS classes to style your content directly in your Markdown files or within your site’s HTML templates.

Step 7: Previewing Your Creation

  • Local Preview: Run bundle exec jekyll serve to preview your site locally. Inspect your site to ensure the Bootstrap magic has been successfully applied.

Step 8: Publishing Your Site to the World

  • Deployment: Once satisfied with your enchanted site, deploy it to GitHub Pages, Netlify, or another hosting service to share your creation with the world.

🚀 Additional Quests

  • Customize Your Theme: Dive deeper into the forests to explore customizing your Jekyll theme with Bootstrap.
  • Explore Plugins: Enhance your site’s capabilities by exploring Jekyll plugins for added functionality.

This map will guide you through the Frontend Forests as you build your Jekyll site with Bootstrap. Remember, the path to mastery involves experimentation and continuous learning. May the winds of the Frontend Forests be ever in your favor!