Repository files navigation

Copyright 2016Dean Attali

Beautiful-Jekyll is a ready-to-use Jekyll theme to help you create an awesome website quickly. Perfect for personal blogs or simple project websites, with a focus on responsive and clean design. You can look atmy personal website to see it in use, or see examples of websites other people created using this themehere.

This theme was developed for non-commerical purposes. For commerical usage, or if you enjoy this theme, please considersupporting me for the development and continuous maintenance of this template.

To use this theme's gem, you need to first have a functioning Jekyll website. If you don't, there are many resources online for how to set up a Jekyll site. Here are the basic commands to get a minimal Jekyll site set up in Ubuntu:

$ sudo apt-get update$ sudo apt-get install ruby ruby-dev make gcc$ sudo gem install jekyll bundler$ jekyll new ~/mysite

To use the Beautiful-Jekyll theme, add this line to your Jekyll site'sGemfile:

gem"beautiful-jekyll-theme","1.1.1"

Then add this line to your Jekyll site's_config.yml:

theme:beautiful-jekyll-theme

And finally execute:

$ bundle

To preview your site, runbundle exec jekyll serve (optionally with the--host 0.0.0.0 flag if needed) and open your browser athttp://localhost:4000.

Using Beautiful-Jekyll is very simple, but you should take a few minutes to read through the features it supports to learn how to use it.

You can now start adding pages to your site. Beautiful-Jekyll supports three layouts:post,page, andminimal. In order to use Beautiful-Jekyll's template, a page must have itslayout parameter set to one of these options in the YAML.

Any blog posts (pages under the_posts directory) should use thepost layout, while most other pages should use thepage layout. You can use theminimal layout if you want a page with minimal styling, without the bulky navigation bar and footer.

Instead of remembering to manually add the layout parameter to every page's YAML, I recommend you add the following lines to your_config.yml so that all blog posts will automatically have layoutpost and all other pages will have layoutpage:

defaults:  -scope:path:""type:"posts"values:layout:"post"  -scope:path:""values:layout:"page"

Feel free to create the index page (homepage) of your site however you'd like. If you want to have an index page similar to the one atdeanattali.com, then createindex.html as follows:

---layout: pagetitle: My Websitesubtitle: Some short description of my site---<divclass="posts-list">  {% for post in paginator.posts %}<articleclass="post-preview"><ahref="{{ post.url }}"><h2class="post-title">{{ post.title }}</h2>        {% if post.subtitle %}<h3class="post-subtitle">{{ post.subtitle }}</h3>        {% endif %}</a><pclass="post-meta">      Posted on {{ post.date | date: "%B %-d, %Y" }}</p><divclass="post-entry">      {{ post.excerpt | strip_html | xml_escape | truncatewords: 50 }}      {% assign excerpt_word_count = post.excerpt | number_of_words %}      {% if post.content != post.excerpt or excerpt_word_count> 50 %}<ahref="{{ post.url }}"class="post-read-more">[Read&nbsp;More]</a>      {% endif %}</div>    {% if post.tags.size> 0 %}<divclass="blog-tags">      Tags:      {{ post.tags | join: ", " }}</div>    {% endif %}</article>  {% endfor %}</div>{% if paginator.total_pages> 1 %}<ulclass="pager main-pager">  {% if paginator.previous_page %}<liclass="previous"><ahref="{{ paginator.previous_page_path | replace: '//', '/' }}">&larr; Newer Posts</a></li>  {% endif %}  {% if paginator.next_page %}<liclass="next"><ahref="{{ paginator.next_page_path | replace: '//', '/' }}">Older Posts &rarr;</a></li>  {% endif %}</ul>{% endif %}

You'll also need to add these lines to your_config.yml because the code above uses pagination:

paginate:5gems:  -jekyll-paginate

Make sure there is noindex.md file (if there is one, then delete it).

Add these lines to your_config.yml file to get a demo navigation bar:

