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

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

事前の準備

構築を始める前に、以下のいくつかのものを準備する必要があります：

Node.js のローカルインストール
Git のローカルインストール
GitHub アカウント
GitHub リポジトリの作成

Node.js のインストール

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

brew install node

もしくは、

node -v
npm -v

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

Git のインストール

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

brew install git

git --version

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

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

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

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

GitHub アカウント

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

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

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

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

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

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

GitHub リポジトリの作成

こちらをクリックして、新しいリポジトリを作成してください。

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

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

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

Hexo のインストール

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

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

npm install -g hexo-cli

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

hexo -v

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

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

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

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

hexo init <ディレクトリ名>

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

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

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

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

cd <ディレクトリ名>

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

npm install

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

hexo generate

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

hexo server

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

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

部署到 github pages

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

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

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

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

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

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

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

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

git checkout -b pages
git push -u origin pages

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

その後、プロジェクトの「Settings」ページでGitHub Pagesを有効にします。

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

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

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

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

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

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

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

hexo clean && hexo generate
hexo deploy

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

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