【Hexo】WordPressを使わずほぼ無料で収益化可能なブログを構築する（Part2 Hexoの設定～Hexoで生成したサイトの公開）

概要

前回、GithubPagesを使用して自分のサイトをインターネットに公開しました。

今回はHexoを使用してWebサイトのレイアウトを設定していきたいと思います。

それではさっそく「いざ鎌倉！！」

構築（2.Hexoの設定）

2.1.Hexoをダウンロード＆セットアップ

＞コマンドを実行

npm install -g hexo-cli
hexo init [任意の名称]
cd [任意の名称]
npm install

※npmが使えない方は、Node.jsのインストールを行ってください（いくらでも記事があるので、ここでは省略）

2.2.デプロイ用のライブラリをダウンロード

＞コマンドを実行

npm install hexo-deployer-git --save

2.3.config.ymlを設定する

・GitPagesのURLを記載

url : https://[ユーザ名].github.io/[リポジトリ名]

・記事を生成したときのファイル名（わかりやすいようにYYYYMMDDhhmmss-title.mdにしてます）

new_post_name : :year:month:day-:title.md

・デプロイ（インターネット公開）用の設定

deploy:
  type: 'git'
  repo: https://github.com/[gitユーザ名]/[リポジトリ名].github.io
  branch: main

構築（3.記事を書く）

3.1.記事を書くためのファイルを生成

＞コマンドを実行

hexo new "hexo_test"

3.2.記事を書く

＞3.1で生成されたファイルを下記のように変更

---
title: hexo_test
date: 2025-10-05 00:00:00
tags:
	- test-tags
category: 
    - test-category
excerpt: test-excerpt
---


## Quick Start

### テスト

\`\`\` bash
$ echo コマンドライン
\`\`\`

リンク: [前回のQiita URl](https://qiita.com/shinpinoshi/items/96e6b0948c3478c961ce)

マークダウンについては下記のサイト様がわかりやすいのでお勧め
https://photo-tea.com/p/hexo-markdown-notation/

3.3.記事を確認

＞コマンドを実行

hexo server

※このコマンドを実行してもインターネットに公開されないのでご安心ください

＞上画像の赤線のURLにアクセス

無事表示された！！

hexo_testをクリック

＞確認後はCtrl + cで停止

3.4.記事をデプロイ（インターネットに公開）

＞コマンドを実行

hexo deploy

～中略

＞サイトを確認

https://[ユーザ名].github.io/[リポジトリ名]

無事インターネットに公開されました！！

締め

今回はhexoで生成した画面をインターネットに公開するところまでできました。
マークダウンで記事を書ける正直言って最高です！

次回はサイトのレイアウトを変更したりするために、もう少しhexoの細かいところに触れていきたいと思います。

また今回実施した内容は、ドキュメントに書いてある内容を最小限にまとめてやっただけなので、詳しく知りたい方は下記をどうぞ！
https://hexo.io/ja/docs/github-pages

以上。お疲れさまでした！

シリーズ

＞Part1
https://qiita.com/shinpinoshi/items/96e6b0948c3478c961ce

＞Part3
[現在作成中]