GitHubとHexoを活用したパーソナルブログ構築ガイド

参考資料:

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 にアクセスすると、公開された記事が確認できます。

タグ: GitHub Pages Hexo ブログ構築

6月24日 16:52 投稿