Git Pages & Hexoで手軽な無料Blogを作る

## 1. はじめに
Git Pagesとhexoという静的ページジェネレーターで、設置型ブログを無料で作ることができます。

### 1) Git Pages & 静的ページジェネレーターを使ったブログのメリット

- サーバーいらず、DBいらず、サーバーサイド開発いらず、それなりにちゃんとした自分のブログを持てる
- お金がかからず、無制限トラフィックで、ウェブページを提供できる
- カスタマイズが自由で、個性のあるブログを作れる(テーマ開発など)
- ブログの記事をファイルで作成するので、コード管理ができる

### 2) Git Pagesとは？
https://pages.github.com

Githubで提供している、無料ウェブページホスティングサービスです。
html, css, jsなどの静的コンテンツのみですが、無料でウェブページをサービスできます。

### 3) Hexoとは？
https://hexo.io

node基盤の「静的ページゼネレーター」の一つです。
サーバーの動的処理なしに、リッチなウェブページやブログなどを生成してくれます。



### 4) 完成イメージ
以下のように、ブログを作り、一つの記事をポストします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/782c5d6b-8397-72a1-b777-fbfd700886fb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/aa3df572-038a-dd31-b71c-89768578affa.png)

では、早速作って見ましょう。

## 2. Blogを作る手順

### 1) Hello World on Git Pages

Git Pages Manual
https://pages.github.com/

#### ① ホスティング用のレポジトリ生成
`{userid}.github.io`の名前でパブリック・レポジトリを生成します。
上記の規則で作成したレポジトリは、自動的にGit Pagesの機能により、ウェブホスティングされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/63a54aee-fe0b-266e-65b2-60d0d0e6c5cc.png)


#### ② index.htmlをプッシュ
index.htmlを作り、`{userid}.github.io`レポジトリにをプッシューします。

```bash
git clone https://github.com/{username}/{username}.github.io.git
cd {username}.github.io
touch index.html
git add index.html
git commit -m "first commit"
echo "Hello World" > index.html
git add index.html
git commit -m "second commit"
git push origin master
```

#### ③ git page build結果確認
Github Actionを見ると、上げたindex.htmlがGit Pagesとしてビルドされていることを確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/dd221d98-7428-b8c5-4191-74e1aa65e6bb.png)


#### ④ 確認
`https://{username}.github.io`にアクセスすると、Hello Worldが確認できます。
これで、ウェブページのホスティングの準備ができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/23a0fd08-430a-ffdd-c73f-c73802bb39a0.png)



### 2) hexo 設置 & 設定 (静的ページゼネレーター)

Hexoを使うためには、まずnode&npmのインストールが必要です。
もし、インストールが必要な方は、以下の公式ページをご参考ください。

●　nodejs with npm
https://nodejs.org/ja/

Hexoの公式 docs & Installationはこちらで参考できます。
https://hexo.io/docs/

#### ① インストール
hexoをインストールします。

```
npm install -g hexo-cli
hexo init blog
cd blog
npm install
```

#### ② hexo-deployer-git plugin インストール
One Commandで、githubにデプロイするためのプラグインを予めインストールします。
プラグインの詳細はこちらで確認できます。

https://github.com/hexojs/hexo-deployer-git

```
npm install hexo-deployer-git --save
```

#### ③ _config.yml 設定
基本的なconfig設定を行います。

- url
    - Git PagesのURLを設定します。
- new_post_name
    - Post記事の生成時のファイル名を設定します。ここは必須に変える必要は無いですが、datetimeをつけたほうが管理しやすいと思います。
- Deployment
    - hexo-deployer-gitのpluginをインストールしたので、gitのデプロイ設定ができます。
    - messageは、設定しないと基本メッセージとして、`Site updated: YYYY-MM-DD HH:mm:ss`の形式でコミットメッセージが残ります。

```git
diff --git a/_config.yml b/_config.yml

-url: http://yoursite.com
+url: https://{username}.github.io/

-new_post_name: :title.md # File name of new posts
+new_post_name: :year_:month_:day_:title.md # File name of new posts

 # Deployment
 ## Docs: https://hexo.io/docs/deployment.html
 deploy:
-  type: ''
+  type: git
+  repo: https://github.com/{username}/{username}.github.io
+  branch: master
```

これで、ブログの基本設定は終わりました。

### 3) 記事作成
記事を作成します。

