Githubのアカウント持ってるだけの自分がHexoを始めるまでのまとめ

環境

• macOS Catalina 10.15.3
• Githubアカウントは持ってるだけでほぼ使っていない

Hexoとは

Hexoは高速でシンプルで強力なブログフレームワーク(Google翻訳曰く)
"ヘクソ"と読むらしい

Node.js製の静的サイトジェネレータということで、色んな記事で簡単にページが作れると書いてあったので採用。

これでMarkdownで作成したものがWebページになり、HTML・CSSを書かなくてよいとのこと。凄い。

準備

• Node.js
• npm

これらをまずインストールします
既にインストールされている方は飛ばしてください

既にインストールされているかの確認

$ node

$ npm

これで何も反応がなければインストールされていません

インストール方法

1. ターミナルを使用する場合

「Hexo」をMacで使う(導入編)

を引用して進めていきます

はじめにHomebrewというmacOS用のパッケージマネージャをインストールします

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

続いてNode.jsをインストールします

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

一度ターミナルを再起動したら完了です
Node.jsをインストールするとnpmもインストールされるそうです

上記の方法以外にもコマンドラインでブログを構築、運用するの記事では

ターミナル

$ git clone https://github.com/creationix/nvm ~/.nvm
$ source ~/.nvm/nvm.sh
$ echo "source ~/.nvm/nvm.sh" >> ~/.bashrc
$ nvm install 10.16.3

という方法がありましたので、できなかった方は試してみてください

2. ダウンロードページを使用する場合

node.jsのダウンロードページにいき,該当するOSのものをインストール

macOS Installerを選択してインストール

バージョンの確認

$ node -v

$ npm -v

これらでバージョンの確認ができます

v12.15.0  //Node.jsのバージョン

6.13.4  //npmのバージョン

このようにバージョンが出てきていたらインストール済です

Hexoを使ってみる

ここでは早速Hexoをインストールし、作業に移っていきます

1. Hexoのインストール

$ npm install -g hexo

2. フォルダの保存場所の指定

$ cd /Users/(フォルダパス)

フォルダパス名を入力するのが面倒くさいので、ターミナルに
cd
の入力をしてからフォルダをドラッグアンドドロップすると、パスが自動で入力され指定できます

3. ページの作成

$ hexo init (ページ名)  //お好きなページ名を

4. localで動かしてみる

$ cd (ページ名)
$ hexo server  //hexo s でもショートカット扱いで動く
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

ここでブラウザから「 http://localhost:4000 」を開くと

のページが出てくると思います

ctrl + c で止めましょう。

ページの仕様は色々と変えることができますが、先にGithubで使えるようにしていきます

Githubで使ってみる

Github側のリポジトリの準備などを行っていきます

1. リポジトリの作成

Githubにサインインして、
New repository をクリック

Repository name に自分の「username.github.io」を
入力し、リポジトリを作成

Create repository でリポジトリが完成します！

2. レポジトリのSSHアドレスのコピー

ここで右上のアイコンマークをクリックし
Your repositories から作成したリポジトリのページを選択

(username).github.io　となっているはずです

開くとこのようなページになっています
//順番に進めていたらリポジトリの中身は空かReadMeが入ってる

ここでClone or downloadから
Use SSHと青文字になっているものをクリックし、SSHのアドレスをコピー

画像ではUse SSHをクリックした状態のもので、Use HTTPSになってます

Githubにアップロード

Webページの設定とアップロードを行っていきます

Finderから先ほど作成したフォルダの_config.ymlを開きます

Siteの

• title
• author
• language

などを変えておきましょう

Hexoを使って自分独自の技術ブログを構築する

でYAMLファイルの説明が詳しく載っているので、編集したい方は是非

ここでURLを

url: https://username.github.io

と自身のGithubのusernameに変更します

また、_config.ymlのDeploymentも

deploy:
   type: git
   repo: [email protected]:username/username.github.io.git
   branch: master

と変更します

ここでrepoには先ほどGithubでコピーしておいたSSHアドレスを入れます

Webページ公開

GithubにアップロードしたWebページの公開を行っていきます

$ hexo deploy -g

ここでエラーが出た場合は

$ npm install hexo-deployer-git --save

デプロイツールのインストールを行います

エラーが出なくなったら(username).github.ioを開いてみましょう！

公開できました！

あとはYAMLを色々といじることで自分だけのWebページが作りあげられそうです

やらかしポイント

git? Githubとは違うの? という状態から作成し始めたが故の反省点

こんなエラーが出た方向け

• WebページにCSSが反映されない
• ターミナルにてGithub関連で怒られる
• GithubにWebページが公開できない

SSHの公開鍵をGithubに登録していなかった

Webページ公開のため

$ hexo deploy -g

としたら

$ FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html

やら

$ Warning: Permanently added the RSA host key for IP address to the list of known hosts.
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

とすっごく怒られ、リモートリポジトリにアクセスできていないことがわかった
この状態で(username).github.ioを開くとCSSが当たっていない寂しいWebページに。。。

ググってみると、どうやら「Githubに公開鍵を登録していない」ということが判明

SSHの公開鍵を作成しGithubに登録する手順

を引用し進めてみると、

1. 公開鍵の有無の確認

$ ls ~/.ssh

とした時に、

id_rsa      id_rsa.pub

のファイルが存在していたら、既に公開鍵は作成済となっています。

known_hosts

と出てしまった方は、私と同じように公開鍵をまだ作成していないので進めていきます

2. 秘密鍵・公開鍵の作成

$ ssh-keygen -t rsa -C "[email protected]"

で、"[email protected]"には自分自身のメールアドレスを入力します。
すると、

Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa): # ファイル名
Enter passphrase (empty for no passphrase): # パスフレーズ
Enter same passphrase again: # パスフレーズの確認
Your identification has been saved in /root/.ssh/id_rsa.
Your public key has been saved in /root/.ssh/id_rsa.pub.
The key fingerprint is:

のような感じに3つの実行を求められますが、全てEnterで進めていって大丈夫です
ここで再度、

$ ls ~/.ssh

とするとid_rsa , id_rsa.pubが出てくると思います

3. 公開鍵をGithubへ登録

はじめに作成した公開鍵をターミナルからコピーしていきます

$ pbcopy < ~/.ssh/id_rsa.pub

必ずid_rsa.pubと入力しましょう。こっちが公開鍵になります。 //.pubはPublicかな？

次に、コピーした公開鍵をGithubに登録します
GithubページからSettingにいきSSH and GPG keysページを開きます

開いたページで右上のNew SSH keyから

• Title(任意のタイトル名、PCの種類などを示すと良い)
• Key(先ほどコピーしたものを貼り付け)

をそれぞれ入力し、Add Keyをクリックして完成

これでやっとエラーから開放されました。。。

参考ページはGithubを使いこなしている方向けだったため、
SSHの公開鍵登録の手順は踏んでおらず、随分と時間がかかってしまいました。

何事もまずは基礎からしっかりやっておこうと。

参考サイト

Githubを全然使っていなかったがためにスラスラ進めなかったけど、大変お世話になったサイト
末筆ながら感謝の意を表します。

Githubでブログを公開する
Node.js製の静的サイトジェネレータ「Hexo」で無料ブログ開発 vol.1
Hexoを使って自分独自の技術ブログを構築する
Hexoでローカルに静的なブログを作ってみて基本構成を把握する
SSHの公開鍵を作成しGithubに登録する手順