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

自由にカスタマイズでき、コマンド一つで記事の自動生成ができる静的サイトジェネレータ「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)のアピールができるポートフォリオとしても活用できるかと思います。

さいごに

ここまでお読みいただきありがとうございました。

僕のブログサイト「kzy.tech〜日本脱出のための教科書〜」がどのようなサービスで作られているかが気になる方は以下別記事にてご説明していますので、ご覧いただけますと小躍りして喜びます💃

【コピペOK】HUGOでアフィリエイト用ブログサイトを作ろう

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

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

また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます。

以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌

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

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

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

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

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

また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃

人気記事

【超便利】ブログ運営を楽にできるおすすめ画像編集ソフト5選

手間暇かけずにブログ運営をしたい方向けです。 このブログ記事を作成する時に使われる画像関連サービス(フリー画像素材、画像の加工、画像配信、画像圧縮)をご紹介します。

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

未経験だけどプログラミングを学んでエンジニアになりたい、社会人だから時間もそれほど多く無いので効率よく勉強したい。 私もその内の一人でした。今回の記事で最短でエンジニアになるためのおすすめUdemy講座4選をご紹介したいと思います。

【個人開発】副業でアプリを作りたいならサーバーは契約しない方がいい理由

個人で副業のためにアプリ開発をしてみたいと考えている方向け。 iOS/Androidの個人アプリ開発の場合データのやりとりを行うため、サーバを契約する人が多いです。 しかし、考えなしにサーバを契約するのは非常に大きなデメリットがあるため、私はあまりオススメしません。 ではどの様にしてお金をかけずにアプリ作りができるか、なぜFirebaseを使うべきなのかこの記事で解説していきます。

【海外にもある！？】海外就活でブラック企業を回避する方法

海外での就活を考えている方向けの記事です。 ブラック企業は日本企業のイメージがありますが、そんなことはありません。 日本の就活とは違う点、また海外の就活で失敗しないために事前に知っておいた方が良い情報を本記事にてまとめていきます。
ベトナム・ダナン生活関連

【ダナンの物価】ダナン在住者が伝える2020年ベトナム最新状況！

最近観光地として人気が高まっているダナンですが、近年物価の変動が大きくなっていっているように感じます。 2019年〜2020年でのダナンの物価はどのようなものなのか、ダナン在住者として現地の声をお届けできればと思います

【残業大国】日本の異常な労働環境をベトナムで働いてみて実感した件

日本ってやっぱり「働く」ことに関しては異常ですよ。 「お客様は神様」精神、残業を美徳とする文化、過労死という言葉を作り出してしまう労働環境。 今回は日本の異常な労働環境をベトナムの労働環境と比較しながら説明したいと思います😱

【海外移住】ベトナムに移住したら日本の8億倍住みやすかった件

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

【ダナンの家賃】日本相場の半額以下！？ベトナム家賃相場調査！

ベトナム・ダナンへ移住を考えている方向け。 海外移住をする上で家賃相場を事前に知っておくことは生活費がどれくらいかかるのか計算ができるので非常に重要です。 こちらの記事で家賃相場、賃貸契約の流れ、賃貸契約時のトラブルについて解説していきます。
技術メモ・プログラミング関連

【おすすめ】Udemy講座でAWS ソリューションアーキテクト アソシエイトを一発合格できた件

AWS ソリューションアーキテクトの勉強をしている方向け。
Udemyでのおすすめ講座、一発合格のための勉強方法から受験の手順まで本記事でまとめました。
認定試験の受験を考えている方には必見です。

【python】文字認識で画像からテキストを出力するやり方をわかりやすく【Tesseract&PyOCR】

こんにちはkzyです。 今回は文字認識ライブラリのPyOCRとTesseractを使って画像からテキストを抽出したいと思います。 環境構築含めpythonでの文字認識のやり方を簡潔に説明できればと思います。

【コピペOK】flutterのSizedBoxとExpandedの違いをわかりやすく

flutterでオブジェクトのサイズ調整の理解が曖昧な方向け。 flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。

【python】文字認識したテキストをエクセルに出力するやり方をわかりやすく【PyOCR + XlsxWriter】

こんにちはkzyです。 今回はPyOCRで文字認識したテキストをエクセルに出力する方法を解説します。 具体的にはXlsxWriterというライブラリを使用してPythonスクリプトからエクセル操作を行います。