HexoとGitHubを使用して個人のブログを作成する方法

# HexoとGitHubを使用して個人のブログを作成する方法

この文章では、`Hexo`と`GitHub Pages`を使用して個人ブログを構築する方法について詳しく説明します。あなたは美しいながらも無料の個人ブログを手に入れ、構築、執筆、展開の全プロセスに精通し、いくつかの便利なツールも活用できるようになります。

## 事前の準備

構築を始める前に、以下のいくつかのものを準備する必要があります：
- `Node.js` のローカルインストール
- `Git` のローカルインストール
- `GitHub` アカウント
- `GitHub` リポジトリの作成

### Node.js のインストール

Macの場合、Homebrewを使用して`Node.js`をインストールし、次にターミナルで以下のコマンドを入力して正しくインストールされたか確認できます。

``` bash
brew install node
```
もしくは、

``` bash
node -v
npm -v
```

このコマンドは`Node.js`のバージョンまたはnpm（Node Package Manager）のバージョンを表示します。正常にインストールされていれば、バージョン番号が表示されます。

![截屏2023-06-24 19.36.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3306294/e5961cc0-c647-e30e-d55c-c53668ecd8ee.png)


### Git のインストール

Homebrewを使用して`Git`をインストールすることもできます。以下のコマンドを入力して`Git`が正しくインストールされたかどうかを確認し、その後、ユーザー名とメールアドレスを設定します。
``` bash
brew install git
```

``` bash
git --version
```

このコマンドはGitのバージョンを表示します。正しくインストールされていれば、バージョン番号が表示されます。

![截屏2023-06-24 19.44.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3306294/b385e8a6-8c93-65c3-9057-cd44f1c8b581.png)

ユーザー名の設定とメールアドレスの設定には以下のコマンドを使用します：

``` bash
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
```

"Your Name"と"your.email@example.com"の部分を自分の名前とメールアドレスに置き換えてください。

### GitHub アカウント

最初に、GitHubアカウントを登録する必要があります。<a href="https://github.com/">ここをクリックして</a>、ユーザー名とパスワードを入力し、確認が完了したら、GitHubアカウントを作成できます。

アカウントを作成した後、次に、ローカルの`SSHキー`をGitHubに追加する必要があります。これにより、後でローカルのコードをGitHubにプッシュする権限が与えられます。

最初に、ローカルでRSA鍵のペアを生成します。

``` bash
ssh-keygen -t rsa -b 4096 -C "your.email@example.com""
```

それでは、デフォルトのオプションを使用して、Enterキーを3回押してください。

その後、先ほど生成した鍵を見つけます。Macユーザーの場合、`~/.ssh`ディレクトリに鍵が保存されています。`id_rsa.pub`ファイルの内容をコピーし、ここの<a href="https://github.com/settings/keys">GitHubの設定</a>に新しいSSHキーを追加してください。

![截屏2023-06-24 19.41.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3306294/b1fd5f7d-0450-849f-648c-7168ae90f33b.png)

![截屏2023-06-24 19.41.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3306294/fa3d9930-fab4-ee84-2b4b-0cf0227ee417.png)

### GitHub リポジトリの作成

<a href="https://github.com/new">こちら</a>をクリックして、新しいリポジトリを作成してください。

![截屏2023-06-24 19.42.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3306294/21b2e9a0-ffdc-9b40-94ff-ed8e2e4acbaf.png)

リポジトリ名は、"blog"や"my-blog"のように識別しやすい名前を選ぶと良いです。リポジトリの説明には、このリポジトリが何に使用されるのかを簡単に記述してください。

その後、リポジトリのアドレスをメモしておいてください。アドレスは、画像中の矢印で示されている、"git"で始まるアドレスです。後で使用することになります。

リポジトリの作成が完了したら、準備作業は基本的に完了ですので、次のステップに進むことができます。

## Hexo のインストール

`Hexo`は、設定されたテーマスタイルと設定ファイルに基づいて、多彩なウェブページを生成するための静的ウェブサイト生成ツールです。通常、設定ファイルを設定した後は頻繁に変更する必要はありません。私たちの責任は、良い記事を書くことであり、それを書いた後にコマンドを使用してウェブサイトを簡単に生成することができます。また、自由にテーマを切り替えることもできるため、ブログ執筆には非常に便利です。

Hexoのインストールは非常に簡単です。以下のコマンドを入力するだけです：

``` bash
npm install -g hexo-cli
```

以下のコマンドを使用して検証できます：

``` bash
hexo -v
```

このコマンドは、Hexoのバージョンを表示します。正しくインストールされていれば、バージョン番号が表示されて、他の依存パッケージのバージョン情報も含めます。

![截屏2023-06-24 19.46.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3306294/42ddda75-cbea-cc48-dcdc-f5b730885a3b.png)

