JekyllとTailwind CSSで作ったサイトをgithub pagesで公開する

環境構築のメモを兼ねて記事にします。
# 前提
:::note warn
Tailwind CSS のバージョンは２系になります。
:::
:::note warn
ローカルはintel macでの検証しかしていません。
:::

一応、JekyllとGitHubについて以下にURLを載せますが、このあたりは知っている前提になります。

## Jekyll
公式：https://jekyllrb.com/

## GitHub
https://github.com/
アカウントを持っており、ローカルから自分のリポジトリへpushできることが前提になります。

# はじめに
この記事ではステップバイステップでGitHubでJekyllとTailwind CSSで作成した静的サイトを公開する工程を掲載します。

なるべく簡単な表現を用いて書いてみます。冗長に感じられる方もいらっしゃると思いますがご了承ください。

# つくる

## 1. フォルダ作成
このプロジェクトを入れるためのフォルダを作ります。
今回は以下のような構成を考えており今作るのは「大フォルダ」です。名前は何にも影響しないので適当で良いです。
```
大フォルダ/
　└ プロジェクトフォルダ/
   　├ Jekyllでできるフォルダ/
   　├ Jekyllでできるフォルダ/
　   ├ Jekyllでできるフォルダ/
　   ├ ...
```
## 2. フォルダに移動
ターミナルでこのフォルダに移動してください。

## 3. RubyとNode.jsの設定
RubyとNode.jsが必要です。
以下のコマンドをそれぞれ打ってみて、バージョンが表示されればOKです。
```shell
# Rubyのバージョンの調べ方
$ ruby -v
# Node.jsのバージョンの調べ方
$ node -v
```
### バージョンが出ないとき
`command not found`みたいなことが言われたらこのフォルダでは使えないようです。
RubyとNode.jsを使うための記事はたくさんあるので調べて導入してください。

私はrbenvとnodenvを使って入れているので、rbenvとnodenvがある場合の方法を以下に書きます。
```shell
# 2.5.0以上のRubyを入れます。
# rbenvで導入済みのバージョンから選んでローカルに適応。
$ rbenv local 2.7.2

# nodenv install -l でインストール可能バージョン表示できます。
# nodenvで導入済みのバージョンから選んでローカルに適応。
$ nodenv local 14.4.0
```
## 4. Jekyll導入-1
Jekyllの公式と少し違うコマンドが書いてあります。`--user-install`が付いています。
ない方が次の工程から楽なのかも。。
```shell
$ gem install --user-install bundler jekyll
```
### 導入確認
以下を入力します。
```shell
$ jekyll -v
```
バージョン番号が表示されればOK。
私の環境ではこれでうまくいかないです。
さっきのjekyll導入コマンドを入れたあと、色々英語で書かれた文章の中に以下のような記述がありました。
`/Users/ユーザー名/.gem/ruby/2.7.0/bin`
この中に入ったようなので、以下のようにしてみます。
```shell
/Users/ユーザー名/.gem/ruby/2.7.0/bin/jekyll -v
```
これでバージョンが出ればOK。出ないと先に進めないです。。

## 5. Jekyll導入-2
テーマ等なしのブランクjekyllをセットアップします。
```shell
# jekyllコマンドがそのまま使える方は以下のように
$ jekyll new プロジェクト名 --blank

# jekyllコマンドがそのまま使えない方は以下のように
$ /Users/ユーザー名/.gem/ruby/2.7.0/bin/jekyll new プロジェクト名 --blank
```
`プロジェクト名`に入れた名前のフォルダができたので移動し、Gemfileを作成します。
```shell
$ cd プロジェクト名
$ bundle init
```
これでGemfileができたと思います。

現在のディレクトリはこんな感じです。
```
大フォルダ/
　└ プロジェクト/
   　├ _data/
   　├ _drafts/
　   ├ ...
   　├ _config.yml
   　├ Gemfile
　   └ index.md
```

Gemfileをエディタで開き、`gem "jekyll"`と加筆します。
以下のようになります。
```ruby:Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

# gem "rails"
gem "jekyll"
```

## 6. Tailwind CSS導入
前提でも書きましたがTailwind CSSは２系を使います。
以下で導入します。
```shell
$ npm init -y
$ npm install tailwindcss@2.2.19 postcss@latest autoprefixer@latest postcss-import@latest --save-dev
```
package-lock.jsonとpackage.jsonができたと思います。

続いて以下を入力することで、tailwind.config.jsを作成します。
```shell
$ npx tailwindcss init
```

上記コマンドを入力することによってtailwind.config.jsができたと思います。
このファイルの`purge: []`部分を以下のように修正します。

```javascript:tailwind.config.js
module.exports = {
  purge: [
    './_includes/**/*.html',
    './_layouts/**/*.html',
    './_posts/*.md',
    './*.html',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

```
## 7. PostCSS設定
Gemfileをエディタで開き、`gem "jekyll-postcss"`と加筆します。
以下のようになります。
```ruby:Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

# gem "rails"
gem "jekyll"
gem "jekyll-postcss"
```
gemをインストールします。
```shell
$ bundle install
```

_config.ymlのプラグインリストに以下を追加します。
```
plugins:
  - jekyll-postcss
```
これにより_config.ymlは以下のようになります。
```yaml:_config.yml
url: "" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: "" # the subpath of your site, e.g. /blog
title: "" # the name of your site, e.g. ACME Corp.
plugins:
  - jekyll-postcss
```
以下のコマンドによりpostcss.config.jsというファイルを作成します。
```shell
$ touch postcss.config.js
```
このファイルに以下を書き込みます。
```javascript:postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer'),
  ]
}
```

