[前編]HUGOとNetlifyでお手軽サイト構築-開発～公開まで①開発編【無料】

こんにちは！

KTgraphのKEISUKEです。

 
本日はすこし趣向を変えて、WEBサイト構築についてのHowToをお話しようと思います！
これから自分のWEBサイトを作ろうと思っている方、新しくサイトを移管しようとしている方の参考になればと思います！
ちなみにすべて無料！で仕上げていくつもりです！！

前編・後編でお届けします。
本日は前編：サイトジェネレーターHUGOを使った開発についてになります。

後編：「HUGOとNetlifyでお手軽サイト構築-開発～公開まで2公開編【無料】」はこちらから！

はじめに

まずはじめに、WEBサイト（ホームページやLP、ブログサイト）というとWordpressを思い浮かべる方、実際にWordpressで運用されている方が多いのではないでしょうか。
確かにWordpressは今なお圧倒的なシェアを誇っており、たくさんの情報でありふれていますが、もっと手軽かつ、無料で自分のサイトを作ってみたいと思ったことないでしょうか！

個人的にはHTML、CSS、JSをごりごり書かれる方ならむしろWordpressだといろいろとやり辛いことが多く、むしろ今回紹介する内容のほうがかなり高コスパだと思います！

静的サイトジェネレータについて

まず、HUGOの話に入る前に、サイトジェネレータについて話します！
静的サイトジェネレーターってそもそも何なの？

静的サイトジェネレーターとは、生データとテンプレート群を基に、完全に静的なHTML Webサイトを生成するツールのことです。基本的に個々のHTMLページをコーディングする作業を自動化し、それらのページをユーザーがすぐに使えるようにします。

続いて特徴、メリットについて主には以下のようなものがあります。

といった感じで、特に管理画面（CMS）でなくても自分でコードもコマンドもやりまっせといった方なら、CMSを入れるより圧倒的に導入は楽です！
また、後編でお話しするNetlifyで公開すれば無料かつ、即デプロイできます。
またGitにプッシュするだけで、そのままデプロイしてくれるので、DevOps的にも運用は楽です。
ちなみにNetlifyにはNetlify CMSもあるので、CMSも導入しときたいなって人にもおすすめです！

正直、今のところメリットしかないといった感じです！

 静的サイトとは？

さて、ここまで当然のように「静的サイト」という言葉を使っていますが、静的サイトとはどんなサイトのことでしょうか。

静的サイトとは、「誰が」「いつ」「どこで」見ても同じ情報が表示されるWEBサイトのことです

つまり、閲覧する人（ユーザ）、時間によらず、常に同じ内容のページが表示されるWEBサイトのことです。
大概のホームページやLPなどは静的サイトになりますね！

 どんなのがあるの？

続いて、静的サイトジェネレーターの種類として、主にどんなものがあるのか紹介します。

• NEXT.js (Javascript)
• Gatsby (Javascript)
• Nuxt.js (Javascript)
• HUGO (Go)

まだまだほかにジェネレーターはありますが、メインどころですとこんな感じでしょうか。
世界的シェアでいうと、「NEXT.js」、「Gatsby.js」が多いと思いますが、今回はあえて、「HUGO」を使ってみようと思います！

選定理由はシンプルに「Go」で作られたフレームワークだから！だけです！

HUGOについて

ここから本題のhugoについてです！
これまで紹介した静的サイトジェネレーターとしての特徴でもお話しましたが、Hugoは「Go」を使っています。
ちなみに、もしhtmlやjavascriptを書いた事が無い、コマンドラインでコマンドを実行した経験が無い、という状態であれば、HUGOはそこそこ敷居が高いものになると思います。
静的ページジェネレータは最低限初歩的なプログラムが理解できている中級者向けであり、単純に記事を書く事だけに集中したい方は、レンタルブログやWordpressの方がいいかと思います。

インストール

さて、さっそくhugoをインストールしていきます！
本記事で紹介する内容はすべて【Windows環境】になります。

1.githubからダウンロード

HugoはGithubに公開されていますので、以下からダウンロード、またはクローンしてきます。
Gitにふれたことがない人はググりましょう！
Hugo公開先Github



