Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

A Jekyll version of the Clean Blog theme by Start Bootstrap

License

NotificationsYou must be signed in to change notification settings

StartBootstrap/startbootstrap-clean-blog-jekyll

Repository files navigation

Start Bootstrap - Clean Blog Jekyll - Official Jekyll Version

Clean Blog Jekyll is a stylish, responsive blog theme forBootstrap created byStart Bootstrap. This theme features a blog homepage, about page, contact page, and an example post page along with a working contact form powered byFormspree.

This repository holds the official Jekyll version of the Clean Blog theme on Start Bootstrap!

Preview

Clean Blog (Jekyll) Preview

View Live Preview

Installation & Setup

Using RubyGems

When installing the theme using RubyGems, demo images, posts, and pages are not included. Follow the instructions below for complete setup.

  1. (Optional) Create a new Jekyll site:jekyll new my-site
  2. Replace the current theme in yourGemfile withgem "jekyll-theme-clean-blog".
  3. Install the theme (run the command inside your site directory):bundle install
  4. Replace the current theme in your_config.yml file withtheme: jekyll-theme-clean-blog.
  5. Build your site:bundle exec jekyll serve

Assuming there are no errors and the site is building properly, follow these steps next:

  1. Create the following pages if they do not exist already (or change the extension of existing markdown files from.md to.html):

    • index.html - set tolayout: home
    • about.html - set tolayout: page
    • contact.html - set tolayout: page
    • posts/index.html - set tolayout: page (you will also need to create aposts directory)
  2. Configure theindex.html front matter. Example:

    ---layout:homebackground:'/PATH_TO_IMAGE'---
  3. Configure theabout.html,contact.html, andposts/index.html front matter. Example:

    ---layout:pagetitle:Page Titledescription:This is the page description.background:'/PATH_TO_IMAGE'---
  4. For each post in the_posts directory, update the front matter. Example:

    ---layout:posttitle:"Post Title"subtitle:"This is the post subtitle."date:YYYY-MM-DD HH:MM:SSbackground:'/PATH_TO_IMAGE'---

    For reference, look at thedemo repository to see how the files are set up.

  5. Add the form to thecontact.html page. Add the following code to yourcontact.html page:

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

    Make sure you have theemail setting in your_config.yml file set to a working email address! Once this is set, fill out the form and then check your email, verify the email address using the link sent to you by Formspree, and then the form will be working!

  6. Build your site:bundle exec jekyll serve

Using Core Files

When using the core files, the demo images, posts, and pages are all included with the download. After following the instructions below, you can then go and change the content of the pages and posts.

  1. Download or Clone the repository.

  2. Update the following configuration settings in your_config.yml file:

    • baseurl
    • url
    • title
    • email (after setting this setting to a working email address, fill out the form on the contact page and send it - then check your email and verify the address and the form will send you messages when used)
    • description
    • author
    • twitter_username (Optional)
    • facebook_username (Optional)
    • github_username (Optional)
    • linkedin_username (Optional)
    • instagram_username (Optional)
  3. Build your site:bundle exec jekyll serve

Bugs and Issues

Have a bug or an issue with this template?Open a new issue here on GitHub!

About

Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.

Start Bootstrap was created by and is maintained byDavid Miller.

Start Bootstrap is based on theBootstrap framework created byMark Otto andJacob Thorton.

Copyright and License

Copyright 2013-2021 Start Bootstrap LLC. Code released under theMIT license.

Releases

No releases published

Packages

No packages published

Contributors30

Languages


[8]ページ先頭

©2009-2025 Movatter.jp