## 8. Tailwind CSSを使ったサイトを作る
_layoutsフォルダの中にdefault.htmlがあるのでここにTailwind CSSを使ったhtmlを書いてみます。
以下をbodyタグ内に挿入します。
```html
<div class="text-center text-red-500 text-2xl">Hello World</div>
```
以下のようになります。
```html:_layouts/default.html
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>{{ page.title }} - {{ site.title }}</title>
    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
  </head>
  <body>
    <div class="text-center text-red-500 text-2xl">Hello World</div>
    {{ content }}
  </body>
</html>
```
assets/css内にあるmain.scssを以下のように書き換えます。
```css:assets/css/main.scss
---
---

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```
これでTailwind CSSを使ったサイトができたはずです。
以下のコマンドでサーバーを起動し、ブラウザで確認してみます。
```shell
# jekyllコマンドがそのまま使える方は以下のように
$ bundle exec jekyll serve

# jekyllコマンドがそのまま使えない方は以下のように
$ bundle exec /Users/ユーザー名/.gem/ruby/2.7.0/bin/jekyll serve
```
これを実行すると、色々と文章が出てくると思いますが、最後の２行を見てみます。
```shell
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
```
最後から２行目はこのURLにアクセスするとJekyllで作ったサイトの内容が見られるよ、という意味です。
http://127.0.0.1:4000/

最終行は、キーボードのコントロールボタンと'c'ボタンとの同時押しでサーバーの起動を終了するよ、という意味です。
（以下「ctrl+c」といいます。）

上記URLにアクセスし、「Hello World」が赤文字でセンターに表示されていれば成功です！

ローカルでのJekyll開発はこれでOKです。
次はGitHubとの連携になります。

※次の工程に進むには一旦サーバーをctrl+cで止めてください。

## 10. GitHubリポジトリ作成
GitHubでリポジトリを作成します。
リポジトリ名は任意です。

## 11. Git
Git管理の対象にしたくないファイルがあるので.gitignoreを作成します。
```shell
$ touch .gitignore
```
以下のように編集します。
```:.gitignore
_site
.jekyll-metadata
.jekyll-cache/
/node_modules/
```
GitHub上での動作のために_config.ymlの２箇所を変更します。
1. baseurlに'/' + リポジトリ名を入れる。
2. ファイルの末尾に以下を追加。 
```yaml
sass:
  load_paths:
    - _sass
    - node_modules

include: ["node_modules/tailwindcss"]
```
_config.ymlは以下のようになります。
```yaml:_config.yml
url: "" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: "/リポジトリ名" # the subpath of your site, e.g. /blog
title: "" # the name of your site, e.g. ACME Corp.
plugins:
  - jekyll-postcss
sass:
  load_paths:
    - _sass
    - node_modules

include: ["node_modules/tailwindcss"]
```
git addしてgit commitします。例としては以下です。
```shell
$ git add .
$ git commit -m "initial commit"
```
リモートリポジトリを設定してpushします。例としては以下です。
```shell
$ git remote add origin git@github.com:GitHubユーザー名/リポジトリ名.git
$ git push -u origin master
```

## 12. GitHub Pages & GitHub Actions
GitHubのリポジトリページのSettings内にある、Pagesに移動し、BranchをmasterにしてSaveします。
![スクリーンショット 2022-03-18 21.41.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87345/aa19d89a-faa7-8ce6-00d0-786421e44a09.png)

Actionsに移動し、「New Workflow」ボタンを押すと「Suggested for this repository」とオススメworkflowが出てきます。
一番先頭にJekyllがあると思うので選択します。
ペンのマークでGitHub上でファイルの編集ができるのでファイルを編集します。
![スクリーンショット 2022-03-18 21.49.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87345/7a03cbaa-79b8-5503-8f7a-0587427c2f46.png)
以下のように書き換えます。
```yaml:jekyll.yml
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Install Dependencies
      run: npm install
       
    - name: Build the site in the jekyll/builder container
      run: |
        docker run \
        -v ${{ github.workspace }}:/srv/jekyll -v ${{ github.workspace }}/_site:/srv/jekyll/_site \
        jekyll/builder:latest /bin/bash -c \
        "chmod -R 777 /srv/jekyll && JEKYLL_ENV=production NODE_ENV=production jekyll build --future"
        
    - name: GitHub Pages
      uses: crazy-max/ghaction-github-pages@v2.5.0
      with:
        build_dir: _site/
      env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```
書き換えたらGitHub上でコミットします。

これでWorkflowが動いたあと、リモートリポジトリにgh-pagesというブランチができていると思います。

先ほどのSettings＞PagesのページでSourceのBranchを変更します。
![スクリーンショット 2022-03-18 21.55.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87345/22762d7f-8e2a-7abd-4963-42e5dc8153b9.png)
以上です。

# 参考
この手順で作成したリポジトリです。
https://github.com/s-ike/githubioWithTailwind

以下のサイトを参考にしました。
[Using Jekyll with Tailwindcss on GitHub Pages](https://medium.com/@mehdi.h/using-jekyll-with-tailwindcss-on-github-pages-50c3d8401230)
[Using Tailwind CSS with Jekyll](https://stevenwestmoreland.com/2021/01/using-tailwind-css-with-jekyll.html)