7 whiteglass is a minimal, responsive Jekyll theme for hackers.
11 Add this line to your Jekyll site's Gemfile:
14 gem "jekyll-whiteglass"
17 And add this line to your Jekyll site's `_config.yml`:
20 theme: jekyll-whiteglass
29 Or install it yourself as:
32 gem install jekyll-whiteglass
37 1. Generate a new Jekyll blog:
40 jekyll new blog --skip-bundle
44 2. Edit `Gemfile` to use whiteglass theme:
47 gem "jekyll-whiteglass"
50 3. Edit `_config.yml` to use whiteglass theme and its plugins:
53 theme: jekyll-whiteglass
59 permalink: /:year/:month/:day/:title/
60 paginate_path: /posts/:num/
67 layout: category_archives
69 category: /categories/:name/
74 [`index.html`](https://github.com/yous/whiteglass/blob/master/index.html),
75 [`about.md`](https://github.com/yous/whiteglass/blob/master/about.md),
76 [`archives.md`](https://github.com/yous/whiteglass/blob/master/archives.md),
77 [`feed.xml`](https://github.com/yous/whiteglass/blob/master/feed.xml), and
78 [`_data/navigation.yml`](https://github.com/yous/whiteglass/blob/master/_data/navigation.yml)
83 curl -L -O "https://github.com/yous/whiteglass/raw/master/{index.html,about.md,archives.md,feed.xml}"
84 curl -L --create-dirs -o _data/navigation.yml https://github.com/yous/whiteglass/raw/master/_data/navigation.yml
87 5. Install gems and you're good to go! The blog will be available on
88 `http://127.0.0.1:4000`.
92 bundle exec jekyll serve
95 ## Deployment to GitHub Pages using Travis CI
97 This theme uses [jekyll-archives](https://github.com/jekyll/jekyll-archives) gem
98 which is [not supported by GitHub Pages](https://help.github.com/articles/configuring-jekyll-plugins/).
99 If you want to use full features like categories and tags, I recommend you to
100 use Travis CI or other CI services.
102 To deploy using Travis CI, first copy the [`.travis.yml`](https://github.com/yous/whiteglass/blob/master/.travis.yml)
103 of this repository. You can change `target-branch` (`gh-pages` by default) and
104 `on.branch` (`master` by default) as you want. If you want further
105 customization, see [Travis CI's documentation page](https://docs.travis-ci.com/user/deployment/pages/).
107 You'll see there's `github-token: $GITHUB_TOKEN`, and this is what you should
108 configure. Go to your [personal access tokens](https://github.com/settings/tokens)
109 page, and generate new token with `public_repo` or `repo` permission as you
110 need. Then go to Travis CI's settings page of your repository, and add a new
111 environment variable `GITHUB_TOKEN` with the value of the token you generated.
117 To override the default structure and style of whiteglass, simply create the
118 concerned directory at the root of your site, copy the file you wish to
119 customize to that directory, and then edit the file. e.g., to override the
120 [`_includes/footer_content.html`](_includes/footer_content.html) file to add
121 contents to footer, create an `_includes` directory, copy
122 `_includes/footer_content.html` from jekyll-whiteglass gem folder to
123 `<your-site>/_includes` and start editing that file.
125 For example, you can add favicons to `_includes/head_custom.html`:
128 <link rel="icon" type="image/x-icon" href="{{ "/favicon.ico" | relative_url }}">
129 <link rel="apple-touch-icon" href="{{ "/apple-touch-icon.png" | relative_url }}">
130 <link rel="apple-touch-icon" sizes="76x76" href="{{ "/apple-touch-icon-76x76.png" | relative_url }}">
131 <link rel="apple-touch-icon" sizes="120x120" href="{{ "/apple-touch-icon-120x120.png" | relative_url }}">
132 <link rel="apple-touch-icon" sizes="152x152" href="{{ "/apple-touch-icon-152x152.png" | relative_url }}">
133 <link rel="apple-touch-icon" sizes="180x180" href="{{ "/apple-touch-icon-180x180.png" | relative_url }}">
136 The site's default CSS is in the gem itself,
137 [`assets/main.scss`](assets/main.scss). To override the default CSS, the file
138 has to exist at your site source. Do either of the following:
140 - Create a new instance of `main.scss` at site source
141 - Create a new file `main.scss` at `<your-site>/assets/`
142 - Add the frontmatter dashes, and
143 - Add `@import "whiteglass";`, to `<your-site>/assets/main.scss`
144 - Add your custom CSS
145 - Download the file from this repo
146 - Create a new file `main.scss` at `<your-site>/assets/`
147 - Copy the contents at [`assets/main.scss`](assets/main.scss) onto the `main.scss` you just created, and edit away
148 - Copy directly from jekyll-whiteglass gem
149 - Go to your local jekyll-whiteglass gem installation directory (run `bundle show jekyll-whiteglass` to get the path to it)
150 - Copy the `assets/` folder from there into the root of `<your-site>`
151 - Change whatever values you want, inside `<your-site>/assets/main.scss`
155 `site.lang` is used to declare the primary language for each web page within the
158 `lang: en-US` sets the `lang` attribute for the site to the United States flavor
159 of English, while `en-GB` would be for the United Kingdom style of English.
160 Country codes are optional and the shorter variation `lang: en` is also
161 acceptable. You may want to write a post in different language, then add `lang`
162 attribute to the frontmatter of that post:
172 `site.description` describes the site. This is mainly used in meta descriptions
173 for improving SEO. Also, you can set `description` attribute for each post:
178 description: This is an awesome post.
181 If you don't specify `post.description`, then `post.excerpt` will be used if it
186 `external-url` turns the title of your post to a link. Specify a URL which you
191 title: Jekyll whiteglass theme
192 external-url: https://github.com/yous/whiteglass
195 Then the title of your post would look like a link with text
196 `Jekyll whiteglass theme →`. This also applies to your blog feed.
200 Each post can have `categories` attribute. It can be a string or an array. This
201 will be displayed on index, archive and each post, and provide a link to the
212 title: Another Awesome Post
220 Each post can have `tags` attribute. It can be a string or an array. This will
221 be displayed on index, archive and each post, and provide a link to the archive
232 title: Another Awesome Post
240 Create `<your-site>/feed.xml` with:
248 If you want to use another path for feed, you can specify a non-default path via
256 Then create `<your-site>/atom.xml` with the same content of `feed.xml` above.
260 whiteglass provides the ability to include your favourite commenting service, like [Disqus](https://disqus.com) or [Isso](https://posativ.org/isso).
262 To enable comments on pages and posts:
263 1. Overwrite the `_includes/custom_comments_provider.html` with your custom provider of comments.
264 2. Add `comments: true` to your `_config.yml`.
266 To disable comments on certain pages or posts specify `comments: false` in the front matter of the page or post.
272 Each post can have `keywords` attribute. This is a comma-separated list which is
273 used in meta descriptions for improving SEO.
277 title: How to configure jekyll-whiteglass
278 keywords: jekyll, whiteglass, github pages
281 YAML list is also available:
292 - `site.twitter_username` sets `twitter:site` and `twitter:creator` meta tag
293 - `site.twitter_image` sets `twitter:image:src` meta tag
294 - `page.twitter_card.type` sets `twitter:card` meta tag (default: `summary`)
295 - If `page.twitter_card.type` is `gallery`, it sets `twitter:image0`, `twitter:image1`, `twitter:image2` and `twitter:image3` meta tags with `page.twitter_card.image`, `page.twitter_card.image1`, `page.twitter_card.image2` and `page.twitter_card.image3`, respectively
296 - If `page.twitter_card.type` is `photo`, `page.twitter_card.width` sets `twitter:image:width` meta tag and `page.twitter_card.height` sets `twitter:image:height` meta tag
297 - `page.twitter_card.creator` sets `twitter:creator` meta tag. It overrides `site.twitter_username`
298 - `page.twitter_card.image` sets `twitter:image:src` meta tag if `page.twitter_card.type` is not `gallery`. It overrides `site.twitter_image`
302 - `site.facebook_app_id` sets `fb:admins` meta tag
303 - `site.facebook_page` sets `article:author` meta tag
304 - `site.facebook_image` sets `og:image` meta tag
305 - `page.facebook.image` sets `og:image` meta tag. It overrides `site.facebook_image`
309 To define header links, add titles and URLs under the `main` key in
310 `_data/navigation.yml`:
319 url: https://github.com/yous/whiteglass
322 ### Enabling Google Analytics
324 To enable Google Analytics, add the following lines to your Jekyll site:
327 google_analytics: UA-NNNNNNNN-N