デザイナーの僕がHugoを使ってポートフォリオサイトを作ってみる #1【準備編】
こんにちは、dotstudioのデザイナー・ちゃちゃまるです。
僕はまだ自分のポートフォリオサイトを持っていません。TumblrやPortfolioboxなどのサービスを使って作ろうと色々試してみましたが、自分のほしい機能がなかったり料金がかかったりしてしまい、結局挫折していました。
そこで、重い腰を上げて、外部サービスに頼らず自分だけでポートフォリオサイトを作ってみようと思います。
本連載のミッション
とりあえず僕がイメージしているポートフォリオサイトを書き起こしてみます。
まず機能面でほしいのは
- ブログのような投稿形式がいい（時系列に投稿を並べたい）
- 投稿をいくつかのジャンルにわけたい（作品、お知らせ、など）
- 作品には、それを作るにあたって使ったソフトウェア等をタグ付けしたい（#illustrator、 #photoshop、など）
- 作品の投稿には、作品の画像とともに作成した日付や説明文なども書きたい
- コードはGithubで管理したい
- Github Pages（https://chachmaru.github.io）で公開したい
ぐらいです。ジャンルは増やす可能性もあるので、その増えたジャンルに対しても違うレイアウトが組めるような自由度もほしいですね。
次にデザイン面。あくまでも作品がメインであって欲しいので、サイドバーなどはつけず、シンプルなデザインにしてみます。
また、勉強のため、テンプレート等は使わず自分でコードを書きたいと思います。
それでは一からやっていきましょう。
動的サイトと静的サイト
ウェブサイトには実は「動的」と「静的」の二種類あることをご存知でしょうか？僕はなんとなく「JavaScriptを使ってアニメーションを施していれば動的、CSSだけなら静的なんじゃないかなー」と思っていたのですが、実は全く違いました。
「動的」と「静的」の大きな違いは、どのタイミングでHTMLが生成されるかです。動的ウェブサイトでは、ページにアクセスがあったタイミングでPHPやNode.jsなどのサーバーサイドのプログラムでHTML(場合によってはCSSやJavaScriptも)を生成します。例えば会員登録が必要なサイトの場合は会員情報などのデータを扱いますが、そういったデータベースを利用する必要がある場合は、ページにアクセスがあったタイミングでデータベースからデータを引っ張ってきて表示させています。一方、静的ウェブサイトの場合はユーザーがページにアクセスする前の、管理者側がサーバーにファイルをアップロードするタイミングで既にHTMLが生成されています。ページアクセスより前にコンテンツ内容がHTMLに書かれていて、ブラウザがそのHTMLファイルを読み込んでいます。
動的サイトではアクセスしたタイミングでデータを取ってきたり、HTML生成が行われるため静的サイトにくらべて時間がかかります。静的サイトの方がページの表示速度は早いです。しかし静的サイトでは、例えばユーザーログインなど、見る人によって異なるようなウェブサイトを構築することは難しいです。
今回のポートフォリオは画像をたくさん載せたいため表示速度はなるべく速い方がいいのと、個人のサイトなのでユーザーログインなどは特に考えないとすると、静的ウェブサイトがなんとなく良さそうだな、という感じですね。
静的サイトジェネレーター Hugo
静的サイトを作るといっても、全てのページのHTMLをベタ書きしていくのは効率が悪すぎます。ここで活躍するのが静的サイトジェネレーターというもの。名前のとおり、自動的にHTMLを書き出してウェブサイトを作ってくれる便利なものです。
僕が使おうと思っている静的サイトジェネレーターは、最近話題らしいHugoです。Hugoの特徴はスピードと簡潔さで、僕のような初心者にもわかりやすそうですね。実はこのdotstudioのウェブサイトもHugoで出来ています。Hugoでは記事をマークダウン方式（詳しくはこちら）で書けるようになっているので、効率よく記事を書けるようになります。
僕の環境はこんな感じです。OSやバージョンによって動作が違う場合もありますのでご了承ください。
- Mac OS X El Capitan (10.11.6)
- Hugo Static Site Generator v0.16
とりあえずHugoを使ってみる
早速Hugoをインストールして使ってみましょう。イラストレーターやフォトショップなどのインストール手順とは少し違い、コマンドラインから実行します。
- Homebrew（ソフトウェアのインストールを単純化してくれる管理システム）をインストール
- Homebrewを使ってHugoをインストール
- Hugoを使ってウェブサイトを生成する
ちなみにHugoのインストールまでは代表ののびすけが書いた僕がMacを買い換えてすぐにいれるツール&すぐにする初期設定【2016年9月版】にも載っています。
1. Homebrewのインストール
HomebrewはmacOSのソフトウェアをインストール・管理してくれるものです。Hugo以外にも色々なものに使えると思うので、まだの方はぜひインストールをしてみてください。
ターミナル（アプリケーション＞ユーティリティ＞ターミナル.app）を開きます。そして
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
をコピペしてEnterを押すだけで完了です。
$マークはコマンドであることを示す文字なので、$マーク以降の文字からコピーしてください。
ついでに
$ brew update
も実行して、最新バージョンにアップデートしておきましょう。
2. Hugoのインストール
Homebrewでのインストールは基本
$ brew install xxxxx
です。
Hugoの場合
$ brew install hugo
で出来ます。簡単ですね！
きちんと作動しているかどうかは
$ hugo version
を実行してみて、
Hugo Static Site Generator v0.16 BuildDate: 20xx-xx-xxTxx:xx:xx+09:00
のような結果が返ってきたかどうかで確認できます。
3. ウェブサイトを生成
ウェブサイトを構成するファイル（HTMLやCSSなど）が入る場所を選びます。僕の場合ホームディレクトリ（アプリケーション、ドキュメント、写真フォルダなどがある場所）に新しく「dev」などの名前をつけたディレクトリを作って、その中を開発用にしています。
ここからはターミナルでの作業が多くなるので、コマンドの意味が分からない場合はUNIXコマンド一覧などと照らしあわせながら進めてみてください。
さて、まずはさきほどのdevディレクトリ内にターミナルで移動します。
cd dev
次に、Hugoの雛形を生成します。
hugo new site chachamaru
このようになったら成功です！
Hugoディレクトリ内を軽く説明
Finderからdevディレクトリ内を見てみましょう。ターミナルのいるディレクトリをFinderで開くには
$ open .
と実行するのが便利です。
こんな感じになっていると思います。
Hugo内のディレクトリ/ファイルを軽く説明していきます。実際に作業をするタイミングで更に詳しく解説するので、斜め読みで大丈夫です。
archetypes
archetypesは「原型、典型」という意味で、各ジャンルの記事のベースをここに入れます。詳しくは後ほど。config.toml
ウェブサイトの設定をするファイルです。.tomlはTOML（Tom’s Obvious, Minimal Language）ファイルの拡張子で、設定ファイルを記述する言語です。Tom Preston-Wernerさんが作った言語なので、「Tom’s」となってるんですね。そのまんまですね。content
マークダウンで書いた記事を入れる場所です。ジャンルが複数ある場合、content/ジャンル名/記事.mdのようなディレクトリ構成になります。data
様々なデータを管理しておく場所です。今回ポートフォリオサイトを作るにあたって必要は（今のところ）ないので、消してしまっても大丈夫です。layouts
HTMLファイルを入れる場所です。index.htmlや、各ジャンルの個別ページ、ヘッダーやフッターなどのパーツなども全てここに入れます。static
「静的」という意味で、CSSや画像などを入れておく場所です。themes
Hugoのテーマを入れておく場所です。ただし今回は全部自分でCSSを書きたいので、このディレクトリも使いません。
次回予告
今回は「準備編」ということで、少し長め＆詳しめに書いてみました。初心者の僕でも分かるように書いているので、解説や参考用外部リンクを多めに入れていこうと思います。
次回は「制作編」。HTMLとCSSを書いて、記事を書いて、ローカルサーバーを立ち上げてみるまでをやっていきたいと思います。
それではまた！