knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

静的サイトジェネレーター Hexoお試し編


index:

概要

サイトジェネレーターの Hexoを使って、
ブログ等のサイト構築を試してみました。
github pageに配置を目標としています。

背景として、wordpressの編集や、読み込みが遅く、
対策で、高速表示できるサイト構築方法があれば良いなと
考えていたのですが、データベースやphp不要な点は良さそうですが。
hexoの場合は、node.js の操作が必要だったり。しますね

markdown書式に対応していて、
ページを生成してくれますので、便利そうです。

初期設定、準備とか

windowsで、作成してみました。node.js , npmが必要です。

C:\tmp\2017_tmp\node\hexo\blog4>node -v
v8.11.2

C:\tmp\2017_tmp\node\hexo\blog4>npm -v
5.6.0

node.js はパスを通しておくと、Hexo 実行できました。

install, 本家サイトに記載されているコマンド
実行しました。

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

hexo server を使うと、テストできますが、
ローカルのapacheとかに置いてもテスト可能でした。

ルートのパスの変更

server直下に、サイト配置する場合は変更不要。
apache等で、htdocs以下の下位フォルダにおく場合は、変更が必要
下記は。 /blog4 に構築しています。

/_config.yml を修正、 root の部分を / から
/blog4/ に変更しています。

 URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /blog4/
permalink: :year/:month/:day/:title/
permalink_defaults:

1回目の、投稿を追加して
generate(生成)しています。

/public に生成されます。

hexo new "My New Post"

hexo generate

ローカルの apache サーバですが
ブラウザで、開きます。
例として、URLは下記です。
localhost/blog4/
 テーマは標準版ですが、表示できました。

f:id:knaka0209:20180616172057p:plain

テーマの変更

標準でも良いのですが、apollo
のテーマ設定してみました。

https://github.com/joyceim/hexo-theme-apollo

/_config.yml を修正

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

generateして、ブラウザで確認。
ずいぶんシンプルになりました。

f:id:knaka0209:20180616173258p:plain

more タグ

上記の hexo new と同様に
ページを追加し
mdファイルを、書きます。
source\_posts\ の下に、タイトル名.md
みたいなファイルが生成されますので、編集

下記の more の部分を追加
( 全角文字を記入していますが、半角に変更下さい  )

---
title: 'new 2nd post, more test'
date: 2018-06-16 17:49:28
tags:
---

more のてすと
more のてすと

<!ーー more ーー>

more のてすと
more のてすと
more のてすと
more のてすと
more のてすと

見え方は、Read More
のリンクが表示されました。

f:id:knaka0209:20180616180017p:plain

リンク押すと、詳細ページが開き。
全文が表示されます

カテゴリの追加

カテゴリ追加し、投稿種類を増やてみます。
カテゴリを追加する、ページも追加しときます。

hexo new page categories

hexo new "news-1"
hexo new "news-2"

追加された、mdファイルに
category を追加、newsの名称にしています。

---
title: news-1
category : news
date: 2018-06-16 18:07:40
tags:
---


news カテゴリを開きます。
blog4/categories/news/

newsのリストが自動生成されました。

f:id:knaka0209:20180616182545p:plain

topメニューの、newsカテゴリの追加。
設定ファイルで可能かもしれませんが、
テーマを修正してみました。。
<li > のnews の行で、URLは絶対パスでベタ書きですが。
メニューから、カテゴリの各リストへ移動できます。

f:id:knaka0209:20180616182701p:plain

ファイル:
themes\apollo\layout\_partial\header.ejs

GitHub Pages で公開する。

rootを、hexo_2にしてますが。

gitHub で、リポジトリを作成し、
git push しました、setting はGitHub Pages
の設定をしておきます。

URL:
https://kuc-arc-f.github.io/hexo_2/

hexo が生成したコード
github.com

xcopy で、一括コピー。apache/htdocs

windows版ですが。
generate で、 publicフォルダが生成されますが、
apacheなどの rootに一括コピーするコマンド
generate 後に、コピーすると便利でした。

xcopy /Y /E public C:\xampp\htdocs\blog2\

f:id:knaka0209:20180714130218p:plain