Getting started
GitHub Pages can automatically generate and serve the website for you. Let’s say you have a username/organisation my-org and project my-proj; if you locate Jekyll source under blog folder of master branch in your repo github.com/my-org/my-proj, the website will be served on my-org.github.io/my-proj.
- Just download or fork and clone the source from github.com/janczizikow/sleek.
- Make sure your local machine has ruby and node
- Edit site settings in
_config.ymlfile according to your project. - Replace
faviconsand_includes/logo.svgwith your own logo.
Note that you might have to adjust some CSS depending on the width and height of your logo. You can find Header / Navigation related SCSS in _sass/layout/nav.scss.
Writing content
Posts
Create a new Markdown file such as 2017-01-13-my-post.md in _post folder. Configure YAML Front Matter (stuff between ---):
---
layout: post # needs to be post
title: Getting Started with Sleek # title of your post
featured-img: sleek #optional - if you want you can include hero image
---
Images
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. Sleek uses Lazy Sizes 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.
Pages
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.
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 to the page, edit navigation setting in _config.yml.
Images TODO
Introduce gulp optimization
| Breakpoint | Image Type | Width | Retina |
|---|---|---|---|
| xs | Post Thumb | 535px | 1070px |
| sm | Post Thumb | 500px | 1000px |
| md | Post Thumb | 329.375px | 658.75px |
| lg | Post Thumb | 445.625px | 891.25px |
| xl | Post Thumb | 353.125px | 706.25px |
| Breakpoint | Image Type | Width | Retina |
|---|---|---|---|
| xs | Post Hero | 535px | 1070px |
| sm | Post Hero | 500px | 1000px |
| md | Post Hero | 329.375px | 658.75px |
| lg | Post Hero | 445.625px | 891.25px |
| xl | Post Hero | 353.125px | 706.25px |
MathJax
If you want to use MathJax in your posts, add mathjax: true in YAML front matter of your post:
---
layout: post
title: Blog Post with MathJax
featured-img: sleek # optional - if you want you can include name of hero image
mathjax: true # add this line in order to enable MathJax in the post
---
Example
In N-dimensional simplex noise, the squared kernel summation radius $r^2$ is $\frac 1 2$ for all values of N. This is because the edge length of the N-simplex $s = \sqrt {\frac {N} {N + 1}}$ divides out of the N-simplex height $h = s \sqrt {\frac {N + 1} {2N}}$. The kerel summation radius $r$ is equal to the N-simplex height $h$.
\(r = h = \sqrt{\frac {1} {2}} = \sqrt{\frac {N} {N+1}} \sqrt{\frac {N+1} {2N}}\) Happy hacking!