手間暇かけずにサクッとアフィリエイト用のブログサイトを作りたいという方向け。

自由にカスタマイズでき、コマンド一つで記事の自動生成ができる静的サイトジェネレータ「HUGO」についてまとめました。


目次


kzyさん!アフィリエイト用のブログサイトを作りたいんだけど、おすすめはある?

Wordpressでブログサイト作るのは??みんな結構使っているよね?


データベース使っているから速度遅いし、無料版だとテーマも少ないから人と被るし嫌だなぁ。

それじゃあ今流行りのHUGOを使うのが良いよ!カスタマイズもできるし速度も早いし!


この記事は以下のような方を対象者としています。

本記事の対象者

  • ブログ作成はじめての方
  • アフィリエイト・ブログサイト作成に興味のある方
  • Wordpress以外でブログ構築を探している方
  • HUGOを知らない方

このブログサイトの仕組み

まずは、このブログサイトで使われているサービスについて図でご説明します。

Tranquilpeak

流れとしては記事をHUGOで作って、ファイルをBitbucketにアップロードすると自動で本番環境にNetlifyが反映してくれるという感じです。

静的ページジェネレータ : Hugo

Tranquilpeak
HUGOとはLinuxコマンド一つで記事を自動生成できるサービスのことです。

HUGOの最大の特徴はデータベースを使わずに記事を管理することです。

Wordpressの場合はブログ記事の情報を通信を介してデータベース(MySQL)から取得します。

一方HUGOの場合は通信を行わずGithub上にアップされたローカルファイルで記事を管理します。

まとめるとHUGOは通信を介さず記事を取得できるのでパフォーマンスが優れているのです。

ソース管理 : Bitbucket

Tranquilpeak

BitbucketはGithubと同様ソースコードのバージョン管理を行うためのツールです。

プライベートリポジトリが無料で使えるのでGithubではなくBitbucketにしました。

※2019年1月7日の記事によると、以前はプライベートリポジトリをGithubで利用するには月$7程度かかりましたが、現在は無料で使えるようです。

HugoはBitbucket、Netlifyと組み合わせることでGitコマンド一つで簡単に記事の公開ができます。

また、 記事の内容を戻したり間違えて削除したりしてもGitで管理しているのでいつでも元の状態に戻せます

画像配信サービス : Cloudinary

Tranquilpeak

CloudinaryはCDN(Content Delivery Network)と呼ばれ、画像の読み込み速度を上げるために使われるサービスです。

またCloudinaryは画像配信のみでなく画像加工やサイズ調整も簡単にでき、即時発行されるURLを書くだけですぐに画像が更新されるので重宝しています。

以下リンクからサインアップができます😃
https://cloudinary.com/

ホスティング : Netlify

Tranquilpeak

