MacにHugoを入れて、ローカルでサンプルサイトを立ち上げるまで

今まではブログを作る=Wordpress、とやってきましたが、最近静的サイトジェネレータに興味が出てきていました。

なので、ローカルで試しに使ってみようと思い、Hugoでサンプルサイトを立ち上げるまでを行いました。

必要なもの

  • homebrew
    • hugoのインストールのため
  • git
    • テーマを取得するため

手順

1. hugoのインストール

hogebrewを使いました。

$ brew install hugo

2. サイトの雛形を作成

適当な場所でhugo new site サイト名を実行します。

今回はen-blogというブログを作ることにしました。

$ hugo new site en-blog
  Congratulations! Your new Hugo site is created in /Users/yoshikiito/blog/en-blog.
  
  Just a few more steps and you're ready to go:
  
  1. Download a theme into the same-named folder.
     Choose a theme from https://themes.gohugo.io/, or
     create your own with the "hugo new theme <THEMENAME>" command.
  2. Perhaps you want to add some content. You can add single files
     with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
  3. Start the built-in live server via "hugo server".
  
  Visit https://gohugo.io/ for quickstart guide and full documentation.
 
Powered by Prhythm

ここまでで、en-blogというディレクトリの中に雛形が作成されました。

3. テーマの取得

今回は事前にテーマ一覧を見て、良さそうなものを選んでおきました。

Hugo Theme Cleanwhite | Hugo Themes

テーマのディレクトリに遷移して、githubからテーマの内容を取得しました。

$ cd en-blog/theme/
$ git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git
  Cloning into 'hugo-theme-cleanwhite'...
  remote: Enumerating objects: 315, done.
  remote: Total 315 (delta 0), reused 0 (delta 0), pack-reused 315
  Receiving objects: 100% (315/315), 5.30 MiB | 2.51 MiB/s, done.
  Resolving deltas: 100% (128/128), done.

4. サンプルサイトの内容を反映

上記の手順3までだと、サイトのコンテンツが無い状態なので、実際にブラウザから確認しても内容がないブログが表示されるだけです。

これだと、見た目などの確認ができないので、テーマ作者が用意してくれているサンプルサイトを反映させます。

Hugoでサンプルサイトの内容を確認する

やることは

  1. テーマディレクトリの中にあるexampleSiteというディレクトリを、サイトのroot(今回はen-blog)の直下にコピー
  2. テーマディレクトリの中にあるlayoutsstaticというディレクトリを、サイトのroot(今回はen-blog)の直下にコピー

の2つです。

5. サイトの確認

ここまで出来たら、サイトのrootで

$ hugo server -t hugo-theme-cleanwhite

を実行。※最後のhugo-theme-cleanwhiteの部分はテーマの名前になりますので、何を指定すべきかは各テーマのページに書いてある説明を確認してください。

ターミナルに表示されたアドレスを開くと、サンプルサイトの表示が確認できます。

Huabing Blog 赵化冰的博客 Zhaohuabing Blog

これで、イメージと異なるようであれば別のテーマを使うでもいいですし、気に入ったのであればあとは自分でサイトの内容を作っていくことになります。

参考

この記事を書いた人

yoshikiito

都内でテストエンジニア&ブロガーをやっている@yoshikiitoです。

ソフトウェアエンジニアの学習方法や成長するための考え方、会社に依存せず自分の力で生きていけるエンジニアになる方法などについて興味があります。
こういった方法や考え方、自分が試したことなどをブログを通じて発信します。

仕事は主にソフトウェアテストやテスト自動化。
趣味は浦和レッズと読書と技術書を買って積むこと。

技術評論社から本を出すのが夢

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします