Git Product home page Git Product logo

startbootstrap-clean-blog-jekyll's Introduction

Start Bootstrap - Clean Blog Jekyll - Official Jekyll Version

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

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 your Gemfile with gem "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 with theme: 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 to layout: home
    • about.html - set to layout: page
    • contact.html - set to layout: page
    • posts/index.html - set to layout: page (you will also need to create a posts directory)
  2. Configure the index.html front matter. Example:

    ---
    layout: home
    background: '/PATH_TO_IMAGE'
    ---
  3. Configure the about.html, contact.html, and posts/index.html front matter. Example:

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

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

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

  5. Add the form to the contact.html page. Add the following code to your contact.html page:

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

    Make sure you have the email 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 by David Miller.

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Copyright and License

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

startbootstrap-clean-blog-jekyll's People

Contributors

alzeih avatar amanabt avatar ameer1234567890 avatar bexelbie avatar coliff avatar daattali avatar davidtmiller avatar evansmusomi avatar graingert avatar icarito avatar jangalinski avatar jargnar avatar jimmy0017 avatar kingston avatar matheusbsilva avatar olzaragoza avatar osbornm avatar rdev5 avatar smexxarn avatar solaomosola avatar thejimnicholson avatar tmaier avatar villasv avatar vipinindkumar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

startbootstrap-clean-blog-jekyll's Issues

Contact form does not work due to recaptcha

I wondered why my contact form does not work.

I checked the network requests.
bildschirmfoto 2018-11-10 um 15 28 33

The request itself looked quite ok
image

But the HTML returned by formspree does not look that nice.
image

As you can see, it requests for a captcha to pass.

Please provide a way how to handle this within the theme.

Custom Post Link

I tried changing the example posts by remove the date but now that post will not show up. I did this:

2016-07-04-dinosaur.html -> dinosaur.html

Current Behaviour:
Dinosaur post does not show up.

Expected Behavior:
Dinosaur posts shows up and links via new link /dinosaur.html

is this theme unmaintained?

first issue is the wrong theme name and while I was opening PR for it I saw it was already opened at #149 ...

are you looking for maintainers ?

Posts page newer/older posts links reversed

In the posts page the paginator Newer Posts and Older Posts links seems to point wrong direction.

Opening the Posts page shows the newest posts first, but the link is titled with "Newer posts" while it should be "Older posts"?

Modify the background-cover size

Hi, I want to modify the background-cover size because the my images' size doesn't fit the cover. so i check the code to find where i can modify this.

  • page.html: find the class of "intro-header"
  • mixins.less: find the "background-cover"

but i still can't find the way to modify the cover, could you help to solve this problem?

@Suhas SG

PHP forms

PHP mail form and JQuery are great but how to use my own forms ?
Because it seems that each form is tested and validated by JQuery.

For example, with this code in any page :

<form action="somescript.php" method="POST">

I got :

Uncaught TypeError: Cannot read property 'indexOf' of undefinedclean-blog.min.js:7
$.jqBootstrapValidation.submitSuccessclean-blog.min.js:7
(anonymous function)jquery.min.js:3
n.event.dispatchjquery.min.js:3 
r.handle

So, how to disable JQuery for other forms than contact form ?
As the id="contactForm", why JQuery is not used only for this id ?

css not showing

hello,

thanks for setting up this theme. I am new to jekyll and github and pretty much coding in general!

I forked your theme, and tried to tweak it to setup a blog for myself, but I don't know why the CSS doesn't show up: http://d.pr/i/1kvV5/37q9O12B

What am i missing?

i read somewhere that it's probably something wrong with the config.yml file, so I've screenshot that as well. http://d.pr/i/iuKP/2Ru0CL1j

Thanks
Sam

Using forms.brace.io for static contact form

Hello,

I was trying to use forms.brace.io to get the contact form to work straight out of Github pages. It works.

The problem I am having is the messages are being relayed to my inbox, but the 'success' message after someone hits submit isn't actually a success message, It just displays the error/failure message which is written on numerous accounts in the JS validations.

Could someone please help me with why that is happening? If the message is successfully being sent, then why is the failure message coming up?

Thanks
Tara

Contact form not working

Can someone please tell me where I need to change so that the contact form will work?