Netlifyは{Git経由でアップされたファイルから、自動で本番環境のブログに反映してくれるサービスです。

また、ドメイン取得もNetlifyで行えるのでお名前.comとか他サービスでドメインを取得しなくても良いのも楽ですね。

HUGOのメリット/デメリットとは?

続いてHUGOのメリット/デメリットについて説明します。

デメリットとしてはあまり無いのですが コマンドを使うので慣れるまでは運用に時間がかかると思います。

しかし、一度慣れればスラスラと記事作成->公開ができるようになります。

メリットについては以下順番に説明していきます。

1.ブログのデザインが豊富

Tranquilpeak
HUGOでは多くのデザイナの方が多種多様なデザインを用意しており、その数なんと 280種類以上です。

これだけ種類があれば 他人のブログとデザインが被ることはなかなか無いでしょう。

そこからブログの カスタマイズも自分自身で行えるので、個性をブログに求める方にとってはうってつけではないでしょうか。

2.セキュリティが高い

Tranquilpeak
いつの間にか情報が抜き取られていたり、情報漏えいが昨今頻発していると思います。

これの原因の一つとして考えられるのが 通信の暗号化がされているか否かです。

通信の暗号化(SSL通信)とはパスワードのような重要な情報を送信する際に暗号化することで万が一第三者に情報を抜き取られても解読できないので安全だとされています。

Wordpressと違いHUGOではサーバサイドとの通信がないため、情報漏えい等セキュリティリスクが減ります。

また、Netlifyから本番配信することで 暗号化通信にも対応したウェブサイトを作れるので、信頼性の高い安全なブログサイトを作れます。

HUGOでブログサイトを作ろう

では実際にHUGOを用いてブログサイトの構築を始めましょう!

文字だけではわかりづらいという方のために、動画もご用意しましたのでよろしければご参考ください。

今回の記事での目標は自分のPC上(ローカルと呼びます)でHUGOの材料をダウンロードし、それらを元にブログを立ち上げることです。

1.ターミナルからHUGOをダウンロードする

Tranquilpeak
まずはHUGOを自分のPCにインストールしましょう。
上記画像のとおり スポットライト検索を開いてターミナルを開きます。

次にターミナル上で以下コマンドを入力しHUGOをダウンロードします。

1
2
3
4
//デスクトップに移動する
cd ~/Desktop
//hugoを自分のPCにインストールする
brew install hugo

2.HUGOコマンドでブログ用フォルダを生成する

Tranquilpeak
続いて、以下コマンドを実行し自分のデスクトップにブログ作成用のフォルダをHUGOで自動生成します。

1
2
3
4
//ブログ作成用フォルダを生成する (そのままコピペでOKです、exampleには任意のフォルダ名を入力できます)
hugo new site example
//上記コマンドで生成されたexampleフォルダに移動する
cd example

3.HUGOテーマから自分の作りたいブログのテーマをインストールする

Tranquilpeak
次にHugoテーマの中から自分の好きなテーマを選んで、exampleフォルダにテーマを組み込みます
以下のサイトから自分の好きなテーマを選んで、以下のコマンドを実行してください

HUGOのテーマ

https://themes.gohugo.io/

今回は 「Aerial」というテーマを使ってブログを作っていきます。

1
2
3
4
//themeフォルダに移動する
cd theme
//上記Hugo Themesから自分の好きなテーマを選び、データを自分のフォルダへhugoに取り込む。
git clone https://github.com/sethmacleod/aerial.git
※他のテーマを選びたい場合は各テーマの詳細ページのgitから始まるコマンドを探して、2つ目のコマンドに上書きしてください。

4.設定ファイルを書き換える

これでaerial用のテーマファイルはダウンロードできたので、次に設定ファイルの書き換えを行います。

まずは以下コマンドで設定ファイルをテキストエディタで開きます。

1
2
3
4
//exampleフォルダに移動する
cd ..
//テキストエディタで設定ファイル(config.toml)を開く
open -e config.toml

すると、以下ファイルがテキストエディタで開かれます。
Tranquilpeak

この内容を以下aerialテーマの参考サイトのconfig.tomlの内容をそのま コピペします。

aerialテーマのconfig.toml

https://github.com/sethmacleod/aerial/blob/master/exampleSite/config.toml

コピペするとこんな感じになると思いますので、このままこのファイルを保存してください。
Tranquilpeak

5.ブログサイトを立ち上げる

お疲れ様でした。ようやくブログサイトを立ち上げます。

最後に以下コマンドを実行してください。

1
2
//exampleフォルダに移動する
hugo server -D

エラー等がなければ以下の画像のように Web Server is available at http://localhost:xxxxのような文言が表示されると思います。
Tranquilpeak

そのままブラウザを立ち上げ(googleでもsafariでもなんでも良いです)、URLにhttp://localhost:1313をコピペしてアクセスしてみてください。
Tranquilpeak

おめでとうございます、これでHUGOを使ったブログサイトの立ち上げが完了しました:)

ブログ作りで大切なこと

ブログ作りで重要なのは 「どれだけ楽して良記事を生産できるか」だと思います。

記事作成工程が面倒だと、途中でやめてしまう可能性が大です。

なので、先々長いことブログ運用を行うことを考えるとWordPressではなく Hugo+Netlifyによるブログ構築の方が良いと思います。

また、Hugoはまだ新しい技術ですのでこちらを元に自作ブログを作ればLinux,マークアップ言語(htmlやcss)、スクリプト言語(javascript)のアピールができるポートフォリオとしても活用できるかと思います。

速習!おすすめプログラミング勉強法【Udemy】

いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。

Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。

ちなみに私は文系卒で社会人になってから独学でUdemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました

Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy

また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくてムーンウォークしながら寝落ちします💃

関連記事

【Udemy】未経験から始める格安プログラミング講座4選

海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。

【Udemy】未経験から現場で活躍できるエンジニアになるための実践プログラミング講座5選

プログラミング未経験だけどエンジニアになりたい方向けで記事を書きました。 実際にUdemyを受講してエンジニアになった経験から、実務で必要とされる知識を学べるUdemyのおすすめ講座をこちらの記事でご紹介できれはと思います。 中には無料で受けられる講座もあるので、興味のある方必見です😄

【無料で学べる】Udemyのおすすめフロントエンド講座4選

海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。