静的サイトジェネレーター 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:
１回目の、投稿を追加して
generate(生成)しています。
/public に生成されます。
hexo new "My New Post" hexo generate
ローカルの apache サーバですが
ブラウザで、開きます。
例として、ＵＲＬは下記です。
localhost/blog4/
テーマは標準版ですが、表示できました。
テーマの変更
標準でも良いのですが、apollo
のテーマ設定してみました。
https://github.com/joyceim/hexo-theme-apollo
/_config.yml を修正
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: apollo
generateして、ブラウザで確認。
ずいぶんシンプルになりました。
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
のリンクが表示されました。
リンク押すと、詳細ページが開き。
全文が表示されます
カテゴリの追加
カテゴリ追加し、投稿種類を増やてみます。
カテゴリを追加する、ページも追加しときます。
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のリストが自動生成されました。
topメニューの、newsカテゴリの追加。
設定ファイルで可能かもしれませんが、
テーマを修正してみました。。
＜li ＞ のnews の行で、URLは絶対パスでベタ書きですが。
メニューから、カテゴリの各リストへ移動できます。
ファイル:
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
