IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Node.js / 静的サイトジェネレーター Hexo を試す

静的サイトジェネレーター Hexo を試す

2018/02/1 Node.js, Windows, 静的サイトジェネレーター

静的サイトジェネレーター Hexo を試す

Joomla! で幾つかのサイト管理をしており、企業(系)サイトでは結構固定ページも多く、静的サイトと動的サイトをうまく組み合わせることは出来ないかと考えたりはしているのですが手付かずの状態が続いています。

で、しばらく前から静的サイトジェネレーターという言葉を見かけるようになっていますので、いろいろ試してみようと思います。

それにしてもいろいろありますね。使用言語で言えば、node.js, React.js, Go, Ruby, Python, それに PHP もありますね。

まずは、node.js でうごく Hexo を試してみます。


  • Hexo インストール
  • Hexo セットアップ
  • ローカルでチェックする
  • GitHub Pages で公開する
  • テーマの変更

Hexo インストール

Windows 上でやってみます。node.js と git がインストールされているものとします。

  • Windows に Node.js をインストールする
  • Git for Windows インストール

Hexo のドキュメントに従って進めます。

  • Documentation | Hexo

>npm install -g hexo-cli

WARNING が出ています。

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\hexo-cli\node_modules\chokidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”x64″})

こちらによりますと、MacOS の依存関係のメッセージなので Windows は気にするなということのようです。

Hexo セットアップ

>hexo init blog
>cd blog
>npm install

Hexo はブログに特化されているとありましたのでフォルダを blog としています。

これだけでサイトが出来てしまうようです。

ローカルでチェックする

>hexo server

localhost:4000 にアクセスしますと下のサイトが出来ています。

GitHub Pages で公開する

GitHub Pages にレポジトリ blog があるとします。

  • DropboxのPublicフォルダからGitHubページに移行した

Hexo のドキュメントはこちらです。

>npm install hexo-deployer-git --save

プラグインが必要になりますのでインストールします。

次に _config.yml を開いて # Deployment に GitHub Pages の URLなどを設定します。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/アカウント/リポジトリ.git
branch: master

後はデプロイするだけです。

>hexo deploy

これで https://アカウント.github.io/blog/ で公開されます。ただ、反映されるまでに少し時間がかかる場合があるようです。

テーマの変更

テーマを変更してみます。テーマは、 Themes | Hexo から anodyne を使わせていただきます。

GitHub – klugjo/hexo-theme-anodyne: 🌋 Original Bright Theme for Hexo

変更する方法は簡単で、テーマをダウンロードし、themes 以下に配置し、_config.yml を編集するだけです。

>git clone https://github.com/klugjo/hexo-theme-anodyne themes\anodyne

_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anodyne

>hexo clean
INFO  Deleted database.


>hexo generate
INFO  Start processing
INFO  Files loaded in 349 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2018/index.html
INFO  Generated: css/style.css
INFO  Generated: archives/2018/01/index.html
INFO  Generated: 2018/01/29/hello-world/index.html
INFO  6 files generated in 497 ms

hexo clean で public フォルダを削除し、hexo generate で再構築します。

デモサイト

簡単ですね。もう少し深入りしたいところですが、先に他の Jekyll や Hugo を試してみようと思います。

Joomla! 3.8.4 セキュリティ&バグフィックスがリリースされています
Jekyll を試す(Ubuntu & Windows)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com