---
title: "Hexo で無料のブログを作る"
description: "いろいろな事情があって Blogger から GitHub Pages へ引っ越し、1 学期のあいだ付き合ってくれた Blogger は正式に更新停止となりました。記念に元のサイトはこちら。Hexo に乗り換えた理由は以下のとおりです。\nBlogger の管理画面は本当に簡素（慣れても、そこから先に手を入れるのが難しい..."
author: "kidneyweakx"
published: 2019-09-20T17:00:00.000Z
updated: 2025-12-17T23:03:37.288Z
lang: ja
tags: ["程式筆記", "Javascript", "hexo"]
canonical: https://kidneyweakx.com/blog/19log-0921-hexo-note?lang=ja
alternate_zh_tw: https://kidneyweakx.com/blog/19log-0921-hexo-note.md
alternate_en: https://kidneyweakx.com/blog/19log-0921-hexo-note.md?lang=en
---

# Hexo で無料のブログを作る

いろいろな事情があって Blogger から GitHub Pages へ引っ越し、1 学期のあいだ付き合ってくれた Blogger は正式に更新停止となりました。記念に[元のサイトはこちら](https://kidneyweakx.blogspot.com/)。Hexo に乗り換えた理由は以下のとおりです。
- Blogger の管理画面は本当に簡素（慣れても、そこから先に手を入れるのが難しい）。
- 普段使っている Markdown 記法を、HTML に変換してから Blogger のエディタに貼る必要がある。
- 機能が Blogger 本体に縛られる。
- コードブロックを入れるだけでも CSS をいじる必要があって、カスタムテーマを一度ちょっと直したら、もうそれ以上触る気がなくなる。

というわけで乗り換えました〜〜

## Why GitHub Pages??
GitHub Pages を選んだ理由はシンプルです。
1. Markdown 記法でそのまま記事が書ける
    - Markdown 記法はとても楽で、コードも簡単に挿入できる
    - レイアウトが簡単なので、HTML ではなく記事の中身に集中できる
    - 基本の記法は [CheatSheet](https://markdown.tw/)
2. [GitHub Pages](https://pages.github.com/) でホスティングできる
    - GitHub で username.github.io というリポジトリを新しく作るだけで、username.github.io でトップページにアクセスできる
    - サーバーを自分で管理する必要がなく、GitHub が面倒を見てくれる
3. [git](https://git-scm.com/) で自分のブログを管理できる
    - branch と merge で、いま手を入れている記事を管理できる
    - 記事を消しても git で復元できる

## Why Hexo??
Hexo を使う前に [Jekyll](https://jekyllrb.com/) も試しました。Ruby のほうが少し慣れていたからです。
でも Jekyll は中国語の情報が少なく、Ruby の Windows 上での挙動も、うーん……。宗教戦争をしたいわけではないですが、Ruby に比べると、Hexo が必要とする Node.js のほうが Windows にやさしいです。
そして一番大事なのは、Hexo の作者 [tommy351](https://twitter.com/tommy351) が台湾人だということ!! これは使うしかないでしょう。
実は[技術的な](https://zespia.tw/blog/2012/10/11/hexo-debut/)理由もあります！ たとえば Ruby だと、記事が増えるとサイト生成がかなり遅くなります。Jekyll にも最適化の方法を編み出した人はいますが、そこまで面倒なことはしたくなかったので、最終的に Hexo を選びました〜

## インストール手順

> Node.js をインストール

- まず [Node.js](https://nodejs.org/en/) の公式サイトからダウンロードしてインストール

> [Hexo](https://hexo.io/zh-tw/index.html) をインストール

- npm でインストール

`npm install hexo-cli -g`
- インストールできたら、次のコマンドでバージョンを確認できます

`hexo version`
- 自分のブログを作る

```js
hexo init blog  #初始化blog
cd blog         #切換至blog資料夾
npm install     #安裝相關套件
hexo server     #在localhost顯示頁面
```

- 記事を GitHub にデプロイする

```js
deploy:
    type: github
    repository: git@github.com:yourname/yourname.github.io.git
    branch: master
```

GitHub とローカル環境をつなぐ方法については、ここでは省略します。

- デプロイを実行

`hexo d`

**ERROR Deploer not found が出たら、次のコマンドを実行**
`npm install hexo-deployer-git --save`

## ブログを美しくする
もちろん、Hexo を使うなら一番大事なのはブログの見た目ですよね〜
私は [Next](https://theme-next.iissnan.com/) を使っていて、themes フォルダに clone してから、ここを書き換えます。

```js
## Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #修改這行
```

あとは公式サイトを見ながら、自分だけの Next に仕上げていけます。

## エディタで記事を書く
私は vscode で .md ファイルを書いています。プレビューしながら書けるのでとても便利ですし、ターミナルと組み合わせれば、さっと書いてさっと公開できます
```js
hexo clean
hexo d -g #d部屬 g=generate
```
これだけで md ファイルが自動で HTML に変換され、GitHub にデプロイされます。

## タイトルの色を変える
`source/css/_variables/base.styl` に、もともとの色のカラーコードがあります
[w3s](https://www.w3schools.com/colors/colors_picker.asp) で好きな色を選んで、`hexo s` で確認してみましょう
![](https://raw.githubusercontent.com/kidneyweakx/img-host/image/image/hexo01.jpg)


## Extra Live2D 看板娘

ここではあまり詳しく書きません
> まず live2d の pkg をインストール

`npm install --save hexo-helper-live2d`

> 好きな [2D 娘](https://github.com/xiazeyu/live2d-widget-models)を選ぶ

`npm install {你選的}`

> `_config.yml` に以下をまるごと追加

```js
live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-haru/02 # 改成你選擇的
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #手機顯示
```
---

## Reference
[Hexo のインストール手順とメモ](https://wwssllabcd.github.io/blog/2014/12/22/how-to-install-hexo/)
[Hexo+GitHub で、初心者でもすぐにブログが作れる](https://yaoandy107.github.io/hexo-tutorial/#more)
[Hexo で自分だけのブログを作る](https://dtes8617.github.io/2018/01/16/%E7%94%A8Hexo%E6%89%93%E9%80%A0%E4%BD%A0%E7%9A%84%E5%B0%88%E5%B1%ACBlog/)
[hexo に live2d の看板娘アニメーションを追加する](https://www.jianshu.com/p/3a6342e16e57)
[hexo-helper-live2d](https://www.npmjs.com/package/hexo-helper-live2d)