こんにちは。システムエンジニアの山下です。
今日は、プログラムを書かずに簡単に自分のブログサイトをネット上に公開してみよう！ということで、最近、巷で話題の静的サイトジェネレーターである「Hugo」と、webサイトをネット上に公開する「Netlify」を使用して、スピーディーに、簡単に、そして費用0で、ネット上にブログサイトを公開してみようと思います。
Go言語で作られている、静的サイトジェネレーターです。静的サイトジェネレーターとは、 HTMLやCSSで作られる静的ページを簡単に作ってしまうツールです。例えば、今回作ろうとしているブログのようなwebシステムを作るためには、大まかなに以下のような動的処理が必要になります。
①ブログ記事を作成し、内容をデータベースに保存
②保存されたページをデータベースから取得し画面に表示する
しかしHugoのような静的サイトジェネレーターでは、markdown形式で作成した記事を、htmlファイルとして生成し、記事をサイト上に設置するので、サーバーを介してコンテンツを取得するという動的な処理を行いません。そのためHugoで開発することにより、サーバー代がかからない、大量アクセスにも耐えることができる、画面表示が早いなどのメリットを得ることが出来ます。
Hugoのような静的サイトを公開するホスティングサービスです。簡単に言えば、HugoやHexoで作ったサイトをお手軽にWEB上に公開してくれるサービスです。簡単なWEBサイトであれば無料で公開することができます。
では、早速、terminalを開いて、ブログサイトを作ってみましょう！今回は、事前に以下の環境を準備してあります。(以下に記したツールのインストール方法などの説明は割愛させていただきます)
・macOS High Sierra
・Homebrew(パッケージマネージャー)
・Github
まずは、Homebrewを使ってHugoをインストールします。
brew install hugo
次にプロジェクトを作成します。
hugo new site yamashita_blog
(hugo new siteのあとは、プロジェクト名を入れるので、好きな名前で構いません。)
これで、Hugoのシステムは揃ったので、次に自分の作りたいサイトや、好みにあった見た目を用意されたテーマから選んで設定してあげます。Hugoのテーマは、Hugoのテーマ一覧に載っているものから選択可能です。見ていただければわかるのですが、コーポレートサイトや ECサイトのテーマもあるので、それらのシステムも作ることができてしまいます。色々あるので迷いますが、今回はこちらのテーマを使わせていただきます。
すでにプロジェクト内に作成されているthemesディレクトリに移動し、
cd themes
選択したテーマを、サブモジュールとして追加します(git cloneでもできるのですが、Netlifyで公開する場合はサブモジュールとして追加しないと動きません。僕は、ドキュメントを無視して進めたので、デプロイする時にハマりました・・・）
git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme
あとはconfigファイルや、コンテンツを作るのみ。今回は面倒なので、サブモジュールにあるexampleSiteをそのままコピーして使わせていただきます。プロジェクト直下に移動して、以下のexampleSiteの下にあるファイルをコピーします。
cp -r themes/hugo-tranquilpeak-theme/exampleSite/* .
これで、テーマ一覧と全く同じサイトが完成！あとは、サイト名や自分の名前なんかをプロジェクト直下にある、config.tomlファイルに上書きしてあげれば自分だけのサイトが作れちゃいます。では、早速作ったサイトを見てみましょう。いきなり、WEB上に公開するのは怖いので、まずは自分のPC上でローカルサーバーを立ち上げ、確認します。
hugo server -D
こんな感じでできてしまいます。ここまで、所要時間は1時間もかかりませんでした！
自分のPC上で、サイトが動くのを確認できたら、実際にWEB上に公開しましょう！
Netlifyにアクセスして、アカウント登録します。
すると、こんな感じで公開したいサイトを選んでねという画面に遷移します。
Netlifyでは、GithugやBitbucketのリモートリポジトリを見て、デプロイしてくれます。なので、先ほど作ったサイトをリモートにプッシュします。(Gitの使い方は割愛させていただきます。)
ビルドの設定をします。Build commandとPublish directoryはHugoの場合、上記の図のように設定します(と言っても、リポジトリからNetlifyが判断して、初期値として入れてくれているので、そのままで大丈夫です）。Hugoのバージョンは、それぞれ異なると思うので、自分のPC上で、hugo versionというコマンドで確認して、入れてあげる必要があります。
あとは、Deploy siteボタンをクリックすると、WEB上に簡単にサイトを公開することができてしまいました。
ここまで所要時間、約3分。簡単です。
現在は、WordpressがCMSとして主流ですが、ブログを公開したいというだけであれば、無料で手軽にサイト公開できるHugoとNetlifyという選択肢もありなのではないでしょうか。普段、Gitでソース管理する人や、Markdownの方が記事を早く書けるという人は、こちらの方が楽で良いかもしれません。
・Hugo
・NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する
しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！
.png)
