メインコンテンツへスキップ

MediumからHugoに移行した

blog hugo

ブログをMediumからHugoに移行した.

動機
#

主に以下の理由.

  • Mediumの会員登録を促すポップアップが盛んになってきた
  • カスタムドメインを使いたい
  • 記事をGit管理したくなった

カスタムドメインはそのうち設定しようかと思ってのんびりしていたらdeprecationされていた.
Custom Domains service deprecation
なお,近々復活するみたいだが,時期は未定.

Git管理に関しては,「ブログサービスに一存するよりMarkdownで手元に記事を置いといた方がいざという時にサービスの運営を気にせず制御できる|安心感がある」みたいな話は良く目にしていたので, そうだなぁと思った次第.

これらの条件をすべて満たし,巷でよく使われているHugoにすべきかしばらく検討していた. 構築が面倒だったり凝りすぎて「書く」より「作る」になってしまいそうでずっと棚上げしていたが,重い腰を上げて移行した.

Hugoとは
#

Goで実装されている「Webサイト構築フレームワーク」だ. 使い方や詳細は 公式サイトに詳しく書かれているし,既に色んな人が書いているので以下略.

移行について
#

移行方法は 公式ページで紹介されている medium2mdを使用した.
Mediumからエクスポートしたデータをmedium2mdでMarkdownに変換することでほぼできた.

変換がうまく行かなかった箇所
#

記事内のURLのMarkdownタイトルが長くなる
#

Markdown記法のURLタイトルに恐らく元のHTMLに含まれているカード型リンク内のサマリ文章までがタイトルになってしまい,とても長いリンクになっていた. 長い箇所は記事数がそんなに多くなかったのであまり深く考えず気づいた箇所だけ手直しした...

SNSなどのリンクの埋め込み
#

HugoではMarkdownの中に簡易的な記述でTwitterやYouTubeなどを埋め込める Shortcodeという機能がある.

medium2mdで変換されたMarkdownにはTwitterの埋め込み箇所がまるっと欠損していた.僕の場合は特定の箇所でしかTwitterを参照していなかったので,以下の様な簡易スクリプトでShortcodeを生成して貼り付けた.

YouTubeの埋め込み箇所はそのままURLに展開されていた.これまた使用箇所が少なかったので気づいたところのリンクをShortcodeで貼り直した.

Hosting & Deployment
#

構築したサイトはGithub Pagesで公開している.

基本的には以下の公式ページ通りにすればできる.

Host on GitHub

少し迷った点として,Github Pagesでのサイト公開の方式が2のタイプあり, 公開方式によってデプロイ方式が複数パターンあった.

公開方式は以下の2つのパターン

  • User/Organization Pages (https://<USERNAME|ORGANIZATION>.github.io/)
  • Project Pages (https://<USERNAME|ORGANIZATION>.github.io/<PROJECT>/)

上記の公開方式により,デプロイ方式が枝分かれする

最初はUser/Organization Pages方式でリポジトリを分けて構築した.この方式の場合,ビルドして生成されるpublicディレクトリをsubmodule化しリポジトリを分けているので,deploy.shなるものを用意してデプロイする. しかし次第にリポジトリを2つに分けている事に煩わしさを感じてリポジトリを1つにしgh-pagesブランチで公開する様に変更した.

デプロイ自動化
#

Github Actionでデプロイを自動化した.利用したのは以下で,どちらかのGetting Started通りに.github/workflows/gh-pages.ymlを作成し,masterブランチにpushするだけでgh-pagesブランチに公開される様になった.

少しハマった所として, Managing a custom domain for your GitHub Pages siteに従い設定したカスタムドメイン用のCNAMEファイルがデプロイ時に消えてしまい,リポジトリ -> Settings -> Custom domain の値が元に戻ってサイトが見れないようになってしまった.

GitHub Actions for GitHub Pages側の READMEをよく読むとCNAMEファイルを追加するオプションがあった.

- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./public
    cname: github.com

REAMDEをよく読む事の重要性を再認識した.

移行してみて
#

記事をMarkdownで書いてGit管理し,自分のドメインでサイトを公開し,サイトデザインは Themeがたくさん公開されていて自作もできるので,トータルで満足している.

細かい設定やタグ機能,デザインなどは少しずつ修正していきたい.

まとめ
#

いつものペースでたまに更新すると扱い方を忘れそうなので(デプロイ自動化したから大丈夫なはず),これを機に定期的に書いていきたい.

著者
suy0n9
Software Engineer

Related

ブログはじめました
blog
お金の管理と流れ
life
2018年振り返り
life review