Jekyll(ジキル)チュートリアルまとめ
※現在はほぼ作業録をベタ打ちしている状態で、サイトの完成後マニュアル化していきます
8/30,31
Rubyのインストール
Windows用のRubyインストール方法を参考に、まずはPC内にRubyをインストールする
インストールで困ったことあれば、大江がRubyの入門書持っているので貸します
RubyおよびJekyllはおもにターミナル上で操作します
Jekyllのインストール
ターミナルを起動する
以下のコマンドを順に実行する
gem install jekyll bundler
jekyll new サイト名
cd サイト名
これでサイト用のディレクトリができる
サイトの作成、表示
サイト用の新規ディレクトリを作成する
htmlファイルがあるディレクトリに移動し、以下のコマンドを実行する
jekyll build:_siteディレクトリにサイトを構築する(ディレクトリは勝手にできる)
bundle exec jekyll serve:ローカルサーバを立ち上げる
(jekyll serve だと、異なるバージョンのジキルが立ち上がる恐れがあるらしい!)
9/6 Tailscale設定
SSH(Tailscaleのアカウント登録、ターミナルから「ssh name@IPアドレス」で接続する)
ユーザ名とパスワードは先生から頂く
gemのインストール権限は無いため、必要な場合は先生に申し出る
研究室外からでもVPN接続が可能となる
※VSCodeのプラグイン導入に伴い、SSH経由でなくても編集できるようになりました!
myblogディレクトリからserverを立ち上げる
9/6 作業履歴
ローカルサーバの立ち上げはひとりしかできないっぽい
(逆にひとりが立ち上げられれば、複数人でサイトを閲覧できる)
9/10 作業履歴
VScode起動から編集までの流れ
①PCにあるVScodeを起動
②左下の「open a remote window」をクリック→「connect host」を選択し、ssh name@IPアドレスを入力しEnter
③先生からいただいたパスワードを入力→新規ウィンドウが開く
④左上の「File」→「open folder」をすると開きたいフォルダーのディレクトリの選択が求められるため、jekyllのあるディレクトリを指定
⑤先生からいただいたパスワードを再び入力→サイトの編集画面にアクセスできる
⑥画面下部の「terminal」からサーバのあるディレクトリに移動し、「jekyll serve」でサーバを立ち上げる
これでVScodeの編集を保存するとサイト画面に即反映されるようになっているため、に画面で編集するとよい
サーバを立ち上げてもサイトが開いていない場合、ディレクトリが変更されていなくてサイトのあるポート番号ではないポートが開いている可能性がある。ターミナルに書いてあるport番号をチェック
サーバの停止は「Ctr-c」
9/15 作業履歴
サーバが立ち上がらない...(大江)
jekyll serve で起きるエラー曰く
「webrick」というgemがあればいい→権限無
gem "jekyll"のバージョンを4.2.0にする→権限無
※ちなみにポート番号は確認済み
テーマの適用
gemfileの修正
_config.ymlの修正
bundle install
サーバを立ち上げて、適用されているか確認
パーミッションをいじった
/home/jekyll内にあるフォルダのパーミッション変更→できず
金田、大江ともに実行不可(Operation not permitted)→権限無し
金田がサーバを立ち上げれば共同編集が可能であるため、ひとまず二人の都合が合うタイミングで作業を続けることとする(大江はなぜかサーバを立ち上げることができなかった。サーバが立ち上がていないと、大江が施した変更が保存できない)
gemのインストール:これに伴い、gem経由のテーマの適用ができない
chmodコマンドの実行:「Operation not permitted」となる
テーマの探し方
「jekyll-theme」でいろんなテーマが検索結果として出てくる
欲しいテーマを選んで、「リンク:ホームページ」をクリックする。Githubに飛びます
Readeでプレビューを見ることができる
作業記録(10/08)(金田)
テーマの適用
sudoコマンドを使って、gem install "任意のテーマ"
sudoコマンドを使って、gem updata bundlerでバンドラを更新
sudoコマンドを使って、bundler installでプロジェクトディレクトリにバンドラをインストール
サーバーをjekyll serve で立ち上げて確認、完了
サイトの編集
_config.ymlで基本設定を変更(タイトルやサイトの概要など)
_posts配下にyyyy-mm-dd-タイトル.mdファイルを作ると、記事の追加ができる
welcome-to-shojiLab.html:最初のページ
編集権限はsudoとchmodで獲得してください
作業記録(10/12)(大江)
画像の表示
assetsフォルダの下にimagesフォルダを作成するのが慣習
サーバを立ち上げると、作成したimagesフォルダが消える(何故)⇒サーバ立ち上げ後に作ると消えない⇒再度立ち上げると消える
使用する画像は、エクスプローラーからドラック&ドロップしてください
!image(/home/jekyll/shoublog/_site/assets/images/yuma.jpg) ※一旦後回し!
マークダウンでURLを埋め込む
埋め込むテキストを「[]」で囲む
囲んだテキストの後ろに「[]」で変数名みたいなやつを宣言する
マークダウンファイルの最後に変数とリンクの対応関係を記述する
ex) [変数名]:ここにURL
早急にやること
Github Pagesで一般公開する⇒やり方は分かる
ディレクトリ構成見直し⇒済み
メンバーリスト作成⇒画像も追加する
各メンバー用のページ作成:先輩方の受賞歴掲載を最優先!⇒未達
10/16 作業記録
jekyllフォルダ直下に「lablog」ディレクトリ作成
ダウンロードファイル内のコンテンツを移植、ドラック&ドロップ
bundle install
jekyll build
jekyll s
localhostで閲覧する場合は、_config.ymlの「baseurl」「url」を空欄にする
具体的な編集方法
Webサイトのすべてに共通する設定を行うには、_config.ymlを使って編集する
具体的には、ページのタイトルやタイトル下のページの説明についてなど
index.htmlで表示する研究室関連のニュース(post)は、_posts下にyyyy-mm-dd-filename.mdというマークダウンで記述するファイルを作成し、そこに載せたい内容を記述していく(y=year,m=month,d=day 例:2023-10-16-example.md)
→_site下にhtmlに変換されたファイルがサーバを立ち上げるタイミングで生成される
_site下のファイルを編集しても、サーバーを立ち上げるたびに初期化されるので注意!!
index.htmlの画面右上にあるサイトの項目を編集するには、_includes下にあるnavbar.htmlで編集
項目を選択したときに表示させたいページを作成するには、まずディレクトリ直下に任意の名前でファイルを作成(拡張子:md)
ファイル内にはフロントマターでlayout:pageを指定することを忘れない
navbar.htmlで作成したファイルの相対パスを指定することで項目を選択したときに表示するページとの接続が完了
Webサイト内の各要素がどのhtmlに記述されているものかは、サイト画面を閲覧しているブラウザの開発者ツール(デベロッパーツール)でチェックするのが効果的!
サイト間の紐づけ方法(相対パスで書くのが基本)
基の.mdでできるHTMLから、対象のHTMLまでの相対パス
サイトができたら、jekyllのチュートリアル改訂版を作ります!(日本語記事があまりに少なかったので)
10/17 作業記録
画像の表示
lablogディレクトリ直下にある「img」ディレクトリで画像を管理します
用途に合わせてディレクトリを作成して管理(例:プロフィール用の写真は「img」下の「profile」ディレクトリに補完)
※ディレクトリ問題解消済みなので、「サーバを立ち上げると画像が消える」等の問題は基本起きません!
※画像の大きさをマークダウンやCSS(どこのCSS?)で指定できるか不明なので、現段階では手作業で編集して表示する
個人ページ
個人ページの.mdファイルは「lablog」ディレクトリ直下の「member_list」ディレクトリにある
サーバを立ち上げると、「_site」ディレクトリにHTMLファイルが生成される
画像やサイトのパスを.mdに記述する場合は、「.mdで生成されるHTMLファイル」からの相対パスを記述する
検討事項:プロフィールの用意
個人ページを用意する手段は以下の二つ
1. 大江、金田が各々の画像や情報を預かって作成する⇒jekyllの操作に慣れている、権限がすでにあるためスムーズ
2. 編集方法を全員に共有して各々に編集してもらう⇒Web担当側の負担は減る
10/23 作業記録
タイル表示プラグインの導入