Magren

Magren

Idealist & Garbage maker 🛸
twitter
jike

博客をHugoに移行します。

先に移行する理由について話しましょう#

以前は hexo + next テーマを使用していましたが、自分で気まぐれに追加したものとしては、NetEase Cloud の外部リンクや live 2d、tag cloud などがあります。人々からはかなり見栄えが良いと言われていましたが、自分が見慣れるとちょっと派手すぎると感じるようになりました。また、他の人のブログにアクセスしたときには、基本的には hexo + next を見ることが多かったので、少し飽きてしまいました。

しかし、理解するのは簡単です。hexo は使いやすく、安定しており、機能が充実しており、成熟したテーマ(Next と言います)があります。この時点で私の視線は hugo に向けられました。

Hugo は Go 言語を利用して開発され、世界で最も高速なウェブサイト構築ツールと言われています。具体的にどれほど速いかはわかりませんが、hexo で静的ウェブページを生成するのに待つ必要があるのに対して、hugo では待つ必要がありません。私がコマンドを入力して Enter キーを押す瞬間には、すでに完了しているような感じがします。

もう一つの利点は、hugo がホットリロードをサポートしていることです。ファイルの変更内容がリアルタイムにウェブページに表示されるため、hexo のように複数回のリフレッシュが必要なくなります。

hugo には上記のような利点がありますが、hexo に比べて知名度やチュートリアル、ドキュメント、設定の最適化などはインターネット上では比較的少ないため、いくつかのことは自分で試行錯誤する必要があります。

構築#

環境#

  • Git

  • hugo は Go 言語に依存しているため、Goもインストールする必要があります。

  • その後、hugoをインストールします。

    hugo を解凍した後は、環境変数に追加するだけです。

ブログの生成#

hugo をインストールした後、コマンドラインで hugo new site ' ブログ名' を実行すると、hugo はブログを格納するためのフォルダを生成します。一般的には以下のようなフォルダがあります:

  • archetypes/
  • content/
  • data/
  • themes/
  • layouts/
  • static/
  • config.toml

一般的な設定情報は config.toml に記述され、記事やいくつかのページは content にあります。archetypes には、hugo new コマンドを使用してページを生成する際のヘッダーの設定情報が一般的に格納されます。themes には必要なテーマが格納されます。

テーマのインストール#

hexo とは異なり、hugo にはデフォルトのテーマが付属していないため、hugo serve を実行してブラウズすると、何も表示されません。そのため、hugo 公式のテーマライブラリから好きなテーマを探す必要があります。

同時に、テーマのドキュメントに従って config.toml を設定します。ダウンロードしたテーマのフォルダには通常、exampleSite というフォルダが含まれており、これは作者の設定例です。何を設定すればいいかわからない場合は、作者の例をコピーして自分で編集すればよいです。

記事の生成#

hugo new posts/xxxx.md コマンドを使用すると、content/posts フォルダに必要なマークダウンファイルが生成されます。マークダウンの構文で編集してください。

また、新しく生成されたファイルの上部には、hexo とは異なり、draft 属性が追加されています。これは、ドラフトかどうかを示すもので、true の場合、このファイルはレンダリングされず、ブログに表示されません。削除するか、false に変更するとレンダリングされます。

tag や categories の追加方法は hexo と同じです。

ページの生成#

特定のページ(アーカイブページなど)は、hugo new page/xxx.md コマンドを使用して生成できます。たとえば、about ページは hugo new page/about.md となります。生成後、draft を削除して layout 属性を追加し、ページの種類を指定します。about ページの場合は、layout: about となります。

ブラウズおよびデプロイ#

ブラウズするには、hugo serve コマンドを使用し、アドレスは http://localhost:1313/ です。

hexo とは少し異なります。

hugo コマンドを実行して静的ページを生成し、ブログのフォルダに public フォルダが追加されます。このフォルダには最終的に生成されたページが含まれています。public フォルダのファイルをリポジトリにプッシュすれば完了です。

最後に#

長期的な視点から見ると、記事を書くほど hugo の利点がより明確になります。

しかし、私はただ遊びたかっただけです。

Just for fun.

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。