2024-07-07に投稿2024-07-10に更新Tech-Blog23分で読む (約3487語)

【Hexo Theme】Icarusはただの定番じゃねぇぞ

Intro

HexoのThemeをGhost Casperにしたもののしっくり来ず、なによりCode Blockの表示がおかしい。
これはじっくりThemeを選ぶ必要があるだろう。

TL; DR

HexoのThemeならIcarusが最強だ。
AzureでCustom Domainを取得し、GitHub PagesでHostする方法も解説する。

Theme for Hexo
Customize Hexo
- Code Block Theme
- Backup on GitHub
  - あまりに単純なSolution
Custom Domain
- Obtain Custom Domain at Azure App Service Domain
  - 手順
- Custom Domain for GitHub Pages
  - Custom Domain設定が消える!?
ついでに
- 東京都知事選挙の選挙権なかった
- Logicool Options+を常に頭の片隅に
まとめ

Theme for Hexo

参照: https://photo-tea.com/p/hexo-blog-theme-16/

上記の参照ページでHexoで利用できる使いやすいテーマが紹介されている。
他のページでもHexoについて詳しく掘り下げられており、大変参考になった。

landscape

Hexoのdefault theme。
おしゃれで使いやすそうなのでそのままでもよかったが、さすがにdefaultそのままというのが気になったので変更。

こちらはHexo純正のシンプルテーマ。Wordpressで言うところの「 Twenty 〜」的な立ち位置でしょうか。まずは無難なデザインからブログを始めたい方はこちらがオススメです。hexoをインストールすると標準で使えるlandscapeと似たデザインとなっていますが、Lightはlandscapeをよりシンプルにした白基調のデザインです。
おちゃカメラ。似たThemeであるLightの紹介

とか思ってたら、別ページではこんな紹介されてたw

初回セットアップ時のデフォルトテーマは、landscape テーマというものです。
最低限のことはできるのですが、見た通りデザインがイケてません。オシャレ感が足りません。
Chaotic NotesHexo.js+GitHub Pagesで高機能ブログを手軽に作ろう

Ghost Casper

GitHub: https://github.com/MIKAGMR/hexo-theme-ghost-casper

Ghost Casperはシンプルでクリーンなデザインが特徴のテーマだ。以下はDEMOページからのスクショだ。

Info

ホームを開くと、一面が背景色で中央にサイトタイトルが表示される。
内容へのアクセスにはひと手間増えるが、補って余りあるインパクトだろう。
Home of Ghost Casper

少し下にスクロールすると、記事一覧が表示される。
Articles of Ghost Casper

Code Blockなどはこちらの画像の通り。
Article of Ghost Casper

あれ、筆者が試したときはCode Blockで行番号すら出なかったのに。
この問題は次回の記事で解決した。

Icarus

GitHub: https://github.com/ppoffice/hexo-theme-icarus

HexoのIcarusテーマは、ブログとしてのさまざまな機能をデフォルトで備えており、ユーザーが簡単に使いこなせるように設計されている。以下に、Icarusテーマにデフォルトで備わっている主要なブログ機能について具体的に説明する。

コメントシステム

Icarusテーマは、いくつかの人気コメントシステムと統合されている。主要なコメントシステムには以下が含まれる：

Disqus: 広く使われているコメントプラットフォームで、簡単に統合できる。
Facebook Comments: Facebookアカウントを使用したコメントシステムで、ソーシャルメディアとの連携が強化される。
Gitalk: GitHubアカウントを使用したコメントシステムで、開発者コミュニティに人気がある。
Valine: 簡単に設定できる軽量なコメントシステム。

メニューとナビゲーションバー

カスタムメニュー: ユーザーがカスタムメニューを設定できるため、重要なページやカテゴリーへのアクセスを簡単にする。
ナビゲーションバー: トップに固定されたナビゲーションバーを使って、サイト全体の主要なセクションに迅速にアクセスできる。

内部検索

Algolia: 高速で精度の高い検索機能を提供するAlgoliaを統合できる。これにより、ユーザーはサイト内のコンテンツを迅速に検索できる。
Local Search: オフラインでも動作するローカル検索機能を提供しており、簡単なセットアップで利用可能。

メディアとマルチメディア

画像の埋め込み: 投稿内に画像を簡単に埋め込むことができ、視覚的に魅力的なコンテンツを作成できる。
ギャラリー: 複数の画像をギャラリー形式で表示する機能があり、フォトブログや作品集に最適。
ビデオ埋め込み: YouTubeやVimeoなどのビデオを簡単に埋め込むことができる。
オーディオプレーヤー: オーディオファイルを埋め込むためのプレーヤーもサポートされている。

ソーシャルメディア統合

シェアボタン: Twitter、Facebook、LinkedInなどのソーシャルメディアで記事を共有するためのボタンがデフォルトで提供されている。
ソーシャルメディアリンク: ヘッダーやフッターにソーシャルメディアのアイコンを表示し、ユーザーが簡単にフォローできるようにする。
RSSフィード: サイトの更新情報をRSSリーダーで購読できるように、RSSフィードを提供している。

パフォーマンスとセキュリティ

画像の最適化: Lazy loading（遅延読み込み）や画像の圧縮など、パフォーマンスを向上させるための機能が組み込まれている。
キャッシュ: 静的ファイルのキャッシュを利用することで、ページの読み込み速度を向上させる。

まとめ