#### ① 記事のソース・マークダウン生成
`hexo new {title}`で、新しい記事が生成できます。 
すると、以下のように新しいファイルが生成されます。

```bash
$ hexo new "first post"
INFO  Created: D:\Develop\_GitPages\blog\source\_posts\2020_07_04_first-post.md
```

#### ② マークダウン・ファイル編集
生成された記事のマークダウンを開き、試しに以下のように変更します。

```markdown
---
title: first post
date: 2020-07-04 18:52:00
tags:
    - hello world
category: 
    - hello world
excerpt: welcome to my blog
---

Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues).

## Quick Start

### Create a new post

\`\`\` bash
$ hexo new "My New Post"
\`\`\`

More info: [Writing](https://hexo.io/docs/writing.html)

### Run server

\`\`\` bash
$ hexo server
\`\`\`

More info: [Server](https://hexo.io/docs/server.html)

### Generate static files

\`\`\` bash
$ hexo generate
\`\`\`

More info: [Generating](https://hexo.io/docs/generating.html)

### Deploy to remote sites

\`\`\` bash
$ hexo deploy
\`\`\`

More info: [Deployment](https://hexo.io/docs/one-command-deployment.html)
```

これで記事作成まで完了しました。

### 4) 確認・デプロイ

#### ① Localでブログ確認
`hexo server`コマンドを使うと、ウェブホスティングで公開する前に、ロケールで予めブログとコンテンツを確認できます。

```
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
```

● localhost:4000
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/782c5d6b-8397-72a1-b777-fbfd700886fb.png)

● localhost:4000/2020/07/04/first-post/#more
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/aa3df572-038a-dd31-b71c-89768578affa.png)


#### ② Deploy to Git Pages
`hexo deploy`コマンドを使うと、設定したGithubレポジトリに自動でプッシューしてくれます。

```
$ hexo deploy
INFO  Start processing
INFO  Files loaded in 101 ms
...
To https://github.com/{username}/{username}.github.io
 + 69bd38f...fa420ac HEAD -> master (forced update)
Branch 'master' set up to track remote branch 'master' from 'https://github.com/{username}/{username}.github.io'.
INFO  Deploy done: git
```

#### ③ gitpagesのURLで確認
Git Pagesとして動作しているレポジトリのMasterブランチにプッシューしたので、Github Actionでビルドが完了していると、`https://{username}.github.io`にアクセスすると、確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/2e12b722-cde4-7144-40f1-5c6a25f52273.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/8bc0b51f-36d8-6359-ad3f-02323391e152.png)

これで、自分のブログが出来上がりました。

### Extra) テーマ変更
Hexoは、いろんなテーマから、いろんなデザインを適用できます。

● Hexo Theme
https://hexo.io/themes/

今回は、`meilidu-hexo`というテーマをダウンロードして、ブログのデザインを変えて見ます。

#### ① テーマインストール
以下のレポジトリを参考し、テーマをインストールします。
https://github.com/HoverBaum/meilidu-hexo

```
git clone https://github.com/HoverBaum/meilidu-hexo.git themes/meilidu
```

#### ② _config.ymlのtheme変更
テーマの設定を変更します。

```git
diff --git a/_config.yml b/_config.yml

-theme: landscape
+theme: meilidu
```

#### ③ deploy & GitPages 確認
`hexo clean`で、既存のベルドされたソースを消し、`hexo deploy`で、新しくでビルド・デプロイします。

Github Actionsで、Git Pagesビルドが完了すると、テーマが適用されたことを確認できます。

```
hexo clean
hexo deploy
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436887/019645ef-3330-b694-adc2-bbdc4adbf128.png)


## 後書き
今回は、Git Pagesとhexoで、簡単なブログを作って見ました。

公開されているテーマをすこしカスタマイズして使うことだけでも、それなりのデザインと機能を備えた設置型ブログを無料で構築＆ホスティングできます。

Wordpressみたいな設置型ブログの機能には及ばずとも、完全に無料で設置型ブログを持つことが可能なのは、それなりに魅力的ではないでしょうか。

次は、Git Pagesと静的ページゼネレーターを利用して、簡単なウェブサービス的なものもチャレンジしてみたいですね。

皆様も、なにかGit Pagesと静的ページゼネレーターの良い活用事例があったら、ぜひ共有して頂けると嬉しいです。