GitHubで公開しているアプリなど用のWebページを、Hexoで作成する手順です。Webページとアプリでリポジトリを共有できるように、Hexoは gh-pages ブランチにデプロイします。
- 前提
- Ubuntuの起動
- nodeのインストール
- Hexoのインストール
- Gitのインストール
- SSHでGitHubに接続できるようにする
- ブログを作成する
- GitHub Pagesへの導入
- まとめ
- 参考URL
Ubuntuの起動
まずは、 VirtualBox の Ubuntu を起動します。
- VirtualBoxを起動
- Ubuntuのプロジェクトを選択して、[起動]を押す
以上で、起動するまで待ちます。
画面サイズが大きくて不便な場合は、以下を先にやっておきます。
nodeのインストール
- Ubuntu の画面左上の[コンピュータを検索]アイコンをクリック
- [te]ぐらいまで入力すると[端末]が見つかるので、クリック
以下を参考に、nodeの最新版を Ubuntu にインストールします。
Ubuntuに最新のNode.jsを難なくインストールする - Qiita
apt-getなど、処理が開始するまで数分かかることがあるので、コマンドを入力して、エラーが表示されていなければ、動きがあるまで焦らず待ってください。
最後、以下で不要なパッケージを削除します。
sudo apt autoremove
グローバル環境を以下で更新しておきます。
sudo npm update -g
以上ができたら、あらためて node -v と npm -v を実行して、バージョンが表示されることを確認して完了です。
Gitのインストール
Gitが必要なので、以下でインストールします。
sudo apt-get install git-core
インストールが完了したら、 Git にデフォルトのメールアドレスと名前の設定をしますので、以下のように端末で実行します。以下の例の「メールアドレス」の部分に連絡用のメールアドレス、「EntryName」のところにGitにコミットするときに表示する名前に差し替えます。
git config --global user.email "メールアドレス" git config --global user.name "EntryName"
SSHでGitHubに接続できるようにする
安全な通信をするために、秘密鍵と公開鍵を作成します。ユーザーディレクトリ内の .ssh フォルダー内に作成しますが、最初はフォルダーが無いので、ターミナルから以下で作成しておきます。
mkdir ~/.ssh
途中で必要になるファイル内容をクリップボードにコピーする xsel というプログラムを以下でインストールしておきます。
sudo apt-get install xsel
以下を参考に、SSHでGitHubに接続できるように設定してください。そのままで成功しない部分があるので、下の注意点も確認してください。
gitHubでssh接続する手順~公開鍵・秘密鍵の生成から~ - Qiita
- パスフレーズなどは、説明通りで省略してかまわない
- キーの生成が完了したら、Ubuntu の Firefox を起動して、指定のURLを入力して、GitHubを開いて、ログイン
- 画面右上のボタンの表示は、[Add SSH key]から[New SSH key]に変更されているので、[New SSH key]を押す
- 公開鍵名は[dat-ubuntu]など
- ターミナルで、以下を実行して、公開鍵の文字列をクリップボードにコピー
cat ./id_rsa.pub | xsel --clipboard --input
以上で完了です。ターミナルで以下を実行して、 GitHub への接続を試みます。
ssh -T git@github.com
最初の一回目は警告が表示されるので、[yes]を入力して[Enter]キーを押して確認します。
「Hi <GitHubのアカウント名>」が表示されれば成功です。これ以降は、SSHで自分のアカウントに接続ができるようになります。
ブログを作成する
公式ページの Get Started に沿って、簡単なブログを作成してみます。
- 以下で、ブログ用のフォルダーを作成して、その中に移動する
cd ~ mkdir blogs cd blogs
- 以下で、ブログを作成して、その中に入る
hexo init test-blog cd test-blog
- 初回は、必要なパッケージのインストールが必要なので、以下を実行
npm install npm install hexo-deployer-git --save
- ブログサーバーを起動する。WARNINGが出ても気にしなくてよい
hexo server
以上で、hexoのブログサーバーが起動します。Ubuntu の Firefox で、 http://localhost:4000 を開いて、ブログページを確認してください。
GitHub Pagesへの導入
GitHubのアップロード先のリポジトリーを準備
アップロード用のリポジトリーがなければ以下の手順で作成します。すでにある場合は、そのページを Ubuntu の Firefox で開いてリポジトリーのSSH文字列のコピーへ進みます。
リポジトリーのSSH文字列のコピー
アップロード先の設定のために、以下の操作でこのリポジトリーを指定する文字列をコピーしておきます。
- UbuntuのFirefox上で、作成したリポジトリーページの右にある[Clone or download]ボタンを押す
- 右に表示される[Use SSH]のリンクをクリック
- [git@github.com:・・・]と表示されるテキストボックスの右のコピーアイコンをクリック
何も起きませんが、これでコピーが完了しているので、続けて以下の作業に進んでください。
ブログの設定
ブログの情報や、URL、GitHub Pagesに Hexo で生成したブログをアップロードするための情報など、各種情報は、_config.yml というファイルに設定します。
ブログの基本設定
まずはブログの基本情報を編集します。
- Ubuntu の左上の[コンピューターを検索]アイコンをクリック
- [te]が入力されていると、[テキストエディター]も検索されるので、それをクリックして起動
- [開く]を押して、[他のドキュメント]>[blogs]>[test-blog]>[_config.yml]を選択して開く
- 以下の設定を自分の環境の合わせて変更する
- title ブログのタイトル
- subtitle ブログにサブタイトルがあれば入力。省略可
- description ブログの説明。省略可
- author ブログの著者名。自分の名前やハンドル名に変更
- language 日本語の場合、 ja としておく
- timezone 時差の設定。日本だと Asia/Tokyo にする
以下、例です。
title: Hexoの練習 subtitle: description: author: たなかゆう language: ja timezone: Asia/Tokyo
公開先URLの設定
公開先のURLを設定します。
- [# URL]から始まる行(16行目付近)を探して、その下の url と root を、公開先の URL とパスに変更。例えば、 tanakaedu という GitHub アカウントで、 hexo-test というリポジトリーで公開する場合は以下の通り
url: https://tanakaedu.github.io/hexo-test root: /hexo-test/
デプロイ設定
続けて、以下を参考に GitHub への公開設定をします。
Deployment | Hexo
- [# Deployment]という行を探して(一番下)、GitHubの情報を入力
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: (ここに貼り付けをして、GitHubでコピーした文字列を張り付ける。例) git@github.com:アカウント/リポジトリー名.git) branch: gh-pages
- [Ctrl]+[S]キーで保存
- テキストエディターは閉じてよい
- 端末を新しく開いて、以下を実行
cd ~/blogs/test-blog hexo deploy -g
以上で、「INFO Deploy done: git」と表示されれば、アップロード完了です。GitHubにアップロードされましたので、確認は Ubuntu でも、ホストPCでもどちらでも可能です。
https://<アカウント名>.github.io/hexo-test
にアクセスします。アカウント名のところは、自分のアカウント名に差し替えてください。たとえば以下のようなURLになります。
https://tanakaedu.github.io/hexo-test
Hexo のインストール後に localhost:4000 で確認したのと同じページが表示されていれば成功です。
まとめ
以上で設定完了です。これ以降は、 Hexo の使い方に従ってデザインを導入して、記事を作成したら hexo deploy -g でデプロイすればページが更新されます。
