たまたまWEB系のデザイナーさんと少しお話する機会があって、WordPressって移転とかめんどくさいですよねーという話から、今は静的サイトジェネレーターでサイト作るのが良いですよ！と聞いたので試してみました。
＜メリット＞
- サーバー費用 0円 独自ドメイン可
- 表示が高速
- マークダウンで記述できる
- PHPとかSQLとかDBみたいなものは無い！使用技術がシンプル
＜デメリット＞
- 環境構築が基本コマンド。エンジニアではない人は敷居が高い！（ググって、その通りにやればなんとかはできます…）
また副業として月間平均20万PVのCGメソッドというブログも運用しています｡
デザノマではデザイナーの副業についてを書いています｡
環境構築
Hugo（Windows版）のダウンロード
OSのよってデータが違います。今回はWindows版をダウンロード。
ディレクトリの作成
- C:Hugoに「Hugo」フォルダを作成
- 「hugo_バージョン名_Windows-64bit」フォルダをbinという名前に変えて、C:Hugobinに配置
- C:Hugositesに「sites」フォルダを作成
環境変数の設定
パスを保存して、コマンドを使えるようにします。
せっかくなのでこれもコマンドプロンプトで設定します。
win+Rから「cmd」と検索してコマンドプロンプトを起動
setx path "PATH=%PATH%;C:Hugobin"
と入力。「成功: 指定した値は保存されました。」と表示されればOK
環境パスの設定がうまくいかない時
Hugoのコマンドの前にパスを入れましょう。
C:Hugobinhugo
という感じにする方法もあります。
コマンドが使えるか確認
コマンドプロンプトで下記を入力
hugo version
バージョンが表示されていればOK
サイトの作成
コマンドプロンプトで下記を入力
cd C:Hugosites
hugo new site サイト名
Congratulations! Your new Hugo site is created in C:Hugositesサイト名.とでればOK
テーマのインストール
から好きなテーマを探し、GitHubのパスを控えます。
階層下のthemaのフォルダへ移動し、テーマをダウンロードします。（gitが入っていること前提です）
cd C:Hugositesjsx-methodthemes
git clone https://github.com/yoshiharuyamashita/blackburn.git
サイトを確認
ローカルにてサーバーを起動します。（+テーマも設定）
cd C:Hugositesサイト名
hugo serve -t blackburn
http://localhost:1313/
をブラウザで開いて、サイトを確認します。
基本操作
環境設定
C:Hugositesブログ名config.toml
を開いて編集。
テーマのサンプルを参考にする
テーマの指定
theme = "blackburn"
記事の投稿
hugo new post/hello.md
で記事をポスト
サーバーの再起動
cd C:Hugositesjsx-method
hugo serve
※テーマを指定しているので、serve -tの記述は省ける
※「hugo serve -D」 をつけると “draft = true” とした下記事も表示されるようになります
※「hugo serve -w」（-w）を付けておくと、ファイルの変更がすぐに反映されます。
カテゴリーの設定
タグとカテゴリーの設定
config.tomlに記述
[indexes]
tag = "tags"
category = "categories"
サイドバーのメニューも追記
[menu]
[[menu.main]]
name = "Category"
pre = "<i class="fa fa-list fa-fw"></i>"
weight = 3
identifier = "Categories"
url = "/categories/"
設定用HTMLの設置
- themesblackburnlayoutstaxonomyのフォルダへ移動
- 同階層にあるtag.htmlを複製してcategory.htmlに変更
Netlifyを使ってサイトを公開する方法
GitHubにリポジトリを作成（データを置く）Netlifyでデプロイ（サイトを展開して公開する）してみます。
GitHubにリポジトリを作成
簡単に。
- GitHubのアカウントを作成
- リポジトリを作成。URLを控える
- SourceTreeなどを使って、クローンして繋ぐ
- 作成したサイトデータ（C:Hugositesjsx-methodの階層下!!）をコミット・プッシュして、サーバーに上げる
Netlifyの設定
Get started for freeに従って、記入していきます。
- GitHubを選択
- リポジトリを選択
- デプロイの設定
・master
・hugo_0.51 ※バージョンをつけないと失敗するそうです。あらかじめhugo versionのコマンドで調べておきます。
・public/
サイドにDeploy Siteボタンを押せば、すぐにサイトが公開されます。
他の設定周り
- Hugoのconfig.tomlのbaseURLで設定したURLを記入しておきます。
- Netlifyで、Change Site Nameからサイト名（jsx-method）をいれます
例
https://jsx-method.netlify.com/とか
独自ドメイン設定も可能。
感想
終わってみて。作業的にはすぐにサイト構築できるので簡単！です。
※ 普段コマンド打たないので、調べながらそれなりに時間かかりましたが。
情報をアーカイブしていく、WIKIが好きなのでExtendScriptのメモ用にちょっといじっていこうと思っています。
追記
ワンクリックで作成できるテンプレートも用意されてました。まずはここから始めてもよいかもしれません。
