If you’re looking to create a stylish and responsive blog using the Clean Blog Jekyll theme from Start Bootstrap, you’ve arrived at the right place! In this guide, we will walk you through the installation and setup process step-by-step. So, let’s dive in!

Installation Setup

The Clean Blog Jekyll theme can be installed in two ways: using RubyGems or by using core files. Below, we will discuss both methods in detail.

Using RubyGems

Follow these steps to install the theme with RubyGems. Remember, the demo images, posts, and pages won’t be included, so customize as you like!

1. (Optional) Create a new Jekyll site: jekyll new my-site
2. Replace the current theme in your Gemfile:

   gem "jekyll-theme-clean-blog"

3. Install the theme by running the command in your site directory: bundle install
4. Update the theme in your _config.yml file:

   theme: jekyll-theme-clean-blog

5. Build your site using:

   bundle exec jekyll serve

Using Core Files

If you prefer to use the core files directly, here’s how you can do that:

1. Download or Clone the repository.
2. Update the _config.yml settings such as baseurl, url, title, email, etc.
3. Build your site: bundle exec jekyll serve

Creating Pages and Posts

Let’s configure the pages that are essential for running your blog.

1. Create or modify the following pages if they do not exist:
   • index.html – set to layout: home
   • about.html – set to layout: page
   • contact.html – set to layout: page
   • postsindex.html – set to layout: page (create a posts directory)
2. Edit the front matter for each page. For example:

   ---\nlayout: home\nbackground: PATH_TO_IMAGE\n---

3. For each blog post in the _posts directory:

   ---\nlayout: post\ntitle: Post Title\nsubtitle: This is the post subtitle\ndate: YYYY-MM-DD HH:MM:SS\nbackground: PATH_TO_IMAGE\n---

Adding a Working Contact Form

In the contact.html page, include the following form to allow users to reach out:

<form name="sentMessage" id="contactForm" novalidate>\n  <div class="control-group">\n    <div class="form-group floating-label-form-group controls">\n      <label>Name</label>\n      <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name."/>\n      <p class="help-block text-danger"></p>\n    </div>\n  </div>\n  <div class="control-group">\n    <div class="form-group floating-label-form-group controls">\n      <label>Email Address</label>\n      <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address."/>\n      <p class="help-block text-danger"></p>\n    </div>\n  </div>\n  <div class="control-group">\n    <div class="form-group col-xs-12 floating-label-form-group controls">\n      <label>Phone Number</label>\n      <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number."/>\n      <p class="help-block text-danger"></p>\n    </div>\n  </div>\n  <div class="control-group">\n    <div class="form-group floating-label-form-group controls">\n      <label>Message</label>\n      <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>\n      <p class="help-block text-danger"></p>\n    </div>\n  </div>\n  <br>\n  <div id="success"></div>\n  <div class="form-group">\n    <button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>\n  </div>\n</form>

Make sure your email in the _config.yml file is correctly set to receive submissions. Test the form by filling it out, checking your email, and verifying the email address sent by Formspree for functionality!

Troubleshooting

Encountering trouble? Here are some common issues and solutions:

• Site Not Building? Ensure all configurations in _config.yml are set correctly.
• Contact Form Not Working? Double-check the settings in the _config.yml file and ensure you are using a valid email address.
• Pages Not Displaying? Verify you’ve created the necessary files and set the correct layout in the front matter.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Have a bug or issue? Feel free to open a new issue on GitHub!

Final Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.