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

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


目次


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

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


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

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


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

本記事の対象者

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

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

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

Tranquilpeak

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

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

Tranquilpeak
HUGOとはLinuxコマンド一つで記事を自動生成できるサービスのことです。
HUGOの最大の特徴は データベースを使わずに記事を管理することです。

Wordpressの場合はブログ記事の情報を通信を介してデータベース(MySQL)から取得するのですが、HUGOの場合は通信を行わずGithub上にアップされたローカルファイルで記事を管理します。

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

ソース管理 : Bitbucket

Tranquilpeak

プライベートリポジトリが無料で使えるソース管理サービスです。
Gitコマンド一つで簡単に記事の公開ができます。

また、 記事の内容を戻したり間違えて削除したりしてもGitで管理しているのでいつでも元の状態に戻せます
※2019年1月7日の記事によると、以前はプライベートリポジトリをGithubで利用するには月$7程度かかりましたが、現在は無料で使えるようです。

画像配信サービス : 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

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

関連記事

【海外移住】営業職からすぐにキャリアチェンジした方が良い理由

営業、エンジニア、プロジェクトマネージャーを経験してきましたが、その中でも 最も無駄なキャリアのは営業でした。 営業になることでどれだけ自分の人生の時間をどれだけ無駄に消費することになるのか、元営業の視点からご説明したいと思います。

【ダナンで働く】ダナン在住者が伝える日本人がベトナムで仕事を見つける海外転職必勝法

ベトナム中部のリゾート都市ダナン。日本で働くことに疲れた僕がワークライフバランスを求めて海外を中心に就職活動をしました。 徐々に日本人の間でも人気になりつつあるダナンですが、いざ海外転職する場合どのような仕事が日本人にはあるのか本記事でお伝えしたいと思います。

【残業地獄/月200時間超】商社マンとエンジニアどちらがよりブラックか考えてみた

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