Powered by SmartDoc

4.1 Jelyll とは

  1. 要はWebページの構造化管理システム

    【チュートリアルの例】

    /jekyll_root_dir -+- Gemfile
                      +- _config.yml  ← 全体のページ構成の設定
                      +- index.html   ← メインページの記述
                      +- about.md     ← About ページの記述
                      +- blog.html    ← ブログページの記述
                      +- staff.html   ← スタッフページの記述
                      +- _layouts     ← ページレイアウト格納ディレクトリ
                      |     +- default.html  ← デフォルトページのレイアウト
                      |     +- post.html     ← ブログページのレイアウト
                      |     +- author.html   ← スタッフページのレイアウト
                      +- _includes    ← インクルードファイル格納ディレクトリ
                      |     +- navigation.html  ← 各ページの切り替えの指示
                      +- _data  ← データファイル格納ディレクトリ
                      |     +- navigation.yml  ← navigation.html で用いるデータ(YAML 形式)
                      +- _posts  ← ブログ形式ファイル格納ディレクトリ
                      |     +- 2018-08-20-bananas.md  ← 2018 年 8 月 20 日の bananas ファイル
                      |     +- 2018-08-21-apples.md  ← 2018 年 8 月 21 日の apples ファイル
                      |     +- 2018-08-22-kiwifruit.md  ← 2018 年 8 月 22 日の kiwifruit ファイル
                      +- _authors  ← _config の authors コレクションに対応するディレクトリ
                      |     +- jill.md  ← コレクションアイテム
                      |     +- ted.md  ← コレクションアイテム
                      +- assets  ← 部品格納ディレクトリ
                      |     +- css  ← CSS ディレクトリ
                      |          +- styles.scss  ← 全体のスタイルシート用 sass
                      +- _sass  ← Sass による SCSS 格納ディレクトリ
                      |     +- main.scss  ← assets/css/styles.scss により生成された SCSS
                      +- _site  ← Jekyll により生成されたファイル格納ディレクトリ
                            +- index.html  ← メインページ
                            +- about.html  ← About ページ
                            +- blog.html  ← ブログページ
                            +- staff.html  ← スタッフページ
                            +- feed.xml
                            +- sitemap.xml
                            +- robots.txt
                            +- 2018
                            |    +- 08
                            |    |   +- 20
                            |    |   |   +- bananas.html  ← bananas ページ
                            |    |   +- 21
                            |    |   |   +- apples.html  ← apple ページ
                            |    |   +- 22
                            |    |       +- kiwifruit.html  ← kiwifruit ページ
                            +- assets  ← 部品格納ディレクトリ
                            |    +- css  
                            |        +- styles.css
                            |        +- styles.css.map
                            +- authors
                                 +- jill.html
                                 +- ted.html
    

  2. 基本的な構成
  3. 基本的な作り方
    1. サイトの構成を決める
    2. 各ページを作成する
      • ブログページは所定の様式で_postsに作成
      • ブログのような複数ファイルに亘るページはコレクションで作成
      • その他はベタでマークダウンで作成
    3. 共通のレイアウトは_layoutsに入れる
    4. 最後にデフォルトのレイアウトをまとめて_config.ymlに記述