Icarusテーマは、ブログ運営に必要なさまざまな機能をデフォルトで備えており、ユーザーが簡単にプロフェッショナルなブログを作成できるように設計されている。洗練されたデザイン、豊富なカスタマイズオプション、優れたパフォーマンスとセキュリティ、多様なソーシャルメディア統合など、あらゆる面でバランスの取れたテーマだ。

Summary

Icarusはド定番だ！

Customize Hexo

Code Block Theme

icarusにおけるHighlightのThemeは各記事のFront Matterでも、_config.icarus.ymlでも設定できる。

_config.icarus.yml

article:
    # Code highlight settings
    highlight:
        # Code highlight themes
        # https://github.com/highlightjs/highlight.js/tree/master/src/styles
        theme: atom-one-dark # light -> dark
        # ...

さて、これを設定しても、Code BlockのThemeが変わらない。なぜだろうか。
答えは簡単。_config.ymlの設定が誤っており、syntax highlightが機能していなかったためだ。

_config.yml

syntax_highlighter: highlight.js # highlightだと思ってた……
highlight:
  line_number: true
  auto_detect: false
  # ...

Backup on GitHub

GitHub Pages用のRepositoryは、当然GitHub Pages用なので (進次郎)、そこには基本的にGitHub Pagesで表示する内容に関連するファイルのみが並ぶ。

厳密には、GitHub側ではPagesとしてのルートを自由に設定できるが、hexo deployの中でpushすると、PagesとしてのルートとRepositoryのルートが一致してしまう。

そうでなくとも、ただのメモなど公開する必要のない情報は、Private Repositoryに保管しておきたいものだろう。

あまりに単純なSolution

hexoのprojectの直下にある.gitのremote情報をBackup用のRepositoryにするだけでよい。 実際、GitHub PagesのRepository情報は_config.yml内で参照されるのみだ。

~~GitHub Pages with Hexoの紹介ページたちにだまされたー！GitHub PagesとHexo組み合わせるだけならgit cloneいらんやんけ！~~

Custom Domain

Obtain Custom Domain at Azure App Service Domain

参照: https://qiita.com/carol0226/items/3ce40224c579e35017b0

もともとはAzure VMで運用しているWebアプリケーションにhttps接続するためにCustom Domainを取得しようとしたのがきっかけ。VS Subscriptionで使い切れないCreditで、高品質なドメインが実質無料で取得できるのだから、利用しない手はないだろう。そもそも、効率化目的とはいえ業務に利用するWebアプリにhttp接続し続けるのは問題があるわけだし、至極まっとうな行動だろう。

価格を考えても、.comのような高品質ドメインが年間12ドルで買えるのだから、安いものだろう。

12ドルと同じ価格のはずなのに1800円という数字を見て正直びっくりした。

手順

Azureポータルにログインし、「App Service Domains」を選択。
「+ Add」をクリックし、希望のドメイン名を入力。
利用可能なドメイン名を確認し、購入手続きを行う。
ドメイン購入後、「DNS Zone」を設定し、必要なレコード（AレコードやCNAMEレコード）を追加。
GitHub Pagesのリポジトリ設定で、カスタムドメインを設定。

注意点として、DNSの設定が反映されるまでに時間がかかることがあるので、少し待つ必要がある。また、SSL証明書の設定も忘れずに行おう。

Custom Domain for GitHub Pages

参照: https://zenn.dev/donchan922/articles/59c54fe659128294bb65

GitHub Pagesにカスタムドメインを設定する方法についても簡単に解説する。

GitHubリポジトリの設定ページに移動。
「Pages」セクションで「Custom domain」に希望のドメイン名を入力。
DNSプロバイダで、GitHub Pages用のCNAMEレコードを設定。

Custom Domain設定が消える!?

参照: https://divrots.com/2019/08/25/prevent-to-reset-custom-domain-with-hexo/

Hexoを使用している場合、デプロイ時にカスタムドメイン設定がリセットされる問題が生じることがある。この問題を防ぐためには、以下の手順を実行する。

_config.ymlファイルに以下の設定を追加する。

_config.yml

 // ...
 deploy:
   type: git
   repo: <repository_url>
   branch: main
   message: "Site updated"
// ...

source/CNAMEファイルを作成し、ドメイン名を記入しておく。その後hexo generateを実行する。

ついでに

東京都知事選挙の選挙権なかった

選挙権があるのは告示の3か月前である3/19までに転入届を出してる人限定らしい。
ひよっこ都民すぎたみたいだよ……。

Logicool Options+を常に頭の片隅に

この記事を書き始めた直後、logicoolのキーボードが突然不調になった。入力はできるが、削除やカーソル移動ができない。

まったく反応しないでもなく、接続が不安定というわけでもない。これまでの経験から、すぐにピンときた。

notice

Logicool Options+のUpdateが来たんだな……

実はLogicool Options+は裏側でUpdateされた場合、手動でOptions+を開くまでの間、接続している機器の機能の多くが使えなくなるという困った仕様がある。

Logicoolはマルチペアリングなどメリットも豊富なので、利用している人も多いことだろう。ぜひ頭の片隅に置いておいてほしい。

まとめ

HexoのThemeはIcarusが最強だ。
AzureでCustom Domainを取得し、GitHub PagesでHostする方法も解説した。

Closing

Hexoの改修に手間暇がかかり、記事が長くなり、分割された。