Skip to main content

GithubPages

About 3 min

GithubPages

github上にweb siteを持てる仕組み。 無料で使えてかなり制限が少なく、jekyllを使っていろいろな事が出来る。

外部リンク

以下はjekyll関連でよく参照するもの。

dockerでのローカル環境

Mac OS X上のdockerでjekyll環境を作ってgithub pagesのテストをする - なーんだ、ただの水たまりじゃないか

rbenvでのローカル環境

最近dockerが遅いのでrbenvでどうにかする。

rbenv install listしたら3.4.7が最新版っぽいのでこれを入れてみる。

$ rbenv install 3.4.7
$ rbenv global 3.4.7

これで3.4.7になった。

$ gem install bundler
$ gem install jekyll bundler

これでgithub.ioのディレクトリに行ってbundle execすればいいのか？

$ bundle exec jekyll serve
Could not locate Gemfile or .bundle/ directory

Gemfileがないと言われた。 まぁ大体動けばいいんだよなぁ、という事で以前作ったGemfileと同じ内容のものを置いておく。

kotlin-web-site-ja/docker/Gemfile at master · karino2/kotlin-web-site-ja

これを置いて以下で動いた。

$ bundle install
$ bundle exec jekyll serve

github pagesのjekyllのバージョンと違うが、まぁいいか。

新規の始め方

よく新しく始めるので、その際の手順などを。基本的には以下と同じことをdockerでするだけ。

Jekyll を使用して GitHub Pages サイトを作成する - GitHub Docs

まずはレポジトリを用意して、Github側で設定する。

次にjekyllのバージョンを調べる。

envygeeks/jekyll-docker: ⛴ Docker images, and CI builders for Jekyll.

次に、以下を実行。

% export JEKYLL_VERSION=3.8
% docker run --rm --volume="$PWD:/srv/jekyll" -it jekyll/jekyll:$JEKYLL_VERSION jekyll new --skip-bundle . --force

forceはcurrent directoryが空じゃない場合にいるとか。 Installing jekyll in current directory fails · Issue #3309 · jekyll/jekyll

そして_config.ymlを書き換える。

動作確認は以下。

docker run --rm  --volume="$PWD:/srv/jekyll:Z" --publish 4000:4000  jekyll/jekyll  jekyll serve --incremental

これでlocalshot:4000にアクセスすれば見れる。

なお、_config.ymlでbaseUrlを指定していると、それをlocalhostにつける必要がある。例えばTextTL_siteを指定している場合、

http://localhost:4000/TextTL_site がrootになる。

Liquid

辞書は無いとのこと。ワークアラウンド。

json - How to create or define a dictionary in liquid templates? - Stack Overflow

サイドバーでナビゲーション

ナビゲーション用のサイドバーを作ろうと思いたつ。 適当にググったら、以下が良く書けている。

Navigation - Jekyll • Simple, blog-aware, static sites

ナビゲーションバーがあるテーマをいろいろ探していたが、すでにいろいろminimaをカスタマイズしすぎていて乗り換えるのが面倒なので、 minimaにサイドバー足す方向で進めよう。

出来た。

ナビゲーション用サイドバー対応 · karino2/kotlin-lesson@129d33f

最初は上の例を真似してymlでテキストを指定していたが面倒なのでファイルだけ追加しておいてLiquidの方でページタイトルを表示するように変更。 ページの追加と削除はこれまでのconfig.ymlと同程度の手間に抑えたかったので。

結果はまぁまぁ満足。

collapseしたいなぁ。

How To Create a Tree View

onclickに直接入れればそんなに面倒は無いか？

MDNはどうしているんだろう？と以下のサイトをデベロッパーモードで見てみると＞JavaScript - MDN

なんかdetailsとかいうタグを使っている。

details: The Details disclosure element - HTML: HyperText Markup Language - MDN

おお、これでいいじゃん。

github pagesを使ったシステム

どちらも良く出来ていて、サブWikiの公開に使ったり、PngNoteの公開に使ったりしている。 このgithub pagesを使ったシステムは無料でありながらサーバーの運用をしなくても良くていいよな。

どちらも既存のソフトをgithub pagesに対応しただけという感じになっていて、 そんなにいろいろは頑張っていない。 だがそのおかげで、割といじりやすく、足りないものは自分で足して行けて良い。

同じようにSNS作れないかな？と一瞬考えたが無理だった。＞GitHubを使ったSNSを考える

JSONのサーバーに出来ないか

統計グラフ！は、GAEでスクリプトを管理していたが、 それほど動的である必要は無いので、github pagesでいいんじゃないか？

Hosting a JSON API on GitHub Pages

こんな感じでjsonを置いて、そのjsonを使ったページもGIthub Actionsで静的に生成すれば十分なのではないか。 これってjekyllの時にも動くのかね。素のhtmlを置けば表示されてた気がするのでたぶん動くか。

jsonをパースしてhtmlを生成する場合、イマドキは何を使うのかね。jekyllでいいのか？

Generating Jekyll pages from a folder of JSON - Stack Overflow

これはページ生成の方は同じようなことをやっているな。

site dataのフォルダと公開用のフォルダに両方同じファイルを置くのは面倒だな。 なんとか出来ないかしら？

スキーマが決まってるんだからこんな感じでjsonから同じ中身のjsonを生成してやればいい気もする。 そのままincludeするだけで公開出来たらもっといいんだが。 少し見たが、includeとdataはフォルダが別っぽいな。やはり何も考えずにjsonを生成する方が良さそう。

このgistが同じような事を解説しているな。

Jekyll - how to build a REST API

追記： 統計グラフ！に書いたように、結局jsonは毎回全部送る事にした。大したサイズでは無いので。If-Modified-Sinceで普段は送られないのでいいだろう。 そしてhtmlの生成は遊びでTypeScriptでやってみた。 悪くないが、短かったのでJSで良かったな。

カスタマイズいろいろ

そこそこカスタマイズをいろいろやっているので、ここにリンクをまとめていきたい。

タイトルのカスタマイズ

縦棒は一部のmarkdownパーサーでテーブルと勘違いするので、ハイフンに変えた。

このブログのタイトルをカスタマイズする（縦棒からハイフンに） - なーんだ、ただの水たまりじゃないか

なお、GitWikiでも同じような作業をしている。

page.titleなどの変数は以下。 Variables - Jekyll • Simple, blog-aware, static sites