ゆーすけべー日記

天然パーマです。

はてなブログからGitHub Pages+Hugoへ移行した

2020-01-16 Blog

はてなブログで運用してたブログ「ゆーすけべー日記」をGitHub Pagesへ移行した。ドメインも昔使ってたyusukebe.comにした。 静的ファイルのジェネレーターとしてHugoを使ってる。

今まで使ってた、はてなブログに大きな不満があったわけじゃなかったが、気分一新しようとしていた。ちなみに上記のツイートにあるようにMediumとnoteを試してみたが、今回のユースケースには合わなかった。 というのもコードを貼り付けたいという重要な要件に対して、

  • Medium
    • Markdownに対応している
    • なので``` と書きはじめてコードを貼り付けることができる
    • ただWYSIWYGすぎて書いた瞬間からHTMLに変換されるのが使いにくかった
    • シンタックスハイライトされない
  • note
    • Markdownで書けない
    • よって、メニューから「コードを挿入」しなくてはいけない
    • シンタックスハイライトは一応ある

そもそもこの2つの「文章をクールに書こう」みたいなコンセプトは自分には合わない。

で、結局はてなブログかと思いきやHugoを触ってみて面白かったので、 こいつをHTMLジェネレーターにしてGitHub Pagesでホスティングさせることにした。

さて、はてなブログにある過去の記事の扱いをどうしようかと思ったが、どうせなら全て移行しようってことで頑張った。 はてなブログのエキスポート機能で書き出したMovableType形式でかつ一枚のテキストファイルをHugoで読み込ませるために 以下のツールを使わせてもらった。自前でスクリプトを作ろとしていたので助かった。

えいやっでインポートしてみると過去記事が2,000件以上あった。

それ以外に、

  • Permalinkを決める
    • /post/2020/title.md みたいにする
  • Aboutページを作る
  • 独自ドメインの設定
  • GitHub Pagesを有効にしつつ、公開用とHugo用のレポジトリ作成
  • テーマの適応
  • テンプレートいじる
  • TwitterとかFacebookとかのソーシャルボタンの導入
  • カスタムCSS書いて見た目を頑張る
    • いざ使ってみると、気になるところがたくさんあるので後ほど調整する
  • シンタックスハイライトをmonokaiにする
  • 記事を新しく作る際のデフォルトテンプレートの調整
  • Twitter Card / OGP の設定
  • Google Analyticsの導入
  • 画像をどうやってアップして貼り付けるか悩んだが、Flickrにホストしてもらう作戦にした

と、まだまだあった気がするが、頑張った。

最後に今までお世話になったはてなブログからこのyusukebe.comへ飛ばすために、以下のJavaScriptをはてなブログへ埋め込んだ。 個別記事は新しいURLに書き換えて、その他は全てトップページへ遷移させる。

var site = "https://yusukebe.com";
var url = ''
var path = location.pathname;
if(path.match('^\/entry')) {
    var r = /^\/entry\/(\d+)\/(\d+)\/(\d+)\/(\d+)/.exec(path);
    var p = '/posts/' + r[1] + '/' + r[2] + r[3] + r[4];
    url = site + p;
}else{
    url = site;
}
var link = document.getElementsByTagName("link")[0];
link.href = url;
location.href = url;

以上、移行は完了！

自分でいじってる感があって楽しい。 2001年、HNS=ハイパー日記システムで書き始めたこの日記は、 その後、MovableType、TypePad、はてなブログと変遷してきた。 今回のGitHub Pages+Hugoの体制でどこまで続けられるだろうか。

おしまい。