http://i.imgur.com/71XnrPd.png?1

I added my email address in mail/contact_me.php what else should I need to do?

$to = '[email protected]'; // Add your email address inbetween the '' replacing [email protected] - This is where the form will send a message to.
$email_subject = "Website Contact Form:  $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: [email protected]\n"; // This is the email address the generated message will be from. We recommend using something like [email protected].
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>

Jekyll theme could not be found

Following the jekyll documentation found here: https://jekyllrb.com/docs/themes/ I was trying to install and change a gem based theme so I have chosen the jekyll-theme-primer for this and I've run the following command and instructed under the https://jekyllrb.com/docs/themes/#installing-a-theme section:

gem "jekyll-theme-primer"
and got this error:

ERROR: While executing gem ... (Gem::CommandLineError)
Unknown command jekyll-theme-awesome
After doing some research I've found that I should have added install to my query as described here: While executing gem, unknown command

After running this:

gem install "jekyll-theme-primer"
I successfully installed the primer gem based theme and got the following confirmation:

Successfully installed jekyll-theme-primer-0.5.2
Parsing documentation for jekyll-theme-primer-0.5.2
Done installing documentation for jekyll-theme-primer after 0 seconds
1 gem installed
First question: Was the official documentation incorrect or am I missing something?

I proceeded to run the bundle install command:

bundle install
and replaced my current minima theme from the _config.yml with the jekyll-theme-primer by adding/replacing this line:

theme: jekyll-theme-primer
Now when I tried to run either the:

jekyll serve
or the:

bundle exec jekyll serve
commands, I get the following error:

jekyll 3.5.2 | Error: The jekyll-theme-primer theme could not be found.
So why it can't find the gem theme if the installation was successful?

Typo in the clean-blog.js file

There's a typo in the clean-blog.js file that prevents validation on the input fields of the contact form.$("#contactFrom input,#contactForm textarea") should be contactForm.
Thank you

No _config.yml file in repository

Hi, this theme looks beautiful!
I read README, you said I should edit _config.yml file, but I couldn't find it in this repository, should I use one generated by jekyll?

images on markdown files

I am having a lot of trouble displaying my images on this theme.

I am not using unsplash, I have the images saved in a folder called _img.

Here is the original code:
Demo Image

Mine code:
Demo Image
There is only a small image icon shown.

Has anyone else had this issue? I have done a lot of intense google searching, but the format for markdown I found doesn't work either.

Any advice would be great!!

Headings in markdown

Hi,
i was trying to start blog with this template. I have created simple markdown page

---
layout: post
title: We are heading to Iceland
published: true
---
##Iceland, two people, one week and 1000EUR - preparation##

Text

###Dates
We are going **29th June and 5th July 2017**. 

###Keep it cheap

However the headings do not translate to the <hx></hx> tags but it stays as was written in markdown. It basically produces HTML code

<p>###Dates
We are going <strong>29th June and 5th July 2017</strong>. </p>

Strange think is that part of markup is translated and another part is not.
Do you have any tweak for this?
Thanks,
Vojtech.

landing page option

For context, I'm currently upgrading a little landing page from BlackrockDigital's awesome Landing Page theme up to a full jekyll blog-enabled site with the Clean Blog theme. I love your guys's work and I really appreciate you sharing it open source so I can make my site pretty 👍

I'm new to Jekyll and not great with Bootstrap, so this may be a dumb thing to ask, but I would love to know how to keep the homepage very landing-page style with a large header graphic like your other theme while doing a site in this theme. I think adding a landing page template to the theme would be an awesome feature extension for this project, but even just a little advice for changing the intro-header height without hackily overwritting stuff that should be handled by Bootstrap/Jekyll would be greatly appreciated.

