从零开始：用Github、Atom、Jekyll和Bootstrap构建单页滚动网站模板

Hey there! Let's break down your problems one by one with simple, designer-friendly steps that align with the structure you're targeting:

Since you want to avoid pre-made templates, we'll manually integrate Bootstrap 3 using Sass (it’s perfect for tweaking styles without digging into Bootstrap’s core code):

Step 1: Update Your Gemfile #

Open your existing Gemfile in Atom, replace all its content with this (I’ll explain each gem in plain language):

source "https://rubygems.org"

# Core engine powering your site
gem "jekyll", "~> 3.9"

# Bootstrap 3 styling (uses Sass for easy customization)
gem "bootstrap-sass", "~> 3.4"

# Auto-adds SEO meta tags (no coding needed to boost search visibility)
gem "jekyll-seo-tag"

# Generates an RSS feed (optional but useful for followers)
gem "jekyll-feed"

# Local server to preview your site as you build
gem "jekyll-serve"

Step 2: Install the Gems #

Open your terminal (just copy-paste this command—no technical know-how required):

bundle install

This will download and set up all the tools your project needs.

Step 3: Integrate Bootstrap into Your Site #

1. In your assets/css folder, create a new file named main.scss (if it doesn’t exist) and add this code:

// Import Bootstrap's core styles
@import "bootstrap-sprockets";
@import "bootstrap";

// Add your custom styles below this line (e.g., change colors, adjust spacing)
body {
  padding-top: 70px; // Makes space for a fixed navbar
}

2. Open your _layouts/default.html file (create it if missing) and add these lines inside the <head> section to load Bootstrap’s CSS and JS:

<!-- Load your custom Bootstrap-powered CSS -->
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">

<!-- Bootstrap JS (needs jQuery, loaded from a reliable CDN) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ "/assets/js/bootstrap.min.js" | relative_url }}"></script>

3. Grab the bootstrap.min.js file from the Bootstrap 3 official download zip, then drop it into your assets/js folder.

Git ignores empty folders by default—here’s a quick fix:

• Open Atom, navigate to your assets folder.
• Create a new file named .gitkeep (don’t forget the dot at the start—it’s hidden but Git will recognize it).
• Save the file, then run these commands in your terminal:

git add assets/.gitkeep
git commit -m "Add marker to track empty assets folder"
git push origin main

Your assets folder will now show up on GitHub!

Let’s map out a simple, jargon-free structure matching the project you referenced:

Final Folder/File Structure #

your-project/
├── _layouts/
│   └── default.html (base template for all pages)
├── _includes/
│   ├── header.html (navbar, site title)
│   └── footer.html (copyright, links)
├── assets/
│   ├── css/
│   │   └── main.scss
│   ├── js/
│   │   └── bootstrap.min.js
│   └── .gitkeep
├── _posts/ (for blog posts, if you want them)
├── index.md (your homepage)
├── Gemfile
├── Gemfile.lock (auto-generated when you run bundle install)
└── _config.yml (site settings)

Step-by-Step Workflow #

1. Set Up Core Templates

   • Create _layouts/default.html with a basic Bootstrap container:

     <!DOCTYPE html>
     <html>
     <head>
       <title>{{ site.title }}</title>
       {% seo %}
       <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
     </head>
     <body>
       {% include header.html %}
       <div class="container">
         {{ content }} <!-- This is where your page content will appear -->
       </div>
       {% include footer.html %}
       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
       <script src="{{ "/assets/js/bootstrap.min.js" | relative_url }}"></script>
     </body>
     </html>
     

   • Create _includes/header.html with a simple Bootstrap navbar:

     <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
         <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
       </div>
     </nav>
     

   • Create _includes/footer.html with basic footer content:

     <footer class="container">
       <hr>
       <p>&copy; {{ site.time | date: '%Y' }} Your Name</p>
     </footer>
     

2. Configure Site Settings
   Open _config.yml (create it if missing) and add these simple settings:

   title: Your Awesome Site
   description: A guide made for designers, by designers
   baseurl: "" # Leave empty if your site is at the root of GitHub Pages
   url: "" # Your GitHub Pages URL (e.g., https://yourusername.github.io/your-project)
   markdown: kramdown
   plugins:
     - jekyll-seo-tag
     - jekyll-feed
   

3. Write Your Homepage
   Open index.md and add this:

   ---
   layout: default
   title: Welcome!
   ---
   
   # Hello, Designer!
   This is your homepage. Edit this file to add your content—use Markdown for headings, lists, and images.
   

4. Preview & Publish

   • Preview your site locally: Run bundle exec jekyll serve in terminal, then open http://localhost:4000 in your browser.
   • When you’re happy, publish to GitHub:

     git add .
     git commit -m "Set up basic site with Bootstrap 3"
     git push origin main
     

内容的提问来源于stack exchange，提问作者Gino Jan Ludikhuyze