ゼロからHugoでWebページをつくって，GitHub Pagesで公開するまで

## この記事について
「Hugoをインストール　→　テーマを反映 → サイトの内容を編集 → GitHub Pagesを利用して，公開するまでの手順」について，自分なりに書いてみました．
できる限り間違いのないように心掛けてはいますが，参考程度でお願いします．

ちなみに，自分の作成したWebページは[こんな感じ](https://2gken1029.github.io/)になってるので，良かったら見てやってください．
## 本環境
- Macbook Air
- Apple M1
- macOS Monterey（ver. 12.3.1）
- Homebrew 3.4.5
- go1.18

## Hugoのインストール
1. hugoのインストール
```$ brew install hugo```
1. hugoがインストールされたか確認
```$ hugo -help```


### HugoによるWebサイトの雛型作成および簡単な動作確認

1. 任意の場所で，以下のコマンドを入力する
    ```$ hugo new site <作成する雛型の名前>```
     今回は，```my-site```という名前で作成する．
    ```
   ~ $ hugo new site my-site
   Congratulations! Your new Hugo site is created in /Users/<ユーザ名>/my-site.

   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.
   ```
1. ローカルサーバでWebサイトの表示確認
   作成した作業用ディレクトリ（雛型）に移動し，```$ hugo server```を入力．
```
  ~ $ cd my-site
  ~/my-site $ hugo server
                     | EN  
  -------------------+-----
    Pages            |  3  
    Paginator pages  |  0  
    Non-page files   |  0  
    Static files     |  0  
    Processed images |  0  
    Aliases          |  0  
    Sitemaps         |  1  
    Cleaned          |  0  

   Built in 4 ms
   Watching for changes in /Users/<ユーザ名>/my- 
   site/{archetypes,content,data,layouts,static}
   Watching for config changes in /Users/<ユーザ名>/my-site/config.toml
   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
```
[http://localhost:1313/](http://localhost:1313/)をWebブラウザで確認すると，真っ白なWebページが表示されるはず．
真っ白な理由はWebページのレイアウトを何も記述していないため．

## Hugoのテーマをインストールして，ローカルの作業環境に反映させる
1. Hugoの公式ページに[テーマ一覧](https://themes.gohugo.io/)があるので，そこから好きなテーマを選ぶ．今回は[Academic](https://themes.gohugo.io/themes/hugo-academic/)を選択
**※選択するテーマによっては，**```$ hugo new site <作成する雛型の名前>```**の後ろに，オプション```-f=yaml```をつける必要がある．[(Hugo設定ファイルについて)](https://gohugo.io/getting-started/configuration/)**

1. テーマのダウンロードとローカルの作業環境に反映
それぞれのテーマのWebページに記載されている通りの手順に従えば，自身のローカル作業環境に反映される．
以下に，一例を紹介しておく．
##### コマンドラインによる方法
先ほど作成した雛型のディレクトリ内に，themesフォルダが存在していることが確認できる．このthemesフォルダ下に，使いたいテーマのデータを保存する．
```
~/my-site $ ls
archetypes	config.toml	content		data		layouts		static		themes
~/my-site $ cd themes
~/my-site/themes $ git clone https://github.com/sourcethemes/academic-kickstart.git
```
保存がうまくいくと，次のようなディレクトリとその中身が確認できる．
```   
/themes $ ls
academic-kickstart
/themes $ ls academic-kickstart
LICENSE.md		    config			go.mod			    static
README.md		    content			images			    theme.toml
academic.Rproj		data			netlify.toml		update_wowchemy.sh
assets			    exampleSite		scripts			    view.sh
```
このacademic-kickstart下にあるexampleSiteの内容を，作成した雛型直下（今回はmy-site）にコピーする．
ディレクトリや名前が重複するファイルを含むため，オプションコマンド```-r```と```-f```を指定する．
```
/themes $ cp -r -f academic-kickstart/exampleSite/* ../
```
コピーを完了させて，雛型直下（今回はmy-site）に移り，コマンド```$ hugo server```を再度実行して，[http://localhost:1313/](http://localhost:1313/)を確認すると，選択したテーマが反映されていることが確認できるはず．
![スクリーンショット 2022-04-10 16.19.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2430126/e34788bb-fc26-80d5-d731-c5718225d9cf.png)
これで，HugoによるWebサイトの雛型作成およびテーマの反映が完了．

## サイトの内容を編集する
サイトの内容を書き換えるのは，基本的には```my-site/content```下にある内容を書き換えていく．今回の場合は，```authors```と```home```下にある内容を見ながら書き換えていくことになると思う．
```
/my-site % cd ./content 
/my-site/content % tree
.
├── _index.md
├── admin
│   └── index.md
├── authors
│   ├── admin
│   │   ├── _index.md
│   │   └── avatar.jpg
│   └── 吳恩達
│       ├── _index.md
│       └── avatar.jpg
├── courses
│   ├── _index.md
│   └── example
│       ├── _index.md
│       ├── featured.jpg
│       ├── python.md
│       ├── stats.md
│       └── visualization.md
├── event
│   ├── _index.md
│   └── example
│       ├── featured.jpg
│       └── index.md
├── home
│   ├── about.md
│   ├── accomplishments.md
│   ├── contact.md
│   ├── demo.md
│   ├── experience.md
│   ├── featured.md
│   ├── gallery.md
│   ├── hero-academic.png
│   ├── hero.md
│   ├── index.md
│   ├── posts.md
│   ├── projects.md
│   ├── publications.md
│   ├── skills.md
│   ├── tags.md
│   └── talks.md
├── post
│   ├── _index.md
│   ├── getting-started
│   │   ├── featured.jpg
│   │   └── index.md
│   ├── jupyter
│   │   ├── featured.png
│   │   ├── index.ipynb
│   │   ├── index.md
│   │   └── index_1_0.png
│   └── writing-technical-content
│       ├── featured.jpg
│       ├── index.md
│       └── line-chart.json
├── privacy.md
├── project
│   ├── external-project
│   │   ├── featured.jpg
│   │   └── index.md
│   └── internal-project
│       ├── featured.jpg
│       └── index.md
├── publication
│   ├── _index.md
│   ├── conference-paper
│   │   ├── cite.bib
│   │   ├── featured.jpg
│   │   └── index.md
│   ├── journal-article
│   │   ├── cite.bib
│   │   ├── featured.jpg
│   │   └── index.md
│   └── preprint
│       ├── featured.jpg
│       └── index.md
├── slides
│   └── example
│       └── index.md
└── terms.md
```
書き換えた内容は，ローカルサーバを起動し続けている限り自動的に反映されていく．（反映されない場合は，一度サーバを終了させてから再度起動することで反映されるはず）

## 静的ページの生成
ローカル環境で作成したサイトを静的ページとして生成するには，雛型直下（今回はmy-site）でコマンド```$ hugo```を入力することで得られる．すると，```my-site```下に```pulic```フォルダが生成されているはずである．
```
/my-site $ hugo
/my-site % ls
archetypes	config.toml	go.mod		netlify.toml	static
assets		content		go.sum		public		themes
config		data		layouts		resources
```
この生成された，```public```下にあるファイルを利用したいサーバにアップロードすることで作成したWebページを公開することができる．


## 作成したWebページを公開する
作成したWebページを公開する方法は色々あるが，今回はGitHub Pagesを利用した方法で行う．
GitのインストールやGitHubのアカウントの作成方法などは，ここでは割愛する．

1. 作成したWebページをアップロードするためのレポジトリを作成
自身の[GitHub](https://github.com/)より，新たなレポジトリを作成する．
このときにレポジトリの名前は，```[アカウント名].github.io```にする．
1. 作成したレポジトリをローカル環境にcloneする
   ```
   ~ $ git clone https://github.com/[アカウント名]/[アカウント名].github.io.git
   ```
1. cloneしたレポジトリに，先ほど生成した```public```下にあるファイルを反映させ，pushさせる
   ```
   /my-site $ cp -r public/* ../[アカウント名].github.io
   /my-site $ cd ../[アカウント名].github.io
   /[アカウント名].github.io $ git add .
   /[アカウント名].github.io $ git commit -m "commit"
   /[アカウント名].github.io $ git push origin main
   ```
1. https://[アカウント名].github.io/ にアクセスすると，作成したWebページが見れるようになっているはずである．（反映されるまでに多少の時間はかかるかもしれない）

## 参考文献
- [Hugo 公式サイト](https://gohugo.io/)
- [Academic | Hugo Themes](https://themes.gohugo.io/themes/hugo-academic/)
- [[Hugo]インストールからサーバ起動までやってみた](https://nprog256.net/post/2019/04/hugo-install-and-serve/)
- [MacにHugoを入れて、ローカルでサンプルサイトを立ち上げるまで](https://yoshikiito.net/blog/archives/1976/)
- [【GitHubPages】GitHub.ioで自己紹介ページを作りました](https://qiita.com/ryokosuge/items/f929821ba5ae9ba2c32b)
- [【Hugo】静的Webサイトを作る](https://qiita.com/vicugna-pacos/items/d6b5f5cdbc960324a3dc)
- [github.ioを使ってMySiteを作ろう](https://qiita.com/MokeeeMokeee/items/4b33691b829aaf119bbf)
- [【初心者向け】GitHub Pagesを使ってHPを爆速で公開する](https://qiita.com/stern327/items/1748ec6265aab88648ab)