tanaka's Programming Memo

プログラミングについてのメモ。

HexoのインストールとGitHub Pageへデプロイ

Ubuntu Hexo

GitHubで公開しているアプリなど用のWebページを、Hexoで作成する手順です。Webページとアプリでリポジトリを共有できるように、Hexoは gh-pages ブランチにデプロイします。



前提

  • VirtualBox にインストールされている Ubuntu で作業する前提です。
  • VitualBox と Ubuntu はインストール済みとします。



Ubuntuの起動

まずは、 VirtualBox の Ubuntu を起動します。

  • VirtualBoxを起動
  • Ubuntuのプロジェクトを選択して、[起動]を押す

以上で、起動するまで待ちます。

画面サイズが大きくて不便な場合は、以下を先にやっておきます。

VirtualBoxのUbuntuの画面サイズを調整する - tanaka's Programming Memo


nodeのインストール

  • Ubuntu の画面左上の[コンピュータを検索]アイコンをクリック
  • [te]ぐらいまで入力すると[端末]が見つかるので、クリック

以下を参考に、nodeの最新版を Ubuntu にインストールします。
Ubuntuに最新のNode.jsを難なくインストールする - Qiita

apt-getなど、処理が開始するまで数分かかることがあるので、コマンドを入力して、エラーが表示されていなければ、動きがあるまで焦らず待ってください。

最後、以下で不要なパッケージを削除します。

sudo apt autoremove

グローバル環境を以下で更新しておきます。

sudo npm update -g

以上ができたら、あらためて node -v と npm -v を実行して、バージョンが表示されることを確認して完了です。


Hexoのインストール

以下を参考に、インストールします。
Hexo

sudo npm install hexo-cli -g



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
  • Firefoxに戻して、[Key]欄に貼り付ける
  • 左下の [Add SSH key] ボタンを押す

以上で完了です。ターミナルで以下を実行して、 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文字列のコピーへ進みます。

  • Ubuntu の Firefox で GitHub を開いて、ログイン
  • 右上の[+]アイコンをクリックして、[New repository]を選択してリポジトリーを作成
  • Repository nameに「hexo-test」などを入力
  • [Initialize this repository with a README]にチェックを入れる
  • あとはそのままで[Create repository]を押す

リポジトリーの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
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 でデプロイすればページが更新されます。


参考URL