見出し
Mr. Green Jekyll テーマ
   2022年03月03日     3分で読めます

GitHub issues GitHub forks GitHub stars GitHub license Patreonで支援 Ko-fiで支援

screen_mock

ライブデモはこちら

Introduction

Mr. Green は、Jekyll で生成された、GitHub Pages と完全に互換性のある多言語テーマです。

私は自分のWebサイトを作るつもりでしたが、それをテンプレートとして作成すれば、オープンソースコミュニティと共有できると思い、テーマとして作ることにしました。 このプロジェクトの作成に多くの時間と労力を費やしました。そのため、サポートすることを考えて頂けたら嬉しいです。

Features

  • 多言語Webサイト
    • 英語 (デフォルト)、日本語
  • おすすめの言語提供機能
  • アイコン有効無効オプション付き自動ナビゲーションボタン追加機能
  • Home, About, Archives, Post-list, Links, Projects 等々のレイアウト
  • カラースキーム切替オプション (ダーク・ライト)
  • 自動コンタクトオプション追加機能
  • 自動画像参照(画像のフルパスを入れる必要なく、先頭に:を入れるだけで良い)
  • 画像遅延読み込み、画像ビューア
  • クリエイティブ・コモンズ 表示 4.0 国際 ライセンス付きイケてるフッター
  • 投稿用可動式目次モーダルボックス
  • 投稿共有オプション
  • カテゴリー別、タグ別投稿一覧
  • コメント投稿機能
  • 番号付ページネーションまたはスクロールして読み込むタイプかを選択可能
  • サイトマップ機能
  • SEO(検索エンジン最適化)
  • アナリティクス (Google アナリティクス)
  • クッキー使用同意機能
  • サイト内検索機能
  • コード圧縮によるフットプリントの縮小 (HTML JS SCSS)
  • モバイルアプリサポート
  • モバイル端末対応 (Android と IOS でテスト済み)
  • 開発者向けに整理されたフォルダ構造 (Chrome, Safari, FireFox でテスト済み)

Installation

Github pages

  1. リポをフォークする。

  2. _config.yml を編集し、url を以下のように変え、変更をプッシュする。

    url: "https://GitHubユーザー名.github.io"
  3. リポ名を GitHubユーザー名.github.io に変える。
  4. デプロイのステイタスは、リポ上の Actions タブで確認する。
  5. 緑色に変わると、サイトは https://GitHubユーザー名.github.io で利用可能になる。

Local build

  1. Jekyll をインストールする。
  2. リポをクローン、または downloadし、コマンドプロンプトでフォルダに移動し、bundle install コマンドを実行する。
  3. bundle exec jekyll serve --watch --host 0.0.0.0 --safeコマンドでビルドする。
    • --host 0.0.0.0 を指定すると、同じ LAN から Web サーバーにアクセスすることができる。
    • --safeを指定すると、第三者のプラグインが追加されていないことが確認できる。(Github ページ開発用)
  4. ページは 0.0.0.0:4000/ アドレスで稼働する。

Documentation

ドキュメントが決して十分ではないことはわかっています。ドキュメントを書くよりもコードを書きたいのですが、将来的にはドキュメントとチュートリアル作成にも時間をかけるようにします。 YouTubeのMr. Green テーマチュートリアルのプレイリストを確認してみてください。

Credits

自分のWebサイトを構築する機会を与えてくれたこれらのプロジェクトに感謝します。

  • Jekyll は、静的サイトジェネレータ。好きなマークアップ言語で書かれたテキストを取り、静的なWebサイトを作成するためのレイアウトを使用している。自身でサイトのルック＆フィール、URL、ページに表示されるデータなどを微調整することができる。ボランティアによって維持されている素晴らしいプロジェクト。

  • GitHub Pages GitHub はリポジトリから直接ホスティングされる。変更をプッシュするだけで、サイトが自動生成。

このプロジェクト作成中に見つけた役立つサイトを紹介します。リンクページへ

You Can Support My Work

何もないところからプロジェクトを立ち上げるのは、とても時間がかかるものです。私がこの様なプロジェクトに取り組み続け、皆さんに新しいコンテンツを提供できるよう、支援をご検討いただければ幸いです。

Contribute

プルリクは大歓迎です。イシューとプルリクのテンプレートの手順を確認してください。

License

MIT licenseでも示されている通り、ライセンス及び著作権表示をした上で、このテーマをどこでも使用することができます。

Copyright (c) 2022 Mr. Green's Workshop https://www.MrGreensWorkshop.com

ご利用の際に私のページへのリンクを貼ったり、フッターの “Pwrd by Mr. Green “のリンクを残したりして頂くと、私の作品に対してクレジットが得られます。

ありがとうございます。

Other Licenses

Mr. Green Jekyll テーマには、以下のライブラリが組み込まれています。これらのライブラリがなければ、このテーマを完成させることができませんでした。

Libraryfile
jQuery v3.6.0, Copyright OpenJS Foundation and other contributors. jQuery is distributed under the terms of the MIT License.jquery-3.6.0.min.js
Bootstrap v3.3.7, Copyright (c) 2011-2016 Twitter, Inc. Bootstrap is distributed under the terms of the MIT License.bootstrap.min.js, bootstrap.min.css
Bootstrap Table of Contents v0.4.1, Copyright (c) 2015 Aidan Feldman Aidan Feldman. Bootstrap Table of Contents is distributed under the terms of the MIT License.bootstrap-toc.min.js, bootstrap-toc.min.css
Font Awesome v4.7.0, Copyright (c) 2017 Dave Gandy. The Font Awesome font is distributed under the terms of the SIL OFL 1.1. Font Awesome CSS, LESS, and Sass files are distributed under the terms of the MIT License.font-awesome.min.css, FontAwesome
Lozad.js v1.16.0, Copyright (c) 2017 Apoorv Saxena. Lozad.js is distributed under the terms of the MIT License.lozad.min.js
Magnific Popup v1.1.0, Copyright (c) 2014-2016 Dmitry Semenov, http://dimsemenov.com. Magnific Popup is distributed under the terms of the MIT License.jquery.magnific-popup.min.js, magnific-popup.css
Simple-Jekyll-Search v1.9.2, Copyright (c) 2015 Christian Fei. Simple-Jekyll-Search is distributed under the terms of the MIT License.simple-jekyll-search-1.9.2.min.js
Compress HTML in Jekyll v3.1.0, Copyright (c) 2014 Anatol Broder. Compress HTML in Jekyll is distributed under the terms of the MIT License.compress.liquid

Mr. Green Jekyll テーマ