I.T.の
エンジニアブログ

GitHub Pagesの存在をいまさら知った

なんとなくTwitterでいろいろ見てたら、GitHub Pagesなるものがあるというのをいまさら知りました。 どうやらGitHubのアカウントがあれば簡単に静的ページを作れるらしいです。
ということで適当に作って今まで自分が作ったサイトへのリンクとかを貼っておくことにしました。

→ I.T.のGitHub Pages

GitHub Pagesをつくろう

作り方は簡単です。リポジトリのSettingsの下のほうにあるGitHub Pagesなる項目をいじればできます。
URLはhttp(s)://$account.github.io/$repo になります。 $accountはGitHubのアカウント名、$repoはリポジトリ名です。
設定すれば独自ドメインにもできるし、httpsにもできます。

せっかくなので、前から興味があったVue.jsで作ってみることにしました。 とはいっても初めてでよくわからないので、 チュートリアルをサラッと流し見ながらVue CLIで自動生成されたコードを適当にいじって簡単に作りました。
リンクを張っただけだとすごい寂しいですが、まあいいでしょう。

ちょっとだけポイント。
GitHub Pagesで公開するソースの場所をSettingsで一応設定できるのだが、ルートかdocsディレクトリしか選択できません。 なので以下のようにビルド先をdocsに設定してあげます。

vue.config.js

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      title: 'I.T. の GitHub Pages',
    },
  },
  outputDir: 'docs',
  publicPath: './',
  assetsDir: './',
};

あと、独自ドメインにするとCNAMEという名前のファイルが勝手に生成されますが、 これはビルド時に消えてしまうので、同じ内容のファイルをpublicディレクトリにいれておきます。

Lightsout Solverを作ってかさ増し

さすがにしょぼすぎたので、パズルのソルバー的なものを作りました。
Lightsoutという、名前は知らないかもしれないけど有名なパズルです。
一個消すと周りのライトも切り替わって、全部消すとクリアなやつです。
あんまり凝ってもしょうがないので、O(2^n)の計算量で解けるアルゴリズムを調べてサクッと実装しました。 サイズが小さいならまあ大丈夫でしょう。

GitHub Pages便利

簡単に作れるのでGitHubアカウント持ってる人は作ってみてください。