概要

ブラウザのタブが 100 個以上開かれた状態なので，メモ用に開いているものはメモに書き残したうえでタブを整理しようと思い立った．メモを置く場所はいくらでもあるが，GitHub Pages 上に置いておいて，どこからでもアクセスできるようにしておくと，後々便利だろうと考えた．

で，ググるとこんなのが見つかる．

曰く，Jekyll という gem を使ってサイトを構築すると，GitHub Pages 側でビルドを勝手にやってくれるとのこと．素晴らしい．

さらにググっていくと，公式の解説が見つかる．これに沿って作り込んでいくのが良さそうである．

環境

  • Ubuntu 20.04.1 LTS (Focal Fossa)
    • $ cat /etc/os-release で確認
  • ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-linux]
    • rbenv 上の環境

手順

  1. Dependency versions | GitHub Pages から，Jekyll および github-pages の依存バージョンを確認する
    • 2021/01/01 時点では，Jekyll の依存バージョンは 3.9.0
    • 2021/01/01 時点では，github-pages の依存バージョンは 209
  2. Jekyll および Bundler をインストールする
    • $ gem install -v 3.9.0 jekyll
    • $ gem install bundler
  3. Git ローカルリポジトリを初期化する
  4. Jekyll サイトを作成する
    • $ /home/<username>/.rbenv/versions/2.7.0/bin/jekyll new .
  5. Gemfile を編集する
    • gem "jekyll" の行をコメントアウトする
    • gem "github-pages", group: :jekyll_plugins の部分を編集し，gem "github-pages", "~> 209", group: :jekyll_plugins のように，依存バージョンを挿入する
  6. hosts を編集する
    • $ sudo nano /etc/hosts
    • 以下を追記する（記載内容は $ host rubygems.org で調べてから決める） 
      151.101.130.132 rubygems.org
151.101.66.132  rubygems.org
151.101.194.132 rubygems.org
151.101.2.132   rubygems.org
  7. $ bundle update
    • hosts を編集していない状態でやると，例えば Retrying download gem from https://rubygems.org/ due to error (2/4): Gem::RemoteFetcher::UnknownHostError no such name (https://rubygems.org/gems/faraday-1.3.0.gem) などのようなエラーが出て，正常に update ができない
    • 上記エラーは，IPv6 の通信に失敗していることに起因する
  8. _config.yml を編集する
    • GitHub のリポジトリ名がユーザ名と同じでない場合，そのままデプロイすると css などの絶対パスが実際の場所と異なってしまう
    • リポジトリ名が txt なら，次のような設定でよいはず 
      baseurl: "/txt" # the subpath of your site, e.g. /blog
url: "https://iilj.github.io" # the base hostname & protocol for your site, e.g. http://example.com
  9. ローカルでテストする
    • $ bundle exec jekyll serve
  10. コミットして，プッシュして，GitHub Pages の公開設定をする

以上で，公開できるはず．

その他

  • テンプレからメールアドレスの表示を消したい
    • _config.yml を編集し，email: your-email@example.com の行をコメントアウトすればよい
  • デザインを弄ったりとか，その辺りのことはググれば無限に出てくる

2022-06-14追記：画像を貼りたい

vscode に拡張機能「Markdwon Image」を導入し，リポジトリ下の「/images/」に画像を保存するように設定する．

右クリックメニュー→「Paste Image」，あるいは Alt+Shift+V で画像が貼り付けられる．

![picture 1](../images/20220614_220652.png)

このままだと画像の URL がページ基準になってくれないので，テンプレートに以下のようなものを追加する．

<base href="{{ site.url }}{{ site.baseurl }}/dummy/">

これで，vscode のプレビューからも画像が見える環境ができあがる．

↓貼った画像の例

picture 1

以上