Github Pagesにbootstrap sassをインストールする

Github Pagesを簡単にレスポンシブにしたい

ので、Bootstrapを利用したい。

レスポンシブの意味合いが変化しているように感じる。

2000年初め: ウィンドウサイズを変更したときにサイズに応じて各要素が変化する。cssで幅、高さを%指定などで実装
最近: 魑魅魍魎の画面サイズに対応したレイアウトに変化する。

ということで、スマートフォンでも問題ないレイアウトでページが組みたい。

Bootstrapのインストール

参考

jekyllへのbootstrapのインストール概略
- My Jekyll Blog Setup with Bootstrap, SASS and Pygments
- Jekyll with Twitter Bootstrap Sass
SASSについて、jekyllでのSASSコンパイルについて
- CSSのメタ言語Sass(SCSS)、LESSの完全入門
- Jekyll - Assets
  - Jekyll - Assets
Bootstrap sassについて
- Bootstrap 4を使うならSassを使って3倍幸せになろう
- 全部はいらないよね？bootstrap-sassをカスタマイズして使う方法
BootstrapとjQueryとか
Bootstrapインストール確認、インストール後Tips
- GitHub PagesでJekyllを使う場合、cssファイルなどへのパスにはhttps://leico.github.io/TechnicalNoteを使うと良い
- Components

Bootstrapのダウンロード

Get Twitter Bottstrap Sass files

Download zip archive from release page.

Jekyll with Twitter Bootstrap Sass

Download the latest version of bootstrap-sass. Extract it to a temporary folder.

My Jekyll Blog Setup with Bootstrap, SASS and Pygments

ということで、bootstrap-sassをダウンロードしてくる。 bootstrap-sassのダウンロード先だが、本家WebサイトのDownloadにした。

Getting startedの

Sass

Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.

Download Sass

Bootstrap - Getting started

からダウンロードする。

ダウンロードしたらテキトーなディレクトリに展開する。

jQueryのダウンロード

jQueryのサイトから圧縮版をダウンロードする。

Download the compressed, production jQuery 3.1.1

Download jQuery | jQuery

Bootstrapのインストール

展開したファイルを適切なディレクトリに移動させて、jekyllの設定を変更する。

行数が多いのでセクション毎にわけている。

_config.yml を変更する

まずはjekyllの設定を行う。

Add the following line to your _config.yml file:
sass:
    sass_dir: _sass
My Jekyll Blog Setup with Bootstrap, SASS and Pygments

_config.yml にsassが配置されるディレクトリを指定する。引用の通り、 _sass ディレクトリに配置することにする。

_sass ディレクトリの作成

Create a SASS import directory. This is the folder that jekyll will tell SASS to use when you @import things.
$ cd my_jekyll_blog
$ $ mkdir _sass
My Jekyll Blog Setup with Bootstrap, SASS and Pygments

_config.yml に設定した通り、_sass ディレクトリをjekyllプロジェクトページに作成する。

mkdir _sass

Bootstrapのsassファイルインストール

Download the latest version of bootstrap-sass. Extract it to a temporary folder. Then copy the assets/stylesheets/bootstrap.scss file and assets/stylesheets/bootstrap/ folder to your blog SASS import directory. (\_sass).

My Jekyll Blog Setup with Bootstrap, SASS and Pygments

Get Twitter Bottstrap Sass files

Download zip archive from release page.

Unzip the assets folder at the root of your site.

Jekyll with Twitter Bootstrap Sass

片方は _sass 直下、片方は assets を丸ごとコピーしており、それぞれ _config.yml の記述方法も違う。

_sass 直下も assets/stylesheets をsass用ディレクトリにするのも違う気がするので、 Bootstrapを展開したディレクトリの assets/stylesheets ディレクトリを _sass/bootstrap としてコピーするという方法にした。後から javascripts 、 fonts ディレクトリも別の場所に配置する。

cp -r ../bootstrap-sass/assets/stylesheets _sass/bootstrap

Bootstrapのjavascriptファイルインストール

次はjavascriptsを移動させる。これらは js/bootstrap ディレクトリに配置する。ビルドされる必要はないが、出力されるWebサイトデータにコピーされていなければならないので、 _sass 等に配置はできない。

後ほど js ディレクトリにはjQueryもインストールする。

mkdir js
cp ../bootstrap-sass/assets/javascripts js/bootstrap

Bootstrapのfontファイルインストール

フォントは fonts に移動させる。bootstrapのフォント以外を利用する予定がないため。

mkdir fonts
cp ../bootstrap-sass/assets/fonts .

自前のsassファイル作成

ここまできたらbootstrap sassを自作のsassファイルで @import する。ひとまず、自前の大域的に利用するスタイルシートで利用するので、 css/style.sass ファイルを作成して利用する。

mkdir css && cd css
touch style.sass

