Aoki Hiroki

AOKI HIROKI

console.log('🍙');

Hugoの始め方

Hugoの始め方についての記録

aoki hiroki

2 minute read



Introduction

このサイトはHugoで作成した。 後学のために記録を残す。



Procedure

Hugo Future Imperfect Slimというテーマを用いてHugoサイトを作る。



Install Hugo

$ brew install hugo



To verify your new install:

$ hugo version



Create a New Site

$ cd ~/hugo/ # 左記のパスはただの例です
$ hugo new site your-site-name

💬 your-site-nameという名前のディレクトリができる。



Add a Theme

$ cd your-site-name/themes/
$ git clone https://github.com/pacollins/hugo-future-imperfect-slim.git

💬 この記事では Hugo Future Imperfect Slim というテーマを使いますが、他のテーマを選んだ場合は以降の手順が異なる。選んだテーマの指示に従う。



Copy the ExampleSite

exampleSiteディレクトリの中身を、サイトのルートディレクトリに上書きコピーする。(OSファイルシステムのルートに上書きしないように注意)

$ cp -ir ~/hugo/your-site-name/themes/hugo-future-imperfect-slim/exampleSite/* ~/hugo/your-site-name/ # 何が上書きされるのか確認しながらコピー

overwrite ../config.toml? (y/n [n]) y # 確認プロンプトが出るので、よければ y + Enter を入力



Start the Hugo server

Hugoサーバーを、ドラフトコンテンツも見られるオプションを付けて立ち上げる。

$ cd ~/hugo/your-site-name/
$ hugo server -D # "-D" はドラフトコンテンツを表示するオプション

                   | EN | FR | PL   # このテーマは多言語向けの設定ができる
+------------------+----+----+----+
  Pages            | 26 | 23 | 23  
  Paginator pages  |  2 |  2 |  2  
  Non-page files   |  0 |  0 |  0  
  Static files     | 13 | 13 | 13  
  Processed images |  0 |  0 |  0  
  Aliases          |  7 |  5 |  5  
  Sitemaps         |  2 |  1 |  1  
  Cleaned          |  0 |  0 |  0  

Total in 202 ms
Watching for changes in /Users/user-name/hugo/your-site-name/{content,data,layouts,static,themes} # changes in these directories will be reflected immediately
Watching for config changes in /Users/user-name/hugo/your-site-name/config.toml # changes in this file will be reflected immediately
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop



Open exampleSite in browser

Hugo Future Imperfect SlimexampleSiteはこのような感じ。

Recent posts

Categories

About

profile and works