search
LoginSignup
16

More than 3 years have passed since last update.

posted at

updated at

Hexoを使って個人ブログ作成, Github Pagesにデプロイするまで

モチベーション

・自分のWebページが欲しいけど、レンタルサーバ代は払いたくない
・動的なページである必要性はない
→ Github Pagesでいい感じのものを作ってしまえばいいじゃん!
という感じ

どうやって作るか

https://qiita.com/okmttdhr/items/82ecb0332835472e905f
にあるように、Github Pagesでブログ構築ができる静的サイトジェネレーターはたくさんあるっぽい。
Railsベースのものはなんとなく使いたくないので、ノリでHexoを選んだ。

制作環境

MacOS Sierra 10.12.6
Homebrewはインストール済

作っていく

Github Pages用のRepository作成

Githubにアクセス → 右上の「+」ボタンから「New Repository」を選択
Repository Nameは username.github.io にすること!
URLがめんどくさくなります。
※この記事内でusernameと書かれているところは適宜Githubのユーザ名に置き換えて実行してください。

Hexoのインストール

nodebrewとかいうバージョン管理ツール?(RubyのrbenvとかPythonのpyenvみたいな立ち位置のもの)があるらしいのでそれを使っていく
Homebrewを使ってnodebrewをインストール

$ brew install nodebrew

今時の若者のShellはfishなので、~/.config/fish/conf.d/config.fishに以下の通り追記する。

~/.config/fish/conf.d/config.fish
set -x PATH $HOME/.nodebrew/current/bin $PATH

Shellを起動し直してから、最新のNode.jsをインストール

$ nodebrew setup
$ nodebrew install-binary latest
$ nodebrew list
v11.9.0

current: none
$ nodebrew use v11.9.0
$ nodebrew list
v11.9.0

current: v11.9.0
$ npm -v
6.5.0

npmを更新しておく

$ npm update -g npm
$ npm -v
6.7.0

Node.jsが入ったのでHexoとデプロイツールを入れていく

$ npm install -g hexo
$ sudo npm install hexo-deployer-git --save 

とりあえず立ち上げてみる

適当なディレクトリを作ってそこに環境を構築する

$ mkdir blog
$ cd blog
$ hexo init
$ hexo server

localhost:4000にアクセス出来たらとりあえず成功です。

configの修正

以降ではhexo initを実行したディレクトリ下で作業する
デプロイ先などの設定が_config.ymlにあるので修正する

_config.yml
# Site
title: hoge
subtitle: hogefuga
description: 
keywords:
author: piyo
language: ja
timezone: Asia/Tokyo

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://username.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

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

この辺を修正してあげれば良い

デプロイしてみる

$ git init
$ git remote add origin git@github.com:username/username.github.io.git
$ hexo deploy -g

しばらく待って、https://username.github.io にアクセス出来たら成功です!
お疲れ様でした。

新しい記事を作る場合

hexo new <記事名>と打てばsource/_posts/<記事名>.mdというものが生成されるので、生成された<記事名>.mdにMarkdown形式で入力すれば良い。
記事が完成したらhexo deploy -gと打てば良い感じにデプロイしてくれます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
16