それなりに技術的なメモが溜まってきたが,Qiitaに投稿するほどではない.これまではevernoteで管理していたが,数式やソースコードを書きづらい.はてなブログ等でMarkdownを書いても良いが,手元にコンテンツが残らないのが嫌だし,haltaroドメインが取れなかった.そこで,JekyllGitHub Pagesで,ウェブサイトを立ち上げた.

参考

jekyll github pages等でググると素晴らしい記事がたくさん出てきた.今回は,特に,以下を参考にした.

gitやGitHubの使い方は,もともと知っていたので割愛.

手順

なお,Ubuntu 16.04を想定する.

1. GitHubアカウント取得

GitHubに登録し,アカウントを取得.もともと持ってた.

2. haltaro.github.ioレポジトリ作成

<アカウント名>.github.ioレポジトリを作成.これも,もともと持ってた.

3. Jekyllインストール

How to Set Up a Jekyll Development Site on Ubuntu 16.04を参考に,以下のコマンドを実行.

$ sudo apt-get install ruby ruby-dev make gcc
$ sudo gem install jekyll bundler

ついでに,ローカル保存用のディレクトリを作成して移動.

$ mkdir haltaro.github.io
$ cd haltaro.github.io

4. Jekyllテーマ選定

Jekyll themesから,テーマを選んだ.シンプルさと,カテゴリ分類機能という条件を満たすlaobubuさんのEasyBookを使わせてもらうことにした.

ダウンロードするなりクローンしたファイル一式を,先程のローカルディレクトリに保存.

5. カスタマイズ

5.1 フォントの変更

デフォルトだと日本語フォントが気持ち悪いので,/css/main.scssを次のように変更した.

流行りの游ゴシックを使おうとしたが,windowsで線が細くなる問題の闇が深く,初心者の手に負えない.もう迷わない、「@font-familyはこれでOK!」を色々考えてみた。を参考に,無難に設定した.

5.2 連絡先の追加

連絡先に,QiitaKaggleを追加した.まず,/_includes/sidebar.htmlQiitaボタンとKaggleボタンの設定を追記.

次に,/_config.ymlqitta_usernamekaggle_usernameを追加した.

5.3 Projectsページの追加

業績をまとめたページを作りたかったので,/projects.mdを追加した.フロントマターは,/about.mdを参考に作った.

5.4 Gravatarの取得

丸窓にアイコンを表示するためには,Gravatarを設定して,ハッシュ値を/_config.ymlに追記する必要がある.アバター画像を設定!Gravatar(グラバター)の登録方法と使い方を参考にした.

5.5 アイコンの設定

ブラウザのタブ部分と,iPhone/iPadのホーム画面用にアイコンを表示したかったので,/_includes/head.htmliconおよびapple-touch-icon設定を追記.アイコン自体は,いらすとやさんから調達し,/imagesに格納.

5.6 パーマリンクの設定

デフォルトだと,/archives/:title形式だったので,:titleの重複を避ける必要があり,大変.そこで,/:year/:month/:day/:title形式に変更した.

なお,組み込みパーマリンクスタイルdateを指定すれば簡単に/:categories/:year/:month/:day/:title.html形式になるが,:categoriesに空白文字が入ると嫌なので使わなかった.

5.7 MathJaxの設定

MathJaxを使った数式表示を設定._includes/head.htmlに以下を追記.

6. ローカルテスト

下記コマンドで動作確認.いくつかエラーが出たので,その都度ググって解決した.

$ jekyll serve

ブラウザでlocalhost:4000にアクセスして,出来栄えを確認.

7. アップロード

$ git remote add origin git@github.com:haltaro/haltaro.github.io # アカウント名等は適宜変更のこと.
$ git add . -A
$ git commit -m "First commit"
$ git push origin master

しばらく経ってから,https://haltaro.github.ioにアクセスすると,サイトが出来上がっていた.

感想

htmlとかcssとか全然わからんが,なんとか形になった.次回は,Google Analyticsでトラッキング機能を実装する.