Jekyll は Sass と CoffeeScript の組み込みをサポートしています。それらを使うためには、適切な拡張子名のファイルを作成( .sass, .scss や .coffee の一つ) し、ファイルを2行の3ダッシュで開始します、このように:
---
---

// コンテンツのはじまり
.my-definition
  font-size: 1.2em
Jekyll はこれらのファイルを通常ページと同一に扱われ、その中で出力ファイルはもとファイルと同一ディレクトリに配置されます。例えば、あなたが /css/styles.scss という名前のファイルをサイトのソースフォルダに持っていた場合、 Jekyll はそれを処理し、そしてサイトの指定フォルダの下に /css/styles.css を配置します。

Jekyll - Assets

Jekyll - Assets

style.sass ファイルの中身は以下

---
---

@import "bootstrap/_bootstrap"

jQueryのインストール

jQueryを js ディレクトリにインストールする。

cp ../jquery-3.1.1.min.js js/.

ディレクトリ構成まとめ

参考

tree コマンドが無い環境で tree コマンドを実現

ここまでのディレクトリ構成を図解

github-pages/
|--.DS_Store
|--.bundle
|--.gitignore
|--.ruby-version
|--Gemfile
|--Gemfile.lock
|--_config.yml
|--_layouts
|  |--default.html
|--_posts
|--_sass
|  |--bootstrap
|  |  |--.DS_Store
|  |  |--_bootstrap-compass.scss
|  |  |--_bootstrap-mincer.scss
|  |  |--_bootstrap-sprockets.scss
|  |  |--_bootstrap.scss
|  |  |--bootstrap
|  |  |  |--.DS_Store
|  |  |  |--_alerts.scss
|  |  |  |--_badges.scss
|  |  |  |--_breadcrumbs.scss
|  |  |  |--_button-groups.scss
|  |  |  |--_buttons.scss
|  |  |  |--_carousel.scss
|  |  |  |--_close.scss
|  |  |  |--_code.scss
|  |  |  |--_component-animations.scss
|  |  |  |--_dropdowns.scss
|  |  |  |--_forms.scss
|  |  |  |--_glyphicons.scss
|  |  |  |--_grid.scss
|  |  |  |--_input-groups.scss
|  |  |  |--_jumbotron.scss
|  |  |  |--_labels.scss
|  |  |  |--_list-group.scss
|  |  |  |--_media.scss
|  |  |  |--_mixins.scss
|  |  |  |--_modals.scss
|  |  |  |--_navbar.scss
|  |  |  |--_navs.scss
|  |  |  |--_normalize.scss
|  |  |  |--_pager.scss
|  |  |  |--_pagination.scss
|  |  |  |--_panels.scss
|  |  |  |--_popovers.scss
|  |  |  |--_print.scss
|  |  |  |--_progress-bars.scss
|  |  |  |--_responsive-embed.scss
|  |  |  |--_responsive-utilities.scss
|  |  |  |--_scaffolding.scss
|  |  |  |--_tables.scss
|  |  |  |--_theme.scss
|  |  |  |--_thumbnails.scss
|  |  |  |--_tooltip.scss
|  |  |  |--_type.scss
|  |  |  |--_utilities.scss
|  |  |  |--_variables.scss
|  |  |  |--_wells.scss
|  |  |  |--mixins
|  |  |  |  |--_alerts.scss
|  |  |  |  |--_background-variant.scss
|  |  |  |  |--_border-radius.scss
|  |  |  |  |--_buttons.scss
|  |  |  |  |--_center-block.scss
|  |  |  |  |--_clearfix.scss
|  |  |  |  |--_forms.scss
|  |  |  |  |--_gradients.scss
|  |  |  |  |--_grid-framework.scss
|  |  |  |  |--_grid.scss
|  |  |  |  |--_hide-text.scss
|  |  |  |  |--_image.scss
|  |  |  |  |--_labels.scss
|  |  |  |  |--_list-group.scss
|  |  |  |  |--_nav-divider.scss
|  |  |  |  |--_nav-vertical-align.scss
|  |  |  |  |--_opacity.scss
|  |  |  |  |--_pagination.scss
|  |  |  |  |--_panels.scss
|  |  |  |  |--_progress-bar.scss
|  |  |  |  |--_reset-filter.scss
|  |  |  |  |--_reset-text.scss
|  |  |  |  |--_resize.scss
|  |  |  |  |--_responsive-visibility.scss
|  |  |  |  |--_size.scss
|  |  |  |  |--_tab-focus.scss
|  |  |  |  |--_table-row.scss
|  |  |  |  |--_text-emphasis.scss
|  |  |  |  |--_text-overflow.scss
|  |  |  |  |--_vendor-prefixes.scss
|--_site
|--css
|  |--style.sass
|--fonts
|  |--bootstrap
|  |  |--glyphicons-halflings-regular.eot
|  |  |--glyphicons-halflings-regular.svg
|  |  |--glyphicons-halflings-regular.ttf
|  |  |--glyphicons-halflings-regular.woff
|  |  |--glyphicons-halflings-regular.woff2
|--index.md
|--js
|  |--bootstrap
|  |  |--.DS_Store
|  |  |--bootstrap
|  |  |--bootstrap-sprockets.js
|  |  |--bootstrap.js
|  |  |--bootstrap.min.js
|  |  |  |--affix.js
|  |  |  |--alert.js
|  |  |  |--button.js
|  |  |  |--carousel.js
|  |  |  |--collapse.js
|  |  |  |--dropdown.js
|  |  |  |--modal.js
|  |  |  |--popover.js
|  |  |  |--scrollspy.js
|  |  |  |--tab.js
|  |  |  |--tooltip.js
|  |  |  |--transition.js
|  |--jquery-3.1.1.min.js
|--vendor