navbar-links:Home:""About Me:"aboutme"Resources:    -Beautiful Jekyll:"http://deanattali.com/beautiful-jekyll/"    -Learn markdown:"http://www.markdowntutorial.com/"    -GitHub Pages:"https://pages.github.com/"Author's home:"http://deanattali.com"

Change these values to match the pages on your site. Each menu item is composed of akey:value pair, where thekey is the text that shows up in the navigation bar, andvalue is the URL to link to. The URL can either be the name of a page on your site (eg."" will go to your homepage,aboutme will go to a page calledaboutme on your site), or a URL to an external site beginning inhttp. If you want to define sub-menus, use the format that theResources menu is using in the sample code above.

You can add an image to the middle of the navigation bar by defining theavatar parameter in_config.yml. The image should be a square (width = height). This image will disappear once the user scrolls down in the page.

avatar:"/path/to/image.png"

You can also place an image in the top-left corner of the navigation bar instead of your website's title. This is done with thetitle-img parameter in_config.yml:

title-img:"/path/to/image.png"

You can add contact information and social media links in the footer. They will be displayed as nice little logos, to give the footer a clean feel. Add the following to your_config.yml file:

author:name:Some Personemail:"youremail@domain.com"facebook:yourname# eg. daattaligithub:yourname# eg. daattalitwitter:yourname# eg. daattalitelephone:yourphone# eg. +14159998888reddit:yourname# eg. daattaligoogle-plus:+yourname# eg. +DeanAttali or 109424658772469020925linkedin:yourname# eg. daattalixing:yourname# eg. daattalistackoverflow:yourlink# eg. "3943160/daattali"snapchat:yourname# eg. daattaliinstagram:yourname# eg. daattaliyoutube:yourlink# eg. user/daattali or channel/daattalispotify:yourname# eg. daattali

Remove the lines that you don't want to display in the footer, and changeyourname to the correct values in the links you want to keep.

You can add an icon that will link to an RSS feed of your blog by including the following parameter in_config.yml:

rss-footer:true

After all the contact info links, you can also add the name of your website by defining theurl-pretty parameter in_config.yml:

url-pretty:"MyWebsite.com"

By default, every blog post will have buttons at the bottom for sharing the page on Twitter, Facebook, LinkedIn, and Google+. If you want to disable these buttons, add these lines to your_config.yml:

share-links-active:twitter:falsefacebook:falsegoogle:falselinkedin:false

These settings will remove all four buttons. You can usetrue instead offalse for any buttons that you want to keep.

If you want to enable comments on your site, Beautiful-Jekyll supports theDisqus comments plugin. To use it, simply sign up to Disqus and add your Disqus shortname (not the userid) to thedisqus parameter in_config.yml:

disqus:yourshortname

Beautiful-Jekyll lets you easily add Google Analytics to all your pages. This will allow you to track all sorts of information about visits to your website, such as how many times each page is viewed and where (geographically) your users come from. To add Google Analytics, simply sign up toGoogle Analytics to obtain your Google Tracking ID, and add this tracking ID to thegoogle_analytics parameter in_config.yml:

google_analytics:yourid

These are all the parameters you can place inside a page's YAML front matter that Beautiful-Jekyll supports.

If you find anything wrong or would like to contribute in any way, feel free to submit a pull request/open an issueon GitHub, orsend me a message.

Thank you toall contributors. Special thanks to the following people with non-trivial contributions (in chronological order):@hristoyankov,@jamesonzimmer,@XNerv,@epwalsh,@rtlee9.

This template was not made entirely from scratch. I would like to give special thanks to:

• Barry Clark and his projectJekyll Now, from whom I've taken several ideas and code snippets, as well as some documenation tips.
• Iron Summit Media and their projectBootstrap Clean Blog, from which I've used some design ideas and some of the templating code for posts and pagination.

I'd also like to thankDr. Jekyll's Themes,Jekyll Themes, and anotherJekyll Themes for featuring Beautiful Jekyll in their Jekyll theme directories.