|
| 1 | +# Sleek |
| 2 | + |
| 3 | +[](https://badge.fury.io/rb/jekyll-sleek) [](https://travis-ci.org/janczizikow/sleek) [](https://github.com/janczizikow/sleek) |
| 4 | + |
| 5 | +A modern [Jekyll](https://jekyllrb.com/) theme focused on speed performance & SEO best practices. |
| 6 | + |
| 7 | +> ⚠️ This theme is no longer actively maintained. |
| 8 | +
|
| 9 | + |
| 10 | + |
| 11 | +## Features |
| 12 | + |
| 13 | +* Compatible with [Github Pages](https://pages.github.com/) |
| 14 | +* Minimal, responsive and speed performance optimized |
| 15 | +* SEO friendly, with help of [Jekyll SEO Plugin](https://github.com/jekyll/jekyll-seo-tag) |
| 16 | +* Easy [Google Tag Manager](https://tagmanager.google.com/) Integration |
| 17 | +* Support for [Disqus](https://disqus.com/) comments |
| 18 | +* Form submissions with [Formspree](#formspree) |
| 19 | + |
| 20 | +[Preview Demo](https://janczizikow.github.io/sleek/) |
| 21 | + |
| 22 | +## Installation |
| 23 | + |
| 24 | +### System Requirements |
| 25 | + |
| 26 | +To use this project, you'll need the following things on your local machine: |
| 27 | + |
| 28 | +#### Jekyll |
| 29 | + |
| 30 | +```shell |
| 31 | +gem install jekyll |
| 32 | +``` |
| 33 | + |
| 34 | +#### NodeJS (8 or greater) |
| 35 | + |
| 36 | +Download and open the [NodeJS installer](https://nodejs.org/en/) |
| 37 | + |
| 38 | +#### Gulp CLI (optional, but recommended) |
| 39 | + |
| 40 | +```shell |
| 41 | +npm install --global gulp-cli |
| 42 | +``` |
| 43 | + |
| 44 | +### Up & Running |
| 45 | + |
| 46 | +1. [Fork the repo](https://github.com/janczizikow/sleek/fork) |
| 47 | +2. Clone or download the repo into directory of your choice: `git clone https://github.com/your-github-username/sleek.git` |
| 48 | +3. Inside the directory run `bundle install` and `npm install` |
| 49 | +4. If you want to use [gulp.js](https://gulpjs.com/) run `gulp` or `npm start` |
| 50 | + * if you don't want to use gulp you can run `bundle exec jekyll serve` instead |
| 51 | + |
| 52 | +#### Installing to existing jekyll project |
| 53 | + |
| 54 | +Add this line to your Jekyll site's `Gemfile`: |
| 55 | + |
| 56 | +```ruby |
| 57 | +gem "jekyll-sleek" |
| 58 | +``` |
| 59 | + |
| 60 | +And add this line to your Jekyll site's `_config.yml`: |
| 61 | + |
| 62 | +```yaml |
| 63 | +theme: jekyll-sleek |
| 64 | +``` |
| 65 | +
|
| 66 | +And then execute: |
| 67 | +
|
| 68 | + $ bundle |
| 69 | +
|
| 70 | +Or install it yourself as: |
| 71 | +
|
| 72 | + $ gem install jekyll-sleek |
| 73 | +
|
| 74 | +## File Structure Overview |
| 75 | +
|
| 76 | +```bash |
| 77 | +sleek |
| 78 | +├── _includes # theme includes |
| 79 | +├── _js # javascript files (by default jquery will be included with the scripts inside) |
| 80 | +├── _layouts # theme layouts (see below for details) |
| 81 | +├── _pages # pages folder (empty by default) |
| 82 | +├── _posts # blog posts |
| 83 | +├── _sass # Sass partials |
| 84 | +├── assets |
| 85 | +| ├── css # minified css files |
| 86 | +| ├── img # images and icons used for the template |
| 87 | +| └── js # bundled and minified files from _js folder |
| 88 | +├── _config.yml # sample configuration |
| 89 | +├── gulpfile.js # gulp tasks (tasks autorunner) |
| 90 | +├── index.md # sample home page (blog page) |
| 91 | +└── package.json # gulp tasks |
| 92 | +``` |
| 93 | + |
| 94 | +## Usage |
| 95 | + |
| 96 | +You can modify the theme by changing the settings in `_config.yml`. |
| 97 | + |
| 98 | +### Posts |
| 99 | + |
| 100 | +Create a new Markdown file such as 2017-01-13-my-post.md in _post folder. Configure YAML Front Matter (stuff between `---`): |
| 101 | + |
| 102 | +```yaml |
| 103 | +--- |
| 104 | +layout: post # needs to be post |
| 105 | +title: Getting Started with Sleek # title of your post |
| 106 | +featured-img: sleek #optional - if you want you can include hero image |
| 107 | +--- |
| 108 | +``` |
| 109 | + |
| 110 | +#### Images |
| 111 | + |
| 112 | +In case you want to add a hero image to the post, apart from changing featured-img in YAML, you also need to add the image file to the project. To do so, just upload an image in .jpg format to `_img` folder. The name must before the .jpg file extension has to match with featured-img in YAML. Next, run `gulp img` from command line to generate optimized version of the image and all the thumbnails. You have to restart the jekyll server to see the changes. |
| 113 | + |
| 114 | +Sleek uses [Lazy Sizes](https://github.com/aFarkas/lazysizes). Lazy Loader for loading images. Check the link for more info. Lazy Sizes doesnt’t require any configuration and it’s going to be included in your bundled js file. |
| 115 | + |
| 116 | +### Pages |
| 117 | + |
| 118 | +The home page is located under index.md file. To change the content or design you have to edit the default.html file in `_layouts` folder. |
| 119 | + |
| 120 | +In order to add a new page, create a new html or markdown file under root directory or inside _pages folder. To add a link in navigation add it in `_config.yml`: |
| 121 | + |
| 122 | +```yaml |
| 123 | +# THEME SETTINGS |
| 124 | +navigation: # Navigation links |
| 125 | + - {name: 'Home', link: '/'} |
| 126 | + - {name: 'About', link: '/about'} |
| 127 | + - {name: 'Contact', link: '/contact'} |
| 128 | +``` |
| 129 | +
|
| 130 | +`name` is the text that will be shown and link, well, it's a link. |
| 131 | + |
| 132 | +### Site configuration |
| 133 | + |
| 134 | +Sleek comes with [`jekyll-seo-tag`](https://github.com/jekyll/jekyll-seo-tag) plugin preinstalled to make sure your website gets the most useful meta tags. See [usage](https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md) to know how to set it up. |
| 135 | + |
| 136 | +Additionally, in `_config.yml` you can find custom theme settings under `# THEME SETTINGS` comment. Here's a brief overview of those custom settings: |
| 137 | + |
| 138 | +- `navigation` - collection of links that will be shown in the header |
| 139 | +- `tagline` - text that will be displayed on the homepage under the heading. |
| 140 | +- `hero_img` - background image of the homepage hero section |
| 141 | + |
| 142 | +Other settings usually enable/disable certain feature, and are discussed with the next sections. |
| 143 | + |
| 144 | +### Google Tag Manager |
| 145 | + |
| 146 | +To enable Google Tag Manager, add the uncomment the following line in `_config.yml`: |
| 147 | + |
| 148 | +```yaml |
| 149 | +google_tag_manager: GTM-XXXXXXX |
| 150 | +``` |
| 151 | + |
| 152 | +Replace `GTM-XXXXXXX` with your Google Tag Manager Container ID. |
| 153 | + |
| 154 | +**Note** by default GTM tracking snippet will be also included in development environment. |
| 155 | + |
| 156 | +Google Tag Manager was chosen for this project as it's more flexible than Google Analytics, and it can be used to add GA to your site. |
| 157 | + |
| 158 | +### Disqus |
| 159 | + |
| 160 | +To enable Disqus comments, add your [Disqus shortname](https://help.disqus.com/customer/portal/articles/466208) to `_config.yml`: |
| 161 | + |
| 162 | +```yaml |
| 163 | +disqus: |
| 164 | + shortname: my_disqus_shortname |
| 165 | +``` |
| 166 | + |
| 167 | +### Formspree |
| 168 | + |
| 169 | +To use [Formspree](https://formspree.io/) with your email address, you need to change the following: |
| 170 | + |
| 171 | +Change `[email protected]` email in `_config.yml` |
| 172 | + |
| 173 | +```yaml |
| 174 | + |
| 175 | +``` |
| 176 | + |
| 177 | +You can check if it works by simply submitting the form. |
| 178 | + |
| 179 | +If you have a Formspree Gold Account, you can take advantage of using AJAX to submit form. To do so, uncomment last function in `_js/scripts.js` and run `gulp js`. Now the form will be submitted asynchronously, without leaving the page. |
| 180 | + |
| 181 | +## Contributing |
| 182 | + |
| 183 | +Bug reports and pull requests are welcome on GitHub at [https://github.com/janczizikow/sleek](https://github.com/janczizikow/sleek). This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. |
| 184 | + |
| 185 | +## Development |
| 186 | + |
| 187 | +To set up your environment to develop this theme, run `bundle install` and `npm install`. |
| 188 | + |
| 189 | +The theme is setup just like a normal Jekyll site! Check out [file structure overview](#file-structure-overview) for details. To test the theme, run `gulp` and open your browser at `http://localhost:3000`. This starts a Jekyll server using the theme. Add pages, documents, data, etc. like normal to test the theme's contents. As you make modifications to the theme and to the content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. |
| 190 | + |
| 191 | +## License |
| 192 | + |
| 193 | +The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT). |
0 commit comments