最近では自作ブログを作る人が増えてきています。
理由は運営側の広告の自動挿入によって、広告が重複しブロガー側の広告が差し止めになるためです。
そこで今回は自作ブログはどのように作れば良いのか、このブログサイトの構築手順を例として書いて行きます。
副収入としてブログを始めたい方、ポートフォリオ作成にご興味がある方のご参考になれば幸いです。
目次
前置き: このブログサイトの仕組み
まずは、このブログサイトがどのようにできているのかを説明します。
上記がこのブログサイトを運用するために使われているサービスです。
それぞれのサービスについて順番に説明していきます。
静的ページジェネレータ : 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を用いて環境構築を初めていきましょう!
自作ブログその1 「Hugoをインストールする」
まずはHugoのローカル環境構築を行います。
Hugoをインストールするためには、まずTerminalを開いて以下のコマンドを実行してください。
以下の3つのコマンドを実行することで、Hugoのテンプレートファイルをダウンロードできます。
1 |
|
自作ブログその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 ..
自作ブログその3 「設定ファイルを編集する」
次に自作ブログサイトに関する情報を格納したconfigファイルを編集します
これにより、hugoコマンドでローカル環境でビルドできるようになります。
そのために 以下リンク先のconfig.tomlファイルの中身を全てコピーしましょう。
ローカルにあるconfig.tomlファイルに貼り付けてください。
Tranquilpeak設定ファイル
https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/exampleSite/config.tomlこれで全ての準備が整いました。
あとは以下コマンドでローカル環境が立ち上げれます
1 |
|
すると上記画像のように ローカル環境用のURLが発行されます。
そちらをブラウザに貼り付けて以下のような画面が表示されれば無事Hugoのローカル環境構築が完了です!
さいごに
ここまでお読みいただきありがとうございました。
僕のブログサイト「kzy.tech〜日本脱出のための教科書〜」がどのようなサービスで作られているかが気になる方は以下別記事にてご説明していますので、ご覧いただけますと小躍りして喜びます💃
また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます。
以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌
速習!おすすめプログラミング勉強法【Udemy】
いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。
Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。
ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました
Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy
また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