LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@s-ike

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

Last updated at Posted at 2022-03-18

環境構築のメモを兼ねて記事にします。

前提

Tailwind CSS のバージョンは２系になります。

ローカルは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です。

# Rubyのバージョンの調べ方
$ ruby -v
# Node.jsのバージョンの調べ方
$ node -v

バージョンが出ないとき

command not foundみたいなことが言われたらこのフォルダでは使えないようです。
RubyとNode.jsを使うための記事はたくさんあるので調べて導入してください。

私はrbenvとnodenvを使って入れているので、rbenvとnodenvがある場合の方法を以下に書きます。

# 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が付いています。
ない方が次の工程から楽なのかも。。

$ gem install --user-install bundler jekyll

導入確認

以下を入力します。

$ jekyll -v

バージョン番号が表示されればOK。
私の環境ではこれでうまくいかないです。
さっきのjekyll導入コマンドを入れたあと、色々英語で書かれた文章の中に以下のような記述がありました。
/Users/ユーザー名/.gem/ruby/2.7.0/bin
この中に入ったようなので、以下のようにしてみます。

/Users/ユーザー名/.gem/ruby/2.7.0/bin/jekyll -v

これでバージョンが出ればOK。出ないと先に進めないです。。

5. Jekyll導入-2

テーマ等なしのブランクjekyllをセットアップします。

# jekyllコマンドがそのまま使える方は以下のように
$ jekyll new プロジェクト名 --blank

# jekyllコマンドがそのまま使えない方は以下のように
$ /Users/ユーザー名/.gem/ruby/2.7.0/bin/jekyll new プロジェクト名 --blank

プロジェクト名に入れた名前のフォルダができたので移動し、Gemfileを作成します。

$ cd プロジェクト名
$ bundle init

これでGemfileができたと思います。

現在のディレクトリはこんな感じです。

大フォルダ/
　└ プロジェクト/
   　├ _data/
   　├ _drafts/
　   ├ ...
   　├ _config.yml
   　├ Gemfile
　   └ index.md

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

Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

# gem "rails"
gem "jekyll"

6. Tailwind CSS導入

前提でも書きましたがTailwind CSSは２系を使います。
以下で導入します。

$ 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を作成します。

$ npx tailwindcss init

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

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"と加筆します。
以下のようになります。

Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

# gem "rails"
gem "jekyll"
gem "jekyll-postcss"

gemをインストールします。

$ bundle install

_config.ymlのプラグインリストに以下を追加します。

plugins:
  - jekyll-postcss

これにより_config.ymlは以下のようになります。

_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というファイルを作成します。

$ touch postcss.config.js

このファイルに以下を書き込みます。

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タグ内に挿入します。

<div class="text-center text-red-500 text-2xl">Hello World</div>

以下のようになります。

_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を以下のように書き換えます。

assets/css/main.scss
---
---

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

これでTailwind CSSを使ったサイトができたはずです。
以下のコマンドでサーバーを起動し、ブラウザで確認してみます。

# jekyllコマンドがそのまま使える方は以下のように
$ bundle exec jekyll serve

# jekyllコマンドがそのまま使えない方は以下のように
$ bundle exec /Users/ユーザー名/.gem/ruby/2.7.0/bin/jekyll serve

これを実行すると、色々と文章が出てくると思いますが、最後の２行を見てみます。

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を作成します。

$ touch .gitignore

以下のように編集します。

.gitignore
_site
.jekyll-metadata
.jekyll-cache/
/node_modules/

GitHub上での動作のために_config.ymlの２箇所を変更します。

  1. baseurlに'/' + リポジトリ名を入れる。
  2. ファイルの末尾に以下を追加。
sass:
  load_paths:
    - _sass
    - node_modules

include: ["node_modules/tailwindcss"]

_config.ymlは以下のようになります。

_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します。例としては以下です。

$ git add .
$ git commit -m "initial commit"

リモートリポジトリを設定してpushします。例としては以下です。

$ 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

Actionsに移動し、「New Workflow」ボタンを押すと「Suggested for this repository」とオススメworkflowが出てきます。
一番先頭にJekyllがあると思うので選択します。
ペンのマークでGitHub上でファイルの編集ができるのでファイルを編集します。
スクリーンショット 2022-03-18 21.49.36.png
以下のように書き換えます。

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://github.com/s-ike/githubioWithTailwind

以下のサイトを参考にしました。
Using Jekyll with Tailwindcss on GitHub Pages
Using Tailwind CSS with Jekyll

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?