netlifyとhexoでブログを公開する

参考にさせていただいたページ

hexoについて

hexoとnetlifyでブログを公開する手順について

gitリポジトリを作成してcloneする

とりあえずGitHubで exampleリポジトリを作成して、cloneしたことにして説明を進めます。

cdする

cd example

hexoで作ったブログをlocalhostで確認する

「Hexo」公式ページで最新情報を見て頂くのが良いと思いますが、以下のような感じですぐにHello Worldページが確認できると思います。

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

とりあえずこの段階ではHelloWorldまでできていれば充分だと思います。

私のディレクトリ構造

このとき以下のようなディレクトリ構造になりました。blogディレクトリ配下は hexo init blog コマンドでできたものです。

example
  ├── .git
  ├── README.md
  └── blog
        ├── _config.yml
        ├── package.json
        ├── scaffolds
        ├── source
        |   ├── _drafts
        |   └── _posts
        └── themes

netlifyにGitHubでログインしてDeploy設定をする

だいたい以下のページの通りです。非常に参考になりました。

少しトライ&エラーを繰り返したのが以下のBuild settingsです。

Repository: github.com/ユーザー名/リポジトリ名

f:id:motomichi_works:20200718170436p:plain

Repositoryは github.com/ユーザー名/リポジトリ名
私の場合はexample/blogという一階層ディレクトリ構造なので Base directoryは blog (package.jsonがあるディレクトリパス)
私の場合はnode_modulesをリポジトリにpushしていないためnode_modulesをインストールしてからビルドする必要がありますので、Build commandに設定するのは npm install; npm run build
Publish directoryは blog/public/ (blog/ の部分はBase directoryを入力すると自動で入力されます。index.htmlがあるディレクトリパス)

同じようにハマっている人の参考になればと思います。

詳細は各環境のDeploysから、Deploy logを読んでトライアンドエラーをしてみるのが良いと思います。

デプロイされたindex.htmlのページが確認できたらあとはhexoのドキュメントを見ながら簡単な調整をコツコツとやります。

hexoの調整と新規ページの作成

参考ページを見ながら設定変更や新規ページの作成をすると良いでしょう。

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。