最近では自作ブログを作る人が増えてきています。

理由は運営側の広告の自動挿入によって、広告が重複しブロガー側の広告が差し止めになるためです。

そこで今回は自作ブログはどのように作れば良いのか、このブログサイトの構築手順を例として書いて行きます。

副収入としてブログを始めたい方、ポートフォリオ作成にご興味がある方のご参考になれば幸いです。

目次

前置き: このブログサイトの仕組み

まずは、このブログサイトがどのようにできているのかを説明します。

Tranquilpeak

上記がこのブログサイトを運用するために使われているサービスです。

それぞれのサービスについて順番に説明していきます。

ブログサイトの仕組みを知ることはブログ運用において非常に重要です!

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

hugoとは静的サイトジェネレータと呼ばれるブログを構築するためのサービスです。

hugoコマンド一つで記事を自動生成できたり、ローカル環境で超高速にビルドができます。

自分で好きなテーマを選び自分のブログサイトにテーマをダウンロードします。

テンプレートのテーマをそのまま使っても良いですし、カスタマイズも柔軟にできます。

初心者からフロントエンド玄人の方にもオススメです😃

ブロガーのライバルは多いので、少しでもオリジナリティのあるブログサイトを作りましょう!

ソース管理 : Bitbucket

プライベートリポジトリが無料で使えるソース管理サービスです。

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

現在は無料で使えるようです。
https://github.blog/2019-01-07-new-year-new-github/

CDN(Contents Delivery Network) : Cloudinary

CDNとは画像や動画データをクラウド上から配信できるサービスです

動画や画像をCloudinaryにアップロードするとアクセス用のURLが発行されます。

そのURLを使えば、ブログ内でCloudinary上の画像や動画を表示することができます。

料金プランはいくつかありますが、個人ブログであれば無料プランで問題無いです。

また画像配信のみではなく画像加工やサイズ調節がクラウド上で操作できます。

Cloudinary上のデータは変更後即時反映されるので、ブログ内で使われる画像等も簡単に差し替えや加工ができます。

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

ブログを公開するためのサービス : Netlify

続いてブログを配信(ホスティング)するためのサービスです。

記事を作成しBitbucketに反映したら、自動でNetlifyが本番環境にも更新を反映してくれます。

また、ドメイン取得等サービス公開のための準備もNetlifyで完結します。

御託が長くなりました、では早速Hugoを用いて環境構築を初めていきましょう!

色々とホスティングサービスがありますが、netlifyは運用面で非常に楽です。

自作ブログその1 「Hugoをインストールする」

まずはHugoのローカル環境構築を行います。

Hugoをインストールするためには、まずTerminalを開いて以下のコマンドを実行してください。

以下の3つのコマンドを実行することで、Hugoのテンプレートファイルをダウンロードできます。

1
2
3
4
5
6
//hugoを自分のPCにインストールする
brew install hugo
//hugoのワーキングディレクトリを作成する(myblogという名前で作成していますが、ここは自分の好きな名前で変更できます)。
hugo new site myblog
//上記コマンドで生成されたmyblogディレクトリに移動する
cd myblog

自作ブログその2 「Hugoのテーマを選ぶ」

次にHugo Themeの中から自分の好きなテーマを選びましょう。

テーマデータを自分のHugoのテンプレートファイルに組み込んでいきます。

以下のサイトから自分の好きなテーマを選んで、以下のコマンドを実行してください

Hugo Themes

https://themes.gohugo.io/

今回は、このブログのテーマでもある「tranquilpeak」というテーマを組み込むことを前提として話していきます。

1
2
3
4
5
6
//themeフォルダに移動する
cd theme
//上記Hugo Themesから自分の好きなテーマを選び、データを自分のフォルダへhugoに取り込む。
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git
//ルートディレクトリに戻る
cd .. 
※Hugoのテーマについては、各テーマのリンク先にhttp://で始まるリンクが見つかると思いますので、そちらをコピーして、上記git cloneコマンドの後ろに貼り付けてください😃

Tranquilpeak

自作ブログその3 「設定ファイルを編集する」

次に自作ブログサイトに関する情報を格納したconfigファイルを編集します

これにより、hugoコマンドでローカル環境でビルドできるようになります。

そのために 以下リンク先のconfig.tomlファイルの中身を全てコピーしましょう。
ローカルにあるconfig.tomlファイルに貼り付けて
ください。

Tranquilpeak設定ファイル

https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/exampleSite/config.toml

これで全ての準備が整いました。

あとは以下コマンドでローカル環境が立ち上げれます

1
2
// ローカル環境でビルドする
hugo server -D

Tranquilpeak
すると上記画像のように ローカル環境用のURLが発行されます。

そちらをブラウザに貼り付けて以下のような画面が表示されれば無事Hugoのローカル環境構築が完了です!

Tranquilpeak

さいごに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【デスク周り】コスパ最高!買ってよかったおすすめPC周辺機器4選

デスク周りのPC周辺機器の購入を検討されている方向け。
普段コスパ重視でPC周辺機器を選んでいますが、実際に買ってよかったと思えたおすすめPC周辺機器を本記事でご紹介します。

【アプリ開発】個人開発で広告収益を上げるための6つのポイントを解説

個人でアプリを作って収益を上げるやり方を探している方向け。
アプリ開発を副業で考えている方向けに広告収入のやり方、及びおすすめの収益戦略を本記事で解説します。

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

個人で副業のためにアプリ開発をしてみたいと考えている方向け。 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スクリプトからエクセル操作を行います。