Skip to content
This repository was archived by the owner on May 8, 2021. It is now read-only.

Commit 5ddd483

Browse files
mhanbergmhanberg
committed
Jekyll example
1 parent e89baa0 commit 5ddd483

16 files changed

Lines changed: 245 additions & 0 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ A repository of examples showing how to setup Tailwind in a variety of different
55
## Available Examples
66

77
- [vue-cli](examples/vue-cli)
8+
- [Jekyll](examples/jekyll)
89

910
## Requested Examples
1011

‎examples/jekyll/.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
_site
2+
.DS_STORE
3+
.sass-cache
4+
.jekyll-metadata
5+
node_modules
6+
yarn.lock
7+
Gemfile.lock
8+
_includes/tailwind.js

‎examples/jekyll/404.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
layout: default
3+
---

‎examples/jekyll/Gemfile‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
source "https://rubygems.org"
2+
3+
gem "jekyll", "~> 3.8.5"
4+
5+
group :jekyll_plugins do
6+
gem "jekyll-postcss"
7+
gem "jekyll-purgecss"
8+
end
9+
10+
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
11+
gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
12+
13+
# Performance-booster for watching directories on Windows
14+
gem "wdm", "~> 0.1.0" if Gem.win_platform?
15+

‎examples/jekyll/README.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Jekyll with Tailwind
2+
3+
## About
4+
5+
This project uses [jekyll-postcss](https://github.com/mhanberg/jekyll-postcss) to manage compiling your Tailwind. You can use any [PostCSS](https://postcss.org) plugin by installing it with `yarn` or `npm` and adding it to your `postcss.config.js`.
6+
7+
[jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) is used to integrate Purgecss (only in production).
8+
9+
## Usage
10+
11+
### Locally
12+
13+
`bundle exec jekyll serve`
14+
15+
### Production
16+
17+
`JEKYLL_ENV=production bundle exec jekyll build`
18+
19+
## Install
20+
21+
Once you configure the following files, run:
22+
23+
```shell
24+
$ bundle install
25+
$ yarn install
26+
27+
$ yarn run tailwind init _includes/tailwind.config.js
28+
```
29+
30+
### Gemfile
31+
32+
```ruby
33+
group :jekyll_plugins do
34+
gem "jekyll-postcss"
35+
gem "jekyll-purgecss"
36+
end
37+
```
38+
39+
### _config.yml
40+
41+
```yaml
42+
plugins:
43+
- jekyll-postcss
44+
- jekyll-purgecss
45+
```
46+
47+
### package.json
48+
49+
Update the version numbers to whatever is currently latest.
50+
51+
```json
52+
{
53+
"devDependencies": {
54+
"autoprefixer": "^9.3.1",
55+
"postcss-cli": "^6.0.1",
56+
"postcss-import": "^12.0.1",
57+
"purgecss": "^1.1.0",
58+
"tailwindcss": "^1.0.0"
59+
}
60+
}
61+
```
62+
63+
### postcss.config.js
64+
65+
```javascript
66+
module.exports = {
67+
plugins: [
68+
require("postcss-import"),
69+
require("tailwindcss")("./_includes/tailwind.config.js"),
70+
require("autoprefixer")
71+
]
72+
}
73+
```
74+
75+
### purgecss.config.js
76+
77+
```javascript
78+
module.exports = {
79+
content: ["./_site/**/*.html"],
80+
css: ["./_site/css/site.css"],
81+
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
82+
};
83+
```
84+
85+

‎examples/jekyll/_config.yml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Welcome to Jekyll!
2+
#
3+
# This config file is meant for settings that affect your whole blog, values
4+
# which you are expected to set up once and rarely edit after that. If you find
5+
# yourself editing this file very often, consider using Jekyll's data files
6+
# feature for the data you need to update frequently.
7+
#
8+
# For technical reasons, this file is *NOT* reloaded automatically when you use
9+
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
10+
11+
# Build settings
12+
markdown: kramdown
13+
plugins:
14+
- jekyll-postcss
15+
- jekyll-purgecss
16+
17+
# Exclude from processing.
18+
# The following items will not be processed, by default. Create a custom list
19+
# to override the default setting.
20+
exclude:
21+
- Gemfile
22+
- Gemfile.lock
23+
- node_modules
24+
- yarn.lock
25+
- package-lock.json
26+
- README.md
27+
- postcss.config.js
28+
- purgecss.config.js
29+
- netlify.toml
30+
- bin
31+
- .gitignore

‎examples/jekyll/_includes/analytics.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<script>
2+
// Copy your tracking snippet into this block!
3+
</script>
4+

‎examples/jekyll/_layouts/default.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<head>
2+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<meta charset="utf-8">
4+
{% feed_meta %}
5+
{% seo %}
6+
<link rel="stylesheet" href="/css/site.css">
7+
</head>
8+
<html>
9+
<body>
10+
<section>
11+
{{ content }}
12+
</section>
13+
14+
{% if jekyll.environment == 'production' %}
15+
{% include analytics.html %}
16+
{% endif %}
17+
</body>
18+
</html>
19+

‎examples/jekyll/_layouts/page.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
layout: default
3+
---
4+
5+
{{ content }}

‎examples/jekyll/_layouts/post.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
layout: default
3+
---
4+
5+
{{ content }}

0 commit comments

Comments
 (0)