レイアウトデータでの読み込み

テンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
  <![endif]-->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>


</body>
</html>

_layouts/default.html でjQueryとbootstrapを呼び出す。引用元と少し変える部分は、bootstrapのcssを直接呼び出すのではなく、 css/style.css を呼び出すのと、各々配置されているディレクトリ名が変わっていること。 css/style.css は css/style.sass がビルドされて出力されたもの。

では、どうすればいいのでしょうか。正解は GitHub Pages だけで有効になるsite変数を使うことです。以下のページに記載されていますが、GitHub Pages上ではさまざまなメタデータをsite変数として利用可能です。
https://help.github.com/articles/repository-metadata-on-github-pages
cssファイルなどへのパスに利用したい場合は site.github.url を使うと良いでしょう。つまり、以下のように記述するわけです。
<link rel="stylesheet" href="{{site.github.url}}/css/style.css" charset="utf-8">
このように記述しておくと、GitHub Pages上では以下のように展開され、正しくファイルを指定できます。

GitHub PagesでJekyllを使う場合、cssファイルなどへのパスには{{site.github.url}}を使うと良い

ということなので、パスの指定に``を利用する。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ page.title }}</title>

    <!-- bootstrap and jQuery include -->
    <link rel="stylesheet" href="{{site.github.url}}/css/style.css">
    <script type="text/javascript" src="{{site.github.url}}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="{{site.github.url}}/js/bootstrap/bootstrap.min.js"></script>
    <!-- bootstrap and jQuery include -->

  </head>
  <body>
    {{ content }}
    <p> - rendered with layout template - </p>
    <button type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
    </button>
  </body>
</html>

ヘッダ部分のモジュール化

なんとなく<head></head>部分を他でも流用しそうな気がしたのでモジュール化したいと思った。

_includes これらは部分的な再利用を容易にするために layouts ファイルと posts ファイルによって、
ミックス、マッチすることができます。 liquid のタグ {% include file.ext %} は、
ファイルの _includes/file.ext を含むために使用されます。

Jekyll - ディレクトリ構成

Jekyll - Directory structure

_includes ディレクトリを作成して、中に defaulthtmlheader.html というファイルを作成する。

内容は上記の<head></head>と同じ。

  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ page.title }}</title>

    <!-- bootstrap and jQuery include -->
    <link rel="stylesheet" href="{{site.github.url}}/css/style.css">
    <script type="text/javascript" src="{{site.github.url}}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="{{site.github.url}}/js/bootstrap/bootstrap.min.js"></script>
    <!-- bootstrap and jQuery include -->

  </head>

伴って、 _layouts/default.html も変更する。

<!DOCTYPE html>
<html lang="ja">
  {% include defaulthtmlheader.html %}
  <body>
    {{ content }}
    <p> - rendered with layout template - </p>
    <button type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
    </button>
  </body>
</html>

テスト

Examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs. Copy

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

このソースコードを入れてボタンとアイコンがちゃんと設定されるか確認する。

Github Pagesにbootstrap sassをインストールする

Github Pagesを簡単にレスポンシブにしたい

Bootstrapのインストール

Bootstrapのダウンロード

Get Twitter Bottstrap Sass files

Sass

jQueryのダウンロード

Bootstrapのインストール

_config.yml を変更する

_sass ディレクトリの作成

Bootstrapのsassファイルインストール

Get Twitter Bottstrap Sass files

Bootstrapのjavascriptファイルインストール

Bootstrapのfontファイルインストール

自前のsassファイル作成

jQueryのインストール

ディレクトリ構成まとめ

レイアウトデータでの読み込み

テンプレート

ヘッダ部分のモジュール化

テスト

Examples

Technical Note

github pages & Jekyll Top

github pagesの管理

Jekyllの導入

Install frameworks

Jekyll variables

Tips