イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

静的ウェブサイトをHugo+Netlifyで作るのは結構簡単!

飛ばしても良い雑談

もう社会人一年半なんですね。
新卒2年目エンジニアの小畑です。

先日、毎日更新しているブログが一周年になりまして。
あれからたくさん成長した自信はありますが、もう一年経ってしまったのかって感じです。
油断してるとあっという間に30歳、40歳、ってなってしまいそうです。

だから、常に挑戦して行きたいですよね。

こんな依頼あるあるですよね

・サイト作って!
・めったに更新しないよ!
・かっこいい感じ!
・管理画面とかいらない!

ココらへんからわかるのは。

・DBいらないな
・WordPressやガッツリPHP書いたりしなくていいな
・更新にリリースが必要でもいいな
・さくっと作るのが必要か

ってのが予測出来て、それなら静的なウェブサイト作りたいですよね。

ってことで、今日紹介するのはこちら!

せいてきさいとじぇねれーたー!

さくっといい感じのサイトが作れるよ!

Hugoとは

これは、静的サイトジェネレイターと呼ばれるものです
テンプレとマークダウン使って、簡単にHTMLやJS使ってきれいなサイトが!

管理画面のないWordPressとかイメージしても良いかもしれないです。
記事とかをマークダウンで書いたりも出来ます。

ちなみに、テンプレートとかは以下にいろんなものがあります。すごい。

Netlifyとは

静的なページを公開するのに使えるサービス。

GitHub Pages知ってたら、似たイメージを持っても大丈夫です。

GitHubにコードを上げたら、コンパイルして、ページ公開してくれて、オリジナルドメインとかも設定できて・・・
まあいろいろ便利。

これらを組み合わせると、一時間かからずに、上のテーマみたいなサイトの基礎が出来ます!

実際にやってみよう

  1. Hugoをローカルにインストール

  2. Hugoプロジェクト作る

  3. GitHubで管理する

  4. NetlifyにGitHub登録する

でおしまい。今回はMac基準で。

ではそれぞれを説明します!

1.Hugoのインストール

brew install hugo

おしまい!

2.Hugoプロジェクト作る

hugo new site project-hugo
cd project-hugo

おしまい!一応次のためにproject-hugoに入っておきましょう

3.GitHubで管理する

git init
git add .
git commit -m "hogehoge"
git remote add origin https://github.com/yyyyyyy
git push origin master

いつもどおりですね!

4.NetlifyにGitHub登録する

こちら。get startedをどうぞ。

GitHubと連携。

new site from gitを選択。

あとは、自分の作ったリポジトリを選択すれば、build、公開出来ます!

今回の私の記事は、操作方法をすべて説明するのが目的ではないのでこのへんで。

どれくらい時間かかる?

テンプレートを動かして、サイトを見れる状態にするのは、慣れてなくても1時間もかかりませんでした。

このあと、ドメインの変更とかも出来ます。

また、静的ウェブサイトなのに、formの内容をNetlifyの管理画面で受け取ることが出来ます。

簡単なサイトを作るのには凄く便利なので、一度使ってみてください!