(and of course if this project turns out well, I'd be happy to make a pull request and add whatever landing-page template addition it ends up in, if that's a feature extension you guys think would benefit this project

Standard proportions for index page
default example

Desired proportions
landing example

Mistype in README.md

In section describing installation from Ruby gem it says to replace theme in _config.yml with theme: jekyll-theme-awesome. I suppose it should be changed to theme: jekyll-theme-clean-blog.

Home page is blank

I followed the following steps

  1. git clone [email protected]:BlackrockDigital/startbootstrap-clean-blog-jekyll.git
  2. Edit _config.yml

baseurl: ""
url: "/"

  1. bundle install
  2. bundle exec jekyll serve

I see a warning

Deprecation: The 'gems' configuration option has been renamed to 'plugins'. Please update your config file accordingly.

The site loads fine. but the homepage is blank. I can do http://localhost:4000/about but I want to know how to see the blog post summary on the home page.

Publishing Wordpress Imported Blog

Hi,

I've been trying to publish this blog that I've imported from wordpress using Jekyll plugin, now I'm unable to get it published the way it should.

Although xml feed is showing all posts.

Please take a look and suggest what should I do or what is wrong with it?

Regards,

Yogesh

highlight code block problem

I've cloned the startbootstrap-clean-blog-jekyll repo. I wrote some markdown files at the _post , and I found that the code block can't be highlighted. How can I solve?

About Public License

Sorry Im new to Public License, but I want to keep everything right.

I know Apache License requires preservation of the copyright notice and disclaimer. But I dont know what they exactly are.

Since there is no trademark/watermark in the code, and if I changed _config.yml, the Copyright © Your Website would be re-generated in the footer.

And I noticed that there is Copyright 2013-2015 Iron Summit Media Strategies, LLC in the LICENSE file, should I keep it and create my own?

So, generally, If I wanna modify code or re-distribute, keep Apache or change to MIT, what should I pay attention to?

Security Vulnerability

When I cloned this them, Github notified me that:

"We found a potential security vulnerability in one of your dependencies.
A dependency defined in package-lock.json has known security vulnerabilities and should be updated".

With further inspection, I found that the "hapijs / hoek (2.16.3)" package caused the security vulnerability.

Any thoughts on this?

Won't accept date in 2019

When creating a post from 2019, If I use the template YYYY-MM-DD for the and use a date in 2019, a post isn't generated. If I have everything unchanged in my .markdown file except the date is 2018 it works. Any suggestions?

Where do the JS files get called from in the jekyll version

Hi I have added a custom JS file but it doesnt seem to work on mobile although it works fine on desktops. I added my JS file to the head.html in the _includes but i cant seem to find any references to the other JS files in that file. Where is it getting called and/or where should i add my portion of js script to have it run on the mobile version as well. thanks

Inability to parse and display html tables

Hi,
The there not displaying html table in my blog post. It just displays the closing table tag in plain text on the webpage. Is there any other way to display a table in a post

Some scss file missing for Bootstrap 4

First thanks for this theme and your other theme, we use an augmented merged version of the two. However, with 1014 fork we thought to check if someone hadn't done these update first before we spend some time on it. Otherwise we will probably update our fork with the pull request and boostrap 4.1.x, and other tweak we have until the main branch gets updated again.

In Boostrap 4 media queries changed

Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have @include media-breakpoint-up/down/only. Now, instead of writing @media (min-width: @screen-sm-min) { ... }, you can write @include media-breakpoint-up(sm) { ... }.

but to use them those file are necessary

https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_functions.scss

but is missing in the theme.

Jekyll serve results in error in reading configuration

I am trying to run this locally but get the following when I type jekyll serve:

WARNING: Error reading configuration. Using defaults (and options).
syntax error on line 15, col 73: `'

Any idea why this might be happening?
The page is served but without any of the styling (likely due to use of default config conditions.

convert to a new style jekyll gem-theme

Jekyll has support for themes to be loaded via a gem which makes upgrading sites as the theme is modified easier.

I started looking into this, however I don't know sass and how it relates to js and the fonts well enough to put it together.

Jekyll serve error

Deprecation: You appear to have pagination turned on, but you haven't included the jekyll-paginate gem. Ensure you have gems: [jekyll-paginate] in your configuration file.

Beginner Help

Hello I just downloaded the template in a zip file to my desktop. Went to open in the index.html tab to start editing, When I preview the file, none of the styling, photos, are displaying at all. What step am I missing? I am novice, and haven't done this in a few months. Thank you

Errors with Github Pages

How can I host my blog at github.io? I have everything working locally already.

UPDATE: I got it to work. But why does it look like this online? In my local jekyll hosted server it looks completely fine...? Any advice?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.