Hexoでブログをセットアップする。

前提

• Node.js環境
• githubリポジトリ作成

作成手順

1. npm install -g hexoでHexoをインストールする。

2. hexo init blognameでフォルダblogname/が作成される。

3. npm installで必要なモジュールをインストールする。

4. hexo serverでローカルサーバーを起動し、localhost:4000にアクセスするとブログが表示される。

5. _config.ymlを編集

Site

1
2
3
4
5
6
7
8

# Site
title: mizStudy
subtitle: ''
description: 'This is my study.'
keywords:
author: mizuno shoji
language: ja
timezone: 'Asia/Tokyo'

URL

プロジェクトサイトだったらURLちゃんと設定しないとCSSやJSにパスが通らない。

1
2
3

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://mizunoshoji.github.io/mizstudy

Deployment

1
2
3
4
5
6

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

1. hexo deploy -gでpublic/にhtmlを生成して公開する。
   エラーDeployer not found: githubがでたらnpm install hexo-deployer-git --saveで解決する。

2. Github Pagesで表示を確認する。

記事作成

1. hexo new "新規ページタイトル"を実行すると.mdファイルが作成される。

2. マークダウンでコンテンツを作成する 。

3. hexo deploy -gでデプロイする。

テーマの変更

1. テーマを選ぶ

今回はCardにしてみる。

ドキュメントが中国語だけど翻訳みながらカスタマイズしてみる。
https://theme-cards.ichr.me/

参考

Hexo
https://hexo.io/

静的サイトジェネレーターの選定時に考えること | himenon.github.io
https://himenon.github.io/blog/static-site-generator/

所要時間3分!? Github PagesとHEXOで爆速ブログ構築してみよう！ | 株式会社LIG
http://liginc.co.jp/web/programming/server/104594

チームブログをGitHubとHexoではじめよう！ | Tokyo Otaku Mode Blog
https://blog.otakumode.com/2014/08/08/Blogging-with-hexoio/

Node.js製の静的サイトジェネレータ「Hexo」で無料ブログ開発 vol.1 | dotstudio
https://dotstud.io/blog/hexo-static-site-vol1/