ホーム>Hugo>【WordPress卒業】HugoとVercelを使って安くて速いブログを作る
💲

【WordPress卒業】HugoとVercelを使って安くて速いブログを作る

皆さんこんにちは、Sandyマンです!

突然ですが、皆さんは「ブログを作りたい」と思ったことはありませんか?(唐突)ありますよね??ですが、WordPressで作ると、ドメイン代+サーバー代がかかってしまいます…。そんなときの救世主がそう、静的サイトジェネレータです!

ということで、今回は静的サイトジェネレータ(以下SSG)であるHugoを使ってでブログを作っていきます!それではやっていきましょう!

実施環境

  • OS Linux 5.18(Manjaro)

1.環境構築

まず、Hugoのパッケージをインストールします。Linux環境の方は、sudo apt install hugoという感じでインストールできます。

WindowsやMacの方は、ChocolateyやHomeBrew?とかを使っていい感じにやってください。(要はggrks)

2.ブログの作成

それでは、ブログを作っていきます!ターミナルを開いて、hugo new site myblogというコマンドを実行します。(myblogのところは自由に変えてください) すると、myblogというフォルダ内にいろいろファイルが生成されたはずです!これで一応ブログはできました!

3.テーマの追加

ですが、これだけだとブログとして使い物になりません。なぜかというと、レイアウトを整えたりする「テーマ」がないからです。テーマは自分で作ることもできますが、Hugoの公式サイトにいろいろなテーマが紹介されています。今回は、結構人気なMainroadというテーマを使用してみます。

まず、MainroadのGitHubに飛んでReadmeのところにあるコマンドを実行します。git cloneのやつとgit submoduleのやつの2つが書いてありますが、ここではsubmoduleの方のコマンドを実行してください!

実行したら、myblog直下のconfig.tomlというファイルの中身を変更します。初期状態では3行記述されていますが、そこにtheme = "mainroad"と付け足してください。

付け足したら、myblogにcdしてhugo server -Dというコマンドを実行します。ブラウザでlocalhost:1313にアクセスすると、いい感じのブログになっていると思います。これでテーマの追加は完成です!

4.記事の作成

次は、記事の作成の方法です!Hugoで記事を作成する際は、hugo new posts/hogehoge.mdというコマンドを実行します。実行すると自動的にcontent直下にpostsというフォルダが作成され、その中にhogehoge.mdが入っているはずです。あとはマークダウン形式で書いていけば完成です!

5.アップロード

いよいよ最後です。テーマも追加し記事もできたら後はアップロードするだけです。アップロードする際はNetlifyとかAWSとかいろいろありますが、個人的にはVercelをおすすめします。Vercelは、GitHubにプッシュすると自動でいろいろやって公開してくれ、さらに無料で使えるのでめちゃくちゃおすすめです!

本当に安くて速いのか?

本当に安くて速いのか?と思う方もいると思うので、その辺に転がっていたデータでWordPressと比較してみます。(雑なのであまり参考にしないでください)

まず、WordPressはドメイン代、サーバー代、そしてテーマも買う場合はテーマ代もかかります。ドメインは年2000円だとして、サーバー代が有名なエックスサーバーのやつで月990円、テーマは無料のもありますが有料の場合、1万円くらいはかかります。計算すると1年でだいたい、25000円くらいかかります。

それに比べHugoを利用した場合、サーバー代は無料、テーマもタダ、ドメインは年2000円くらいで済みます。つまり合計年2000円ですね。これはかなり安いのではないでしょうか?

速度も動的サイトであるWordPressに比べて、Hugoのほうが高速です。このことから、Hugoでのブログは本当に安くて速いといえますね!(間違ってたらすみません)

まとめ

ということで、HugoとVercelでブログを作ろうでした!皆さんもぜひ、HugoとVercelで最高のブログライフを手にしてみてください!それではさようならーーーー!!

About

Sandyマンのうまのアイコン

Sandyマン

趣味的にブログをやったり開発をしてる暇人。JavaScriptやPythonについての記事を書いたりしています。