Hexo + GitHub + Netlify でブログ構築

Netlify ブログ制作
Netlify

タイトルの通りで「Hexo + GitHub + Netlify でブログ構築」をして行きたいと思います。

Hexo でブログを作る

まず初めに Hexo でブログを作ります。

Hexo は、静的サイトジェネレーターツールです。

Markdown(マークダウン) で記述された文章を、静的サイト用の HTML に変換してくれます。

Node.js をインストールする

Hexo を動かすために「Node.js」をPC に入れます。

まず、公式サイトから「node-v12.16.1-x64.msi」をダウンロードします。

Node.js ダウンロード Windows (x64)

ダウンロードした「node-v12.16.1-x64.msi」を実行してインストールします。

Welcome to the Node.js Setup Wizard
End-User License Agreement

インストール先は変更せずに。

Destination Folder

設定は特に変えずに。

Custom Setup

よく分からないオプションは外して。

Tools for Native Modules

レッツ インストール!!

Ready to install Node.js

お疲れさまでした。「Finish」で node.js のインストールは完了です。

Completed the Node.js Setup Wizard

node.js の npm を使って Hexo をインストールする

Hexo のブログ用作業フォルダを作ります。

Hexo 作業用フォルダ

次に 作業用フォルダで コマンドプロンプトを開きます。

一番簡単な方法は、フォルダのアドレスバーに「cmd」と入力してエンターキーを押すと簡単に開けます。

「cmd」と入力してエンターキーを押す

簡単に開けます。

コマンドプロンプト

コマンドプロンプトに「npm install hexo-cli -g」を入力して Hexo をインストールします。

コマンドプロンプトに「npm install hexo-cli -g」を入力

Hexo 3.1.0 がインストールされました。

Hexo でブログを作る

Hexo でブログを作ります。ここでは説明のため「gabriel」というブログ名にします。

コマンドプロンプトに「hexo init gabriel」と入力すると ブログが出来上がります。

コマンドプロンプトに「hexo init gabriel」と入力

と、思ったんですが Git が入っていないため出来ませんでした。

‘git’ は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
WARN git clone failed. Copying data instead
WARN Failed to install dependencies. Please run ‘npm install’ manually!

というわけで、急遽 Git を入れることになりました。

Git をインストールする

公式サイトから「Git-2.25.1-64-bit.exe」をダウンロードします。

Git 公式サイト

ダウンロードした「Git-2.25.1-64-bit.exe」を実行してインストールします。

Information

インストール先は変えないで。

Select Destination Location

ただ使うだけなので変える必要ないかな。

Select Components
Select Start Menu Folder

通常使うエディターを選択します。私は「Visual Studio Code」を使うので変更しました。

Choosing the default editor used by Git

よく分からないからそのままです。

Adjusting your PATH environment

こっちもそのまま。

Choosing HTTPS transport backend

触らない。

Configuring the line ending conbersions

よく分からない。

Configuring the terminal emulator to use with Git Bash

気にせず「Install」を押します。

Configuring extra options

Git のインストールが完了しました。

Completing the Git Setup Wizard

気を取り直して

では、気を取り直してコマンドプロンプトに「hexo init gabriel」と入力します。

同じエラーが出る場合は、コマンドプロンプトを開き直すと git コマンドが使えるようになります。

コマンドプロンプトに「hexo init gabriel」と入力

GitHub に Hexo ブログをアップロードする

まず、GitHub.com で Hexo ブログ リポジトリ を作ります。

GitHub New Repositorie

Repository name を入れて「Create repository」を押します。

Create new repository

次に、gabriel フォルダ内で右クリックをして「Git Bash Here」を選択します。

フォルダ内で右クリックをして「Git Bash Here」を選択

Git Bash コンソール が開くので、そこから GitHub に Hexo ブログをアップロードします。

Git Bash コンソール

Git Bash コンソール

ローカルリポジトリを初期化します。

git init
git init

全てのファイルを Git 管理下に 登録します。

git add .
git add .

Git 管理下 のファイルを ローカルリポジトリ にコミットします。

git commit -m "first commit"
git commit -m "first commit"

リモートリポジトリを登録します。

git remote add origin https://github.com/noitaro/gabriel.git
git remote add origin https://github.com/noitaro/gabriel.git

注意として、リモートリポジトリのアドレスは 先程作成した GitHub のアドレスを指定します。

リモートリポジトリのアドレス確認

リモートリポジトリ に プッシュ します。

git push -u origin master
git push -u origin master

これで、GitHub に アップロードが完了しました。

この時、GitHub にログインしていないと プッシュが出来ません。ログインしましょう。

GitHub.com の リポジトリ を見ると、ファイルがアップロードされている事が分かります。

GitHubリポジトリ確認

Netlify でブログを公開する

最後に、Netlify でブログを公開します。

公式サイトの「Sign up」を選択して、

Netlify公式サイト

「GitHub」を選択して、

Welcome to Netlify

netlify の認証を許可します。

Authorize Netlify Auth

クイックスタートガイド は 使わないので閉じます。

Quick Start Guide

「New site from Git」を押して サイトを作成します。

New site from Git

GitHub から Hexo ブログ を取得できるように認証を通します。

Create a new site

先程よりアクセス権限が多いので、再度認証を許可します。

Netlify by Netlify would like access to

GitHub 側 に Netlify を インストールします。

Install Netlify

ここまですると、Netlify で GitHub のリポジトリが見えるので、Hexo のリポジトリを選択します。

Continuous Deployment GitHub App

デプロイ設定をします。が、特に変更することが無いので「Deploy site」を押して Hexo をデプロイします。

Deploy settings

しばらく待ちます。

Site deploy in progress

URL が表示されれば、デプロイが完了です。

Your site is deployed

URL にアクセスすれば Hexo ブログが表示されます。

おわりに

手順が長いですが、特に迷うことはないと思います。

途中で Git Bash コンソール が出てきた時は、やめようかと思いましたが そんなに難しくなかったので、これを気に慣れていけたらいいなと思います。

タイトルとURLをコピーしました