Hexo でブログを構築した後、Hugo でのブログ構築は比較的簡単です。なぜなら、Hugo ブログの構築環境と Hexo ブログの構築環境は同じだからです。また、両方のブログのデプロイも同じで、いくつかの簡単でよく使われるコマンドを覚えるだけで済みます。
もし私が自分のメインサイトとして 1 つのブログを選ぶなら、Hugo ブログを選ぶでしょう。ただし、私にとって Hugo ブログの致命的な問題は、見た目の良いテーマがあまりにも少ないことです。私を引き付けるのはその速度です。以前に構築した Hugo ブログの速度は本当に非常に速かったです。一方、Hexo ブログにも欠点があります。例えば、私のブログの最大の欠点は CSS と画像のレンダリングが遅いことです。私のブログを開くと最初に見えるのは真っ白な画面で、ブログの閲覧体験に非常に影響を与えます。また、アイコンなども時々遅れることがあります。最初は私が Alibaba Cloud の画像ホスティングが遅いためだと思っていましたが、後で実際にはこれが Hexo ブログの欠点であることがわかりました。
それでは、手順に入りましょう！
CHOCOLATEY のインストール#
実際にはこれが何なのかわかりませんが、公式ウェブサイトで調べて理解することができます。私は当時混乱していたので、後で Hugo をインストールする必要があると書かれていたため、適当にインストールしました。公式ウェブサイトには 2 つのインストール方法が書かれていますが、これらの違いがわかりませんでしたので、簡単な方法を選びました。ターミナルを開いて以下のコマンドを入力します。
（cmd.exe でインストールする場合）：
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
Hugo のインストール#
いつものように、公式ウェブサイトにアクセスして調べてください。ここでは、前述の **Chocolatey (Windows)** を使用してインストールする方法を選択します。ここでも 2 つの方法があります。
choco install hugo -confirm
および
choco install hugo-extended -confirm
ここでは、第 2 の方法をインストールすることを強くお勧めします。最初は私が適当に第 1 の方法を選んでインストールしたため、後でブログをアップロードし始めたときに問題が発生し、hugo-extendedが不足していることがわかりました。そうです、第 2 の方法です。後で第 2 の方法をインストールしてこの問題を解決しました。
インストール後、バージョンを確認してインストールが成功したかどうかを確認することをお勧めします。以下のコードを入力します。
hugo version
以下のように表示されます。
ここで注意する点は、Hexo のバージョンチェックのコードとは異なることです。
ブログの作成#
ローカルプロジェクトとしてブログを作成します。
hugo new site ブログ名
ブログに移動します。
cd ブログ名
静的ファイル public を生成します。
hugo
テーマの変更#
前述したように、Hexo のテーマは自分の好みに合うものを見つけるのが難しいと言いましたが、いくつかのテーマは良いと思います。以下のテーマがあります。
| ghcard Ice-Hazymoon/hugo-theme-luna | ghcard reuixiy/hugo-theme-meme |
|---|
お好みのテーマを選んで変更してください。
記事の投稿#
新しい記事を作成します。
hugo new post/私の最初の記事.md
ローカルでプレビューします。
hugo server -D
記事のルートディレクトリに静的な記事を生成します。
hugo
publicフォルダに移動します。
cd public
次に、以下のコードを入力します。
git add .
git commit -m 'first commit'
git push -u origin master
画像の参照#
一般的に、ブログ記事で画像を参照する場合は相対パスが必要です。Hugo ブログでは、データは通常staticディレクトリに配置されますので、画像をこのディレクトリに配置する必要があります。手順は以下の通りです。
1. 記事のディレクトリに移動します。Hugo ブログは通常D:\Blog\wangyunzi\content\postsのようなディレクトリにあります。そして、画像を格納するための専用のフォルダを作成します。
2. 記事を書くときに、元々このフォルダの画像を参照する必要があります。例えば、のような相対パスを使用する必要がありますが、これをに変更する必要があります。これにより、後で画像がエラーにならなくなります。
3. 最後に、これらの参照した記事をstaticフォルダに移動します。
最後に、私の実践の結果、上記の手順が少し冗長であることがわかりましたので、手順を次のように変更しました。
1.staticディレクトリの直下に画像を配置する専用のフォルダを作成します。例えば、D:\Blog\wangyunzi\static\imgsです。使用する画像を直接ここに配置します。
2. 画像を参照する際は、のような形式で書きます。
まとめ#
最後に、画像の使用には通常 2 つの方法があります。1 つは上記のようにローカルの画像を直接アップロードする方法であり、もう 1 つは画像ホスティングサービスを使用する方法です。最初にブログに触れたとき、私は常にローカルの画像をアップロードすることが最善だと信じていました。なぜなら、画像ホスティングは少し手間がかかるだけでなく、お金もかかるからです。これは貧しい大学生にとってはかなりの打撃です。しかし、後になって、私は徐々に画像ホスティングを使い始めて便利だと感じました。移動性も比較的便利で、時々ローカルの画像よりも速く参照できることもあります。現在、私は画像ホスティングとして Alibaba Cloud のオブジェクトストレージサービス（OSS）を使用していますが、特に問題はありません。ただし、私が比較的無謀なためか、今日 Alibaba Cloud から残量警告が届きました。これはまるで晴れた日に落雷が落ちたようなもので、1 元の割引で購入した 40G のストレージが数日でほぼ使い果たされてしまいました。本当に大変です。これからは少し節約して使うようにしましょう。