## Hexoを用いて個人のブログを構築します

Hexoを使用して博客を構築します。

まず、以下のコマンドを使用してHexoの初期設定を行います：

``` bash
hexo init <ディレクトリ名>
```

<ディレクトリ名>は、作成する博客のディレクトリ名を指定します。例えば、"my-blog"などです。このコマンドは、現在のディレクトリに「breeze-blog」という名前の新しいディレクトリを生成し、Hexoの初期化ファイルをその中に書き込みます。

新しく作成されたフォルダのディレクトリは以下のようになります：

``` bash
├── _config.yml 
├── package.json 
├── node_modules 
├── scaffolds 
├── source 
    ├── _drafts 
    └── _posts 
└── themes
```

次に、作成されたディレクトリに移動します：

``` bash
cd <ディレクトリ名>
```

移動したら、依存パッケージをインストールします：

```
npm install
```

依存パッケージのインストールが完了したら、博客を生成します：

```
hexo generate
```

生成が完了したら、以下のコマンドでローカルサーバーを起動します：

```
hexo server
```
デフォルトでは、サービスはポート番号4000を使用します。もし既に使用されている場合は、-pオプションを追加して別のポートを指定することもできます。

これで、Hexoを使用して博客の構築が始まりました。ブラウザで `http://localhost:4000` を開くと、ローカルで作成した博客を確認できます。

![ntX31VrhMTjFozQ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3306294/1db6c606-a41d-23ec-29c5-0412d5af0854.jpeg)

## 部署到 github pages

GitHub Pagesは、GitHubが提供する無料のウェブページホスティングサービスであり、静的なウェブページファイルを格納するために使用することができます。また、`https://ユーザー名.github.io/プロジェクト名/` の形式でアクセスすることができます。

> 注意：GitHub Pagesには2つのタイプがあります。一つはユーザー名.github.ioをプロジェクト名として使用するものであり、もう一つは他の名前を使用するものです。名前が異なるだけのように見えますが、実際には違いがあります。前者の場合、ウェブページの静的ファイルはマスターブランチにのみ保存できるため、ブログのソースファイルも同じリポジトリに保存する場合は、別のブランチに保存する必要があります。また、それに対応するトラビスCIの監視とプッシュのブランチも変更する必要があります。もちろん、別の新しいリポジトリを使用して保存することもできます。後者の場合、この制限はありません。通常、`pages`という名前のブランチが使用されます。Hexoのデフォルトの設定でもこの名前のブランチが使用されます。ここでは、後者の方法を使用します。つまり、ソースファイルと生成された静的ウェブファイルが同じリポジトリに保存されます。ソースファイルはマスターブランチに、静的ファイルは`pagesブランチ`に保存されます。

まず、ローカルのファイルをGitHubにプッシュします。<ディレクトリ名>のディレクトリ内で、Gitリポジトリを初期化し、既存のファイルをGitリポジトリに追加し、pagesブランチを作成します。

``` bash
cd <ディレクトリ名>
git init 
git add . 
git commit -am"init blog" 
```

その後、以下のようにgitコマンドを使用してコードをリポジトリにプッシュします。

```bash
git remote add origin <リポジトリのアドレス>
git branch -M main
git push -u origin main
```

<リポジトリのアドレス>には、先ほど作成したリポジトリのアドレスを指定します。

その後、以下のようにコマンドを使用して新しいローカルブランチ「pages」を作成し、リモートブランチと関連付けます。

```bash
git checkout -b pages
git push -u origin pages
```

これにより、新しいローカルブランチ「pages」が作成され、リモートブランチと関連付けられます。

その後、プロジェクトの「Settings」ページでGitHub Pagesを有効にします。
![截屏2023-06-24 19.54.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3306294/49076e1c-d5ac-1b9b-7a83-d7aba0ce4e39.png)

> 注意　ここでは「master」ブランチを選択しないでください。

その後、Hexoの設定ファイル（`_config.yml`）を編集し、該当箇所を見つけてリポジトリ情報を指定し、rootとurlの情報を変更します。

``` bash
url: https://ユーザー名.github.io/ 
root: /breeze-blog/ 

deploy: 
  type: 'git' 
  repo: git@github.com:ユーザー名./ディレクトリ名
  branch: pages
```

ここでの「repo」のアドレスを、お使いのリポジトリのアドレスに変更してください。

最後、「hexo-deployer-git」をインストールしてください。

``` bash
cd <ディレクトリ名>
npm install hexo-deployer-git --save
```

``` bash
hexo clean && hexo generate
hexo deploy
```
処理が完了すると、私たちのブログファイルはGitHub Pagesに正常にデプロイされます。以下のURLを開いて、ブログの効果を確認できます。

`https://your-username.github.io/project-name/`