Markdownでそれっぽいウェブサイトを作成し、無料公開する方法を紹介します！

# この記事の概要
筆者が作成した**公式サイト**について、その構築方法を紹介したいと思います！

https://www.hottydb.com/

↑こちらのサイトです。

前回の記事でこのソフトウェアの中身について詳しく説明しているので、ソフトウェアの中身に興味がある方はそちらも是非読んでみてください！！

https://qiita.com/toru1055/items/0fe400989373823e9c78

今回はその**公式サイト**に焦点を当てて紹介していきたいと思います。


# 利用したツール
* [Hugo](https://gohugo.io/): サイト全体の作成
* [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/): サイトの公開
* [Free Logo Maker](https://hatchful.shopify.com/): ロゴの作成

# それっぽさに重要なポイント
* それっぽいHugoテーマを選ぶ
* それっぽいロゴを作る
* それっぽいコンテンツをMarkdownで作る


# 手順

## 1. GitLab上にProject作成
まず最初に、公式サイトのURLを決めて、GitLab上にプロジェクトを作成しましょう。

### 1-1. サイトのURLを決めましょう
URLを `https://hogehoge.gitlab.io/docs` としたい場合、
* Gitlabのグループ名: `hogehoge`
* Gitlabのプロジェクト名（サイト名）: `docs`


となります（次で使います）。

### 1-2. GitLab上にGroupとProjectを作成
GroupやProjectは非公開でも大丈夫です。
ウェブサイトのみ公開することができます。

1. まず、[GitLabのGroupを作成](https://gitlab.com/groups/new#create-group-pane)しましょう。
サイトのURLが `hogehoge.gitlab.io/docs` にしたい場合、`hogehoge`に当たる部分がGroup名になります。

2. Groupを作成したら次に、そのGroupの下に空のプロジェクト（Blank Project）を作成しましょう。
サイトのURLが `hogehoge.gitlab.io/docs` にしたい場合、`docs`に当たる部分がProject名になります。


## 2. ローカル編集環境の構築
続いて、ローカル端末にHugoの編集環境を整えます。

### 2-0. 想定の環境
```
- MacOS
- Homebrewが入っている
```
これ以外の環境の場合は[こちら](https://gohugo.io/getting-started/installing)を参考にHugoをインストールしてください。

### 2-1. Hugoをインストール
```shell
brew install hugo
```

### 2-2. サイト作成
Gitlabのプロジェクト名（サイト名）を`docs`と決めた場合
```shell
hugo new site docs
```

作成されたサイトのディレクトリに移動して、`git init`をしておきましょう。
```shell
cd docs
git init
```

### 2-3. Hugoテーマを選択
**（それっぽいポイント！）**
それっぽい公式サイトを作成するにあたって最も重要なポイントです！

https://themes.gohugo.io/

上記テーマコレクションの中から適したテーマを選びましょう。
ただし、テーマは後からでも変更できるので、そこまで気負わず選びましょう。

ここでは、HottyDBと同じように[Book](https://themes.gohugo.io/themes/hugo-book/)というテーマを選んだ場合の手順を記載します。

テーマの詳細ページに `Download` というGithubページへのリンクがあると思いますが、そのリンクをコピーしておいてください。

[Book](https://themes.gohugo.io/themes/hugo-book/)テーマの場合、`https://github.com/alex-shpak/hugo-book`がそのURLになるので、下記のようにsubmoduleとして追加します。

```shell
git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book
```

テーマの追加はいくつでもできますが、実際に使うテーマは設定ファイルで設定する必要があります。

`config.toml` をエディタで開き、以下の行を追加しましょう。

```
theme = "hugo-book"
```

また、先ほど決めたサイトのURLも`config.toml`に設定しておきましょう。
```
baseURL = 'https://hogehoge.gitlab.io/docs/'
```


### 2-4. ページを追加
続いてサイトにページを追加する手順を解説します。
以下のような構成でページを作成するとします。

* サイトTOPページ(indexページ）
* News
  * Releases
* Other
  * OtherのTOPページ（indexページ）
  * Terms

この場合、下記のようなコマンドでページを作成します。
```
hugo new _index.md
hugo new news/releases.md
hugo new other/_index.md
hugo new other/terms.md
```

`contents`ディレクトリ以下にMarkdownのファイルが作成されます。
ここで作成された `.md` のファイルをMarkdownで編集すれば、ページが作成されます。
ただし、ファイルのヘッダ部分に
```
draft: true
```
となっていると下書き状態となるため、 `false`に変更するようにしてください。
あと、中身が何もないとファイルが認識されないので、ヘッダの下に何かしらの文字列を各ファイル記入してください。

### 2-5. ローカル環境での確認
hugo serverを起動します。
```
hugo server
```
そうすると、
> Web Server is available at http://localhost:1313/docs/ (bind address 127.0.0.1)

のように表示されると思うので、この表示されたlocalhostのURLにアクセスして内容を確認してみましょう。



## 3. Gitlab Pagesによるサイトの公開
次に、一旦ここまでの内容を公開する手順を説明します。

### 3-1. GitLabのCI/CD設定ファイルを作成
GitLabのCI/CD設定として `.gitlab-ci.yml` というファイルを作成し、以下のコードをコピペしてください。
このファイルをProjectのルートディレクトリに置いておくと、MasterへPushした際に自動的にデプロイが走ります。
```
image: registry.gitlab.com/pages/hugo/hugo_extended:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  rules:
  - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
```

### 3-2. コードをGitLabにアップロード(push)
次に、これまで作成したHugoサイトのコードをGitLabにアップロードします。
`https://gitlab.com/YourGroupName/your-hugo-site.git`の部分は、最初に作成したGitLabプロジェクトのURLになるので適宜読み替えてください
```
# add /public directory to our .gitignore file
echo "/public" >> .gitignore

# commit and push code to master branch
git add .
git commit -m "Initial commit"
git remote add origin https://gitlab.com/YourGroupName/your-hugo-site.git ##ここのURLは変更する！！
git push -u origin master
```

> [本家の解説](https://gohugo.io/hosting-and-deployment/hosting-on-gitlab/)も合わせて確認してください。

### 3-3. PJメンバー公開まで待つ
- CI/CDの進捗状況を確認するには
  - `https://gitlab.com/<YourGroupName>/<your-hugo-site>/pipelines`
- 公開されたサイトを確認するには
  - `https://<YourGroupName>.gitlab.io/<your-hugo-site>/`

を、確認してみてください。

この時点では、GitLabプロジェクトのメンバーだけが見える状態です。

### 3-4. 一般公開する
1. `https://gitlab.com/<YourGroupName>/<your-hugo-site>/edit`にアクセス
1. `Visibility, project features, permissions`をExpandしましょう
1. `Pages`の項目を`Everyone`に変更しましょう

これで一般公開されました！　非公開にしたい場合はこちらを適宜修正しましょう。

## 4. それっぽいロゴを作成する
**（それっぽいポイント！）**
それっぽい公式サイトを作成するのに重要なポイントです！

### 4-1. ロゴ作成
[Free Logo Maker](https://hatchful.shopify.com/)にアクセスし、ロゴを作成し、ダウンロードしておきます。
（ユーザー登録する必要があります。画像はメールで届きます。）

### 4-2. ロゴを公式サイトに設置する
1. Hugoの`static` ディレクトリに画像を配置する（画像ファイルが `facebook_cover_photo_2.png` だとします）
2. `content/_index.md` を修正し、ヘッダのすぐ下に下記のように画像表示用のコードを挿入します
```
{{< figure src="facebook_cover_photo_2.png" width="100%" >}}
```

## 5. それっぽいコンテンツをMarkdownで作成する
それっぽいコンテンツを書きましょう！
文字と画像を適度に織り交ぜるのがお勧めです。

## 6. テーマ独自の設定など
テーマによっては独自の設定項目があったりするので、その辺りも活用しながら素敵なサイトにしてみてください！
詳しくはテーマの詳細ページなどを参照してください！

HottyDBの公式サイトでは、Bookテーマを使っており、下記の設定を`config.toml`に追記しています。
```
[params]
BookSection = '*'
```
> 左枠のメニューを表示する設定です

Titleも変更して、最終的な　`config.toml`は下記のようになりました。
```
baseURL = 'https://hogehoge.gitlab.io/docs/'

languageCode = 'en-us'
title = 'デモデス'
theme = "hugo-book"


[params]
BookSection = '*'
```

## 7. GitLabに変更をPushする
以降はGitでコミットして、プッシュするだけで自動的に公開サイトに反映されます。

この手順で作成したサイトが下記になります。

https://hogehoge6.gitlab.io/docs/

---

以上で手順は終了です！

ぜひ試してみてください！