# ブログをFirebase+Hugo+LoveItに移行した
今まで技術記事を書くのに色々使ってきましたが、100%満足なものはありませんでした。
|プラットフォーム |API(CLI) による投稿・アップデート |Markdown |Ctrl+Vで画像貼り付け |Admonitions（後述） |日本人以外にも親切か |
|- |- |- |- |- |- |
|[Dev.to](https://dev.to/) |:ballot_box_with_check: |:ballot_box_with_check: | | |:ballot_box_with_check: |
|[Medium](https://medium.com/) | | |:ballot_box_with_check: | |:ballot_box_with_check: |
|テキストエディタ + [Jekyll](https://jekyllrb.com/) + [GitHub Pages](https://pages.github.com/) |:ballot_box_with_check: |:ballot_box_with_check: |depends on text editor |テーマによる？ |設定による |
|[Qiita](https://qiita.com/) |:ballot_box_with_check: |:ballot_box_with_check: |:ballot_box_with_check: | | |
|[Hatena Blog](https://hatenablog.com/) |ムズい |:ballot_box_with_check: |:ballot_box_with_check: | | |
https://blog.wataash.com は今まではてなブログで運用していたのですが、
[Hugo](https://gohugo.io/)で100%満足なものを作ることができたため切り替えることにしました。
私は技術記事を書くときに画像を多用するので、Ctrl+Vで画像を貼り付けられる機能は必須です。
2016時点では（私の知る限り）マークダウン編集中にクリップボードの画像を簡単に貼り付けられるテキストエディタは存在しなかったので、Jekyllは選択肢に入りませんでした。
しかし最近になって[Markdown Paste](https://marketplace.visualstudio.com/items?itemName=telesoho.vscode-markdown-paste-image)というVisual Studio Code拡張機能が登場しました。
そして瀑速で安定していてなんか色々超すごい（語彙）[Hugo](https://gohugo.io/)が登場しました。
Hugoは今やJekyllの利用者数を超えるのではないかというくらい多くの人が利用していて、情報もたくさんあります。
[Netlify](https://www.netlify.com/) とか
[Firebase Hosting](https://firebase.google.com/docs/hosting) のような素晴らしいwebホスティングサービスも無料で使える時代になりました。
そんなわけでHugo + Firebase-Hostingを試してみたのですが、これが素晴らしくて、
今後はQiitaなども極力使わずHugoを使ったブログに全てを書いていこうと決めました。
## テーマの選択
[Hugoのテーマ](https://themes.gohugo.io/)の選択は重要です。
見た目だけでなく機能も提供するためです。
1つの例が *admonitions* です：
{{< admonition info >}}
これはinfo admonitionです。
{{< /admonition >}}
{{< admonition warning >}}
これはwarning admonitionです。
DO NOT execute:
```sh
rm -rf /
```
{{< /admonition >}}
最高に見やすくないですか？
注釈 (footnote) でも補助的な情報を書くことができますが、admonitionの方が見やすいと思います[^1]。
[^1]: これが注釈。
個人的な考えですが、注釈は紙の本向けの書式であって、（少なくとも今の技術では）ウェブサイトには向いていないと思います。
本ではページの間に指やしおりをはさんで行ったり来たりするのが容易ですが、
ブラウザだと戻る・進む・スクロール・タブ切り替えのコストが高いからです。
ということでいくつかの[GitHubのスター数が多いテーマ](https://hugoranked.com/)を試してみました。
|テーマ |GitHubスター数 (2020-08-09) |ダークモード対応 ([prefer-color-scheme][]) |多言語対応 (i.e. https://blog.wataash.com/ https://blog.wataash.com/ja/) |Admonitions |Disqus comment (see the bottom of this page) |検索 🔍 |etc |テーマ
|- |- |- |- |- |- |- |- |-
|[Academic][] ([preview][Ap]) (for generic website including blog) |4851 |:ballot_box_with_check: |:ballot_box_with_check: | |:ballot_box_with_check: |:ballot_box_with_check: |Slow, Making it a simple blog is tough |Academic
|[Even][] ([preview][Ep]) |1168 | | |:ballot_box_with_check: |:ballot_box_with_check: | | |Even
|[Coder][] ([preview][Cp]) |1072 |:ballot_box_with_check: light/dark switch button is not implemented | | |:ballot_box_with_check: | | |Coder
|[LoveIt][] ([preview][Ip]) |604 |:ballot_box_with_check: |:ballot_box_with_check: |:ballot_box_with_check: |:ballot_box_with_check: |:ballot_box_with_check: | |LoveIt
|[Fuji][] ([preview][Fp]) |41 |:ballot_box_with_check: |:ballot_box_with_check: | |:ballot_box_with_check: |:ballot_box_with_check: | |Fuji
|[Learn][] ([preview][Lp]) (for documentation, not for blog) |1000 |? |? |? |? |? |? |Learn
|[Docsy][] ([preview][Dp]) (for documentation, not for blog) |869 |? |? |? |? |? |? |Docsy
|[Book][] ([preview][Bp]) (for documentation, not for blog) |792 |? |? |? |? |? |? |Book
[Academic]: https://github.com/gcushen/hugo-academic
[Ap]: https://sourcethemes.com/academic/
[Even]: https://github.com/olOwOlo/hugo-theme-even
[Ep]: https://hugo-theme-even.netlify.app/
[Coder]: https://github.com/luizdepra/hugo-coder
[Cp]: https://themes.gohugo.io/theme/hugo-coder/
[Learn]: https://github.com/matcornic/hugo-theme-learn
[Lp]: https://learn.netlify.app/en/
[Docsy]: https://github.com/google/docsy
[Dp]: https://example.docsy.dev/
[Book]: https://github.com/alex-shpak/hugo-book
[Bp]: https://themes.gohugo.io/theme/hugo-book/
[LoveIt]: https://github.com/dillonzq/LoveIt
[Ip]: https://hugoloveit.com/
[Fuji]: https://github.com/amzrk2/hugo-theme-fuji
[Fp]: https://hugo-theme-fuji-demo.now.sh/
[prefer-color-scheme]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
LoveItが完璧だったのでこれにしました。いやー素晴らしい。
Hugoはドキュメントを真面目に読むと学習コストが高いので、
てきとーに効率良く学ぶ方法などもそのうち書きたいと思います。