参考資料:
GitHub Pagesを利用したブログ構築経験談とトラブルシューティング
HexoとGitHub連携によるパーソナルブログ構築(基礎編)
Hexoとは
準備作業:
お使いのPCにgit, npm, nodeがインストール済みであること
上記3つが未インストールの場合は、適宜インストールしてください~
GitHubリポジトリの作成:
1.GitHubでアカウントとリポジトリを作成します。リポジトリ名は「ユーザー名.github.io」の形式でなければなりません。また、Initialize this repository with a READMEにチェックを入れる必要があります
2.リポジトリ内のSettingsメニューに移動し、ページ下部にあるGitHub Pagesまでスクロールすると、URLが表示されます。このURLにアクセスすると、プロジェクトがインターネット上にデプロイされ、外部からアクセスできることが確認できます。
Hexo関連操作
1.Hexoのインストール
$ npm install -g hexo-cli
インストール後、hexo -vコマンドを実行して正常にインストールされたか確認できます。
2.Hexoの初期化
$ hexo init ブログプロジェクト名
3.必要なプラグインのインストール
$ npm install
4.Hexoの初回実行
$ hexo generate
5.ローカルサーバーの起動
$ hexo server
この状態で http://localhost:4000/ にアクセスすると、ブログが表示されます
HexoとGitHub Pagesの連携
1.Gitのユーザー名とメールアドレスの設定(初回の場合)
ブログプロジェクトフォルダ(例:myblog)で右クリックし、Git Bash Hereを選択し、以下のコマンドを実行します
$ git config --global user.name "あなたのGitHubユーザー名"
$ git config --global user.email "あなたのGitHubメールアドレス"
2.SSHキーの生成:ssh-keygen -t rsa -C "あなたのメールアドレス" を入力し、3回エンターを押します。これによりid_rsaとid_rsa.pubの2つのファイルが生成されます
3.ssh-agentへのキー追加
$ eval "$(ssh-agent -s)"
4.生成したSSHキーをssh-agentに追加
$ ssh-add ~/.ssh/id_rsa
5. GitHubにログインし、プロフィール画像下のsettingsからSSHキーを追加します
6.New SSHキーを作成し、id_rsa.pubファイルの内容を貼り付けます
7.SSH接続のテスト
$ ssh -T git@github.com
「Hi」の後にあなたのGitHubユーザー名が表示されれば、接続は成功です
8.Deployment設定の変更:ブログプロジェクトフォルダ内の_config.ymlファイルを開き、末尾のrepo値を修正します
リポジトリの値はGitHubリポジトリのSSHアドレスに対応します
9.拡張機能のインストール:npm install hexo-deployer-git --save
10.新しい記事を作成
hexo new post "記事タイトル"
11.source > _postsディレクトリに新しい記事ファイルが作成されます
12.エディタで記事を編集後、以下のコマンドで生成とデプロイを実行します:hexo deploy -generate
13.デプロイ成功後、https://ユーザー名.github.io にアクセスすると、公開された記事が確認できます。