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

静的サイトジェネレータのHexoでブログを作成してGithubPagesで公開する方法です。

前提

  • 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

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

URL

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

# 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

# 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でデプロイする。

テーマの変更

テーマを選ぶ。今回はCardにしてみる。

ドキュメントが中国語だけど翻訳みながらカスタマイズしてみる。

 https://theme-cards.ichr.me/

参考