フォルダ構造

2024-05-25 hit count image

jekyllは基本的なフォルダ構造を持ってます。フォルダ構造を使ってブログを体系的に管理しましょう。

jekyllフォルダ構造

ここで説明するフォルダ構造はjekyllの基本的なフォルダ構造以外にも、私たちが使ってるテーマ(Clean Blog theme)のフォルダ構造も一緒に説明してます。私たちが使ってるテーマが気になる方は以前のブログ、テーマ設定を見てください。

基本フォルダ構造

  • jekyllのホームページに親切にも基本フォルダ構造の説明が詳しく書いています。
  • jekyllのホームページ: https://jekyllrb.com/docs/structure/
  • ここには基本フォルダ構造と私たちが使ってるフォルダ構造を説明します。

基本フォルダ構造

|-- _config.yml
|-- _data
|   |-- members.yml
|-- _drafts
|   |-- begin-with-the-crazy-ideas.md
|   |-- on-simplicity-in-technology.md
|-- _includes
|   |-- footer.html
|   |-- header.html
|-- _layouts
|   |-- default.html
|   |-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.md
|   |-- 2009-04-26-barcamp-boston-4-roundup.md
|-- _sass
|   |-- _base.scss
|   |-- _layout.scss
|-- _site
|-- .jekyll-metadata
|-- index.html
ファイル/フォルダ説明
_config.ymljekyllブログを構成するための基本的な設定が書いています。
詳細についてはjekyll設定を参考してください。
_dataデータファイルを保存する場所です。
.yml, .yaml, .json, .csvまたは.tsvファイルを保存すれば良いです。
私たちはこのフォルダは使ってないんです。
私たちもブログの下に表示するブログのリストをjsonタイプで保存して非同期でローディングするが、管理上の理由でjsonをここに保存してないんです。
_draftsまだ、公開してないブログのポストを保存するフォルダです。
私たちは実際、ブログのポスト作成とgithubへ公開するブログを別々管理してるので、このフォルダは使ってないんです。
私たちがgithubをどうやって活用してるかはgithub連動で紹介します。
_includesjekyllもpugのように共通コンポーネントを作って挿入する機能があります。({% include ファイル名 %})の機能を使う時、 含まれるファイルを保存する場所です。(ex> footer.html / header.html)
私たちはページ単位の共通コンポーネントを_includesフォルダへ保存して、ブログのポスト単位の共通コンポーネントは{% include_relative フォルダ/ファイル名 %}を使ってブログのポストフォルダ下へフォルダをつくって管理してます。(ex> code.md / link.md)
_layoutsテンプレートファイルを保存するフォルダです。(ex> default.html / folder.html)
_postsブログのポストを保存する場所です。ファイル名をYEAR-MONTH-DAY-title.mdで保存して管理します。
私たちは多言語機能を使うのでこのフォルダ下へフォルダを作って管理します。
多言語については多言語プラグインを参考してください。
_sassデザインのためのsassファイルを保存するフォルダです。
_sitejekyllによってビルドされたファイルが保存されるフォルダです。
私たちはこのフォルダをgithubへアップロードしてブログを作成しています。(参考: github連動)
.jekyll-metadatajekyllが変更された内容だけビルドするため管理してるファイルです。 .gitignoreへ追加することをおすすめします。
index.htmlトップページに変換されるファイルです。
これ以外の
ファイル/フォルダ
上記に書いていないファイル、フォルダたちはビルドする時_siteフォルダ下にコピペされます。ビルドする時、コピペされたくないファイル/フォルダは_config.ymlのファイルのexclude:項目に記録します。(参考): jekyll設定)

上記に書いてる.html/.mdファイルはお互いに交換可能です。 つまり、index.htmlindex.mdYEAR-MONTH-DAY-title.mdYEAR-MONTH-DAY-title.htmlで作成出来ます。

私たちが使ってるフォルダ構造

私たちはプラグインを使って多言語、ページネーションなどを使ってます。そのため、フォルダ構造が基本フォルダ構造とちょっと違います。 違うというよりは、管理のための構造を持ってます。

|-- _config.yml
|-- _includes
|   |-- footer.html
|   |-- header.html
|-- _layouts
|   |-- default.html
|   |-- post.html
|-- _posts
|   |-- jekyll
|   |   |-- 2018-09-10-directory-structure
|   |   |   |-- common
|   |   |   |-- 2018-09-10-index-en.md
|   |   |   |-- 2018-09-10-index-ja.md
|   |   |   |-- 2018-09-10-index-ko.md
|-- _sass
|   |-- _base.scss
|   |-- _layout.scss
|-- _site
|-- categories
|   |-- jekyll
|   |   |-- json
|   |   |   |-- index-en.md
|   |   |   |-- index-ja.md
|   |   |   |-- index-ko.md
|   |   |-- index-en.md
|   |   |-- index-ja.md
|   |   |-- index-ko.md
|-- contact
|   |-- index-en.md
|   |-- index-ja.md
|   |-- index-ko.md
|-- home
|   |-- index-en.md
|   |-- index-ja.md
|   |-- index-ko.md
|-- 404.md
|-- sitemap.xml
ファイル/フォルダ説明
_config.yml基本フォルダ構想と同じ
_includesページ単位の共通コンポーネントを_includesフォルダへ保存します。(ex> footer.html, head.html, navbar.htmlなど)
_layouts私たちが使ってるテーマの基本テンプレートが保存されてます。
私たちが使ってるテーマが気になる方は以前のブログ(テーマ設定)を見てください。
_postsポストフォルダは下にカテゴリー別フォルダを持ってます。
カテゴリー別フォルダはポスト別フォルダを持ってます。
ポスト別フォルダは多言語のためのファイルと多言語ファイル中で共通で使ってる部分を保存するフォルダで構成されてます。ソースコード、上記に表示してるフォルダ構造など多言語とは関係なく共通で活用できる部分をcommonフォルダへ保存してます。(参考: 多言語プラグイン)
_sass基本フォルダ構想と同じ
_site基本フォルダ構想と同じ
categoriesブログをカテゴリ別で管理するため、別のページを作りました。블로그를 카테고리별로 관리하기 위해 별도의 페이지를 제작했다. 初めには_postsフォルダで管理したけど、カテゴリーとして作成しページもブログのポストで認識される問題があって、現在は別のフォルダで管理してます。
また、カテゴリーのフォルダ下へjsonフォルダを作って今見てるページ下のpostsリストを表示するためのjsonデータを作るページを保存してます。
contactお問い合わせページの多言語を対応するためのページを保存してます。
homeトップページの多言語を対応するためのページを保存してます。
404.md404ページ多言語の対応が出来なくって一つのファイルで管理してます。.
jekyllは404エラーが発生したら、404ページを表示するがこのページは一つしか対応してくれません。(私たちが設定する方法を分からないかも)
sitemap.xmlSearch Engineのためサイトマップを生成するファイルです。詳細についてはSEO対応を見てください。

まとめ

ここには簡単に現在使ってるフォルダ構造を説明しました。このようなフォルダ構造を持ってる理由はテーマ、プラグイン、SEOなど様様な理由があります。このような理由を確認したい人は各ブログをめいてください。

参考サイト

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts