All Articles

Hexo+GitHubPagesでブログ生成

Published 3 Dec 2017

Hexoとは

HexoはNodejsで書かれたブログ生成ツールです。
Markdown記法で書いた記事を静的ページに変換してくれるため、簡単にブログが作成できます。 Hexo公式ページ

Hexoインストール

まずはHexoのインストールから始めます。

前提

まず前提としてNodejsとGitがインストールされている必要があります。
それぞれのインストール方法についてはここでは割愛します。よしなにインストールして下さい。

hexo-cli インストール

Hexo本体のインストールを行います。
下記コマンドを実行し、hexo-cliをグローバルにインストールします。

$ npm install -g hexo-cli

ブログ環境作成

Hexoブログを作成します。 任意のディレクトリ配下で下記のコマンドを実行すると指定した名前のディレクトリが作成され、そこにHexoのブログ環境を構築してくれます。

$ hexo init [任意のディレクトリ名]

完了したら、作成されたディレクトリ内に移動します。

そこで下記のコマンドを実行するとブログ作成に必要なnpmモジュールがインストールされます。

$ npm install

これで、Hexoによるブログ環境が作られました。 下記コマンドで実際にHexoによって作成されたブログページが、どのようなものか確認することができます。

$ hexo server

ブラウザから、http://localhost:4000にアクセスするとブログが確認できると思います。

ブログの設定

Hexoの設定は_config.ymlを編集することで可能です。 とりあえずは、title、author、language、timezoneあたりを編集しておくと良いと思います。

_config.ymlの設定内容については、複雑のなので公式を参考にして下さい。 Configuration

ブログのテーマ

Hexoには各種themaが用意されており、好みのものを選ぶところから始めると良いでしょう。 themaに関しては、公式のものから個人で製作されたものまで、多くのバリエーションがあり、こちらで確認できます。 Themas

themaを変更方法するには、まず対象となるthemaをダウンロードしてきて、themasディレクトリ配下に配置します。 _config.yml内のthemaを変更するとthemaが適応されます。(初期状態なら大体、60行目付近)

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape # ←ここを編集

また、おすすめテーマを紹介しているブログもいくつかありますので、確認してみて下さい。

ちなみに私は、デフォルトのlandscapeを使っています。

GitHub Pagesへのデプロイ

「GitHub Pages」は、GitHubの静的ページホスティング機能です。 この機能を利用するにはいくつか方法があるますが、今回は「[user名].github.io」というリポジトリを作る方法を利用します。

GitHub Pages用のリポジトリの作成

リポジトリを作成します。

  1. 「Repository name」には、user名.github.ioを入力します。
  2. 「public」が選択されていることを確認する
  3. 「initializethis repository with a README」にチェックが入っていないことを確認する
  4. 「Create repository」をクリックする これで一旦GitHub側の作業は完了。

Hexoのデプロイ

gitによる投稿には、追加npmモジュールをインストールする必要があるので、下記でインストールする。

$ npm install --save hexo-deployer-git

Hexoの再インストールが求められるかもしれないですが、その場合はその指示に従います。

続いて、デプロイ設定を行うために_config.ymlを下記の通り編集します。※設定ファイルの最後にあります。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: 
  type: git
  repo: git@github.com:[user名]/[user名].github.io.git
  branch: master

ここまでで準備は完了です。

下記コマンドでデプロイが実行され作成されたブログが公開されます。 ※もう一度、内容確認しておくといいと思います。

$ hexo d -g

これで、めでたくブログが公開されました。 https://[user名].github.ioに接続して、公開されていることを確認してください。

さいごに

そのようなかたちで技術ブログを始めるようになりました。 よろしくお願いします。

Published 3 Dec 2017

主にWeb技術に関するブログ
Michihiko on Twitter