Hugoをパソコンにインストールして使えるようにセットアップしたいと思います。
インストール方法
Macの場合
必要なもの
- Homebrew（インストールしてないならここ でインストールします。 ）
- Hugo
インストール方法
以下のコマンドを実行します。
brew install hugo
これでHugoがインストールされます。
Windowsの場合
必要なもの
- Hugo
インストール方法
-
「hugo_x.xx.x_Windows-64bit.zip」をダウンロードします。（バージョンはお好みで）
-
圧縮ファイルを解凍します。
-
適当なドライブに（例：C直下）Hugoのフォルダを作成します。
-
作成したフォルダ内にbinフォルダとSitesフォルダを作成します。
-
解凍したファイルの中身をbinフォルダ内に全部入れます。
以下が出来上がったモノ。
C:\HUGO
├─bin
│ hugo.exe
│ LICENSE
│ README.md
└─Sites
初期フォルダを作成してみる
インストールが完了したら雛形テンプレートを作成します。
以下のコマンドを実行するだけです。
Hugo new site Template-Hugo
※WindowsとかだとPATHを通していないと上記コマンドが実行されないみたいなので
PATHを通す作業が追加で必要になります。
作成されたひな形テンプレートは以下のようになります。
Template-Hugo
├─archetypes
├─content
├─data
├─layouts
├─static
└─themes
themesフォルダにテーマを入れる
Hugoはthemesにテーマがないと真っ白い画面になって何も表示されません。
そのため、何かサンプルテーマを入れて実行します。
Hugoの公式サイトからは色んなテーマを見ることができます。
今使っているテーマについて
2020年01月現在
このサイトではdim0627さんが作成した
Robustというテーマを使用しています。
とてもシンプルで、かつ自分のやりたいデザインが実現できそうでした。
カスタマイズ性も高そうで、色んな方がカスタマイズしているようだったので、
自分もこのテーマを使って好きなようにサイトを作りたいと思いました！
今回はこのRobustを使って導入していきます。
Robustをダウンロードする
そのままthemeをダウンロードしてしまうのもありなのですが、
都度更新があるたびにレイアウトに影響するかもしれないので、
自分のGitにforkして操作していきます。
forkのやり方は簡単で、
欲しいと思った人のリポジトリを見にいって、
画面右にある「Fork」というマークをクリックするだけです。
ここであれば好きに弄れますので、
面倒だなって思った人はここからダウンロードしていってください笑
ちなみに設定方法は２通りあって、
1.データをそのままダウンロードする。
clone or DownloadのボタンからDownload ZIPを
クリックして圧縮ファイルでダウンロードし、
themesフォルダ内に展開する方法があります。
2.git cloneコマンドを実行する。
cd themesでフォルダに移動してから
git clone https://github.com/kentarotakahashi1/hugo_theme_robust.git
を実行してフォルダ内にテーマをダウンロードするというのがあります。
記事を書いてみる
cd Template-Hugoでフォルダ内に移動して,
hugo new Test.md とコマンドを実行すると、
Content フォルダ内に「Test.md」というmarkdownファイルが作成されます。
これで記事のテンプレートが一つ完成しました。
ちなみに上記コマンドの応用として、hugo new tmp/Test.md とコマンドを実行すると
Content フォルダ内に「Tmp」フォルダを作成し
Tmpフォルダ内にTest.mdファイルが作成されます。
実行してみる
cd Template-Hugoでフォルダ内に移動して
Hugo server -w -D とコマンドを実行するとビルドされてローカルで確認することができます。
http://localhost:1313 にアクセスすると確認することができます。
以上