私はWindows環境なので、最新の「hugo_extended_0.111.3_windows-amd64.zip」を選択します。
※もろもろ開発したい方は「hugo_extend_～」を選択したほうがよいです！
上記でダウンロードしたソースは(zipの場合は展開後)、任意のフォルダに配置します。

2.環境変数パスを通す

環境変数の編集を以下のように行います。
「ユーザーの環境変数」でPathに上記で配置したフォルダのパス「～～\Hugo\bin」を追加します。

パスが通ったどうかコマンドプロンプトから確認します。

hugo version

3.サイト新規作成

ここからHugoで実際にサイトを作成していきます！
コマンドプロンプトから任意のフォルダに移動後、以下を実行します。
※「sample」は何でもOKです。

hugo new site sample

任意のフォルダ内に「sample」フォルダが作成されていたらOKです！

4.ローカル起動

作成したサンプルサイトをローカルサーバで起動してみましょう。
上記で作成したフィルダ（ここでは「sample」）に移動して、コマンドをうちます。

cd sample

hugo server

すると下部のほうに↓のような結果が表示されると思います。
Web Server is available at http://localhost:1313/

適当なブラウザでここからローカルにアクセスしてみましょう。

とりあえず、こんな画面が表示されていたらOKです！
今は中身に何もいれていないので、Not Foundになっています。

テーマ選定と適用

さて、あとは自分のサイトを作るべく、どんどん書いていったらよいのですが、一から起こすのは手間ですよね！なので、Hugoのテーマからいい感じのものを選んで、適用しようと思います！
hugoのテーマはこちらから参照してください。
無料のテーマが多く、数も多いので、自分の好みに合ったテーマを選ぶとよいでしょう。
試しに今回は「Roxo hugo」というテーマを使ってみます。



テーマは個別に「Download」からgithubを経由して、ソースコードをダウンロードします。

ここからテーマを適用していきます！
ここではとりあえず、テーマを適用してローカルで表示するところまでなので、細かい設定などはスキップしています。

DLしたテーマを所定の場所へ移動

ここまでで作成した「\sample\themes\」配下に置きます。
※このときフォルダ名が「XXXXX-master」などであれば、「-master」は消しておきましょう！
※config内に記載してる、theme名と不一致であるとエラーになるため、テーマのフォルダ名を合わせておきます。

テーマ内のフォルダをすべてコピーペースト

先ほど移動したテーマフォルダ内の「\sample\themes\roxo-hugo\exampleSite」配下
「\sample\themes\roxo-hugo\」（exampleSiteフォルダ以外）配下をすべて元のソースにコピーペーストします。
ペースト先：「\sample\」

これでサーバを起動してみると、先ほどのテーマが適用され、こんな感じの画面になっていると思います！

カスタマイズしよう！

テーマの導入までできれば、次は自分オリジナルサイトにカスタマイズしていきます！
今回の目的は新規構築から公開までなので、ここは省きますが、hugoについてもたくさん情報があるので、気になる方はググってみてください！

ざっくりと触る箇所だけここに記載しておきます。

• テーマ全体の設定(config.toml)
• テーマ全体のCSS(static/css/style.css)
• フォントのCSS(static/css/fonts.css)
• ヘッダとフッタ関連（layouts/partials/）
• ページ新規作成2時のテンプレート(archetypes/default.md)
• その他のテンプレ(layouts/_default/)

さいごに

さて、以上で前編～開発編は終了になりますが、いかがだったでしょうか。
そこまで難しい手順ではないので、WordPress以外で構築してみたい方や、とにかくハイスピードで構築したい方などおすすめです！
ある程度知識のある方なら１時間ほどでWebサイトの構築ができるのではないでしょうか。

次回は後編となるNetlifyでのデプロイ（公開）までお話しする予定なので、チェックしてみてください！
それでは良きフォトライフを！

出張撮影については下記を御覧ください！！

KT-GraphのInstagramをチェック！！

KT-GraphのTwitterをチェック！！

LINEへのお友達追加もお願いします！！