Motomichi Works Blog

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

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

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

hexoについて

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

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

とりあえずGitHubexampleリポジトリを作成して、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設定をする

だいたい以下のページの通りです。非常に参考になりました。 - Hexo でブログを作成して Netlify で公開するまで - to-me-mo-rrow - 未来の自分に残すメモ - - HexoとNetlifyで快適なブログ環境を手に入れよう! - Adwaysエンジニアブログ

少しトライ&エラーを繰り返したのが以下の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の調整と新規ページの作成

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