Hugoをパソコンにインストールして使えるようにセットアップしたいと思います。

   

インストール方法

Macの場合

必要なもの

  • Homebrew(インストールしてないならここ でインストールします。 )
  • Hugo

 

インストール方法

以下のコマンドを実行します。

brew install hugo

これでHugoがインストールされます。

 

 

Windowsの場合

必要なもの

  • Hugo

 

インストール方法

GitHubにアクセス

  1. 「hugo_x.xx.x_Windows-64bit.zip」をダウンロードします。(バージョンはお好みで)

  2. 圧縮ファイルを解凍します。

  3. 適当なドライブに(例:C直下)Hugoのフォルダを作成します。

  4. 作成したフォルダ内にbinフォルダとSitesフォルダを作成します。

  5. 解凍したファイルの中身を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」というマークをクリックするだけです。

 

出来上がりがこちら

ここであれば好きに弄れますので、

面倒だなって思った人はここからダウンロードしていってください笑

 

ちなみに設定方法は2通りあって、

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 にアクセスすると確認することができます。

 

 

以上