Hexo

Node.jsのインストール

Windowsの場合、Node.jsの開発元のWindows Installerでインストール
この時は node-v10.13.0-x86.msi

Hexoのインストール

Windowsの場合、Node.jsコマンドプロンプトから以下を実行。npmはNode.jsのインストーラーでインストールされている。

1
2
3
4
npm --version
6.4.1
npm install -g hexo
npm install -g grunt-cli --save

Hexoプラグインのインストール

npm installでプラグインを追加していく。
--saveを使うことでpackage.jsonのDependenciesに追加される。
hexo-generator-archive、hex-generator-categoryは標準でインストールされていた。

1
2
3
npm install hexo-generator-feed hexo-generator-sitemap --save
npm install hexo-generator-robotstxt hexo-generator-seo-friendly-sitemap --save
npm install hexo-generator-archive hexo-generator-category hexo-generator-index hexo-generator-tag --save
  • hexo-generator-feed
  • hexo-generator-sitemap
  • hexo-generator-robotstxt
  • hexo-generator-seo-friendly-sitemap
  • hexo-generator-archive
  • hexo-generator-category
  • hexo-generator-index
  • hexo-generator-tag

サイト生成

サイト生成はhexo initで行う。必要モジュールはpackage.jsonに記述があればnpm installでまとめてインストールできる。

1
2
3
hexo init サイト名
cd サイト名
npm install

テーマのダウンロード

テーマはtranquilpeakをインストールする。
grunt buildを実行しないと、assetフォルダーが生成されず、cssやjsが読み込めないので注意。

1
2
3
4
5
6
7
git clone https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak themes/tranquilpeak
cd themes
cd tranquilpeak
npm install
grunt build
cd ..
cd ..

テーマの反映

_config.ymlのthemesをtheme: tranquilpeakに変更。

1
2
3
4
5
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#theme: landscape
theme: tranquilpeak

画像フォルダーを有効にする

_config.ymlのpost_asset_folderをpost_asset_folder: trueに変更

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
#post_asset_folder: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

サイトに関する情報を設定

サイトに関する情報を設定する。
タイムゾーンはAsia/Tokyoにする。

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language: ja
timezone: Asia/Tokyo

背景画像の変更

themme/tranquilpeak/source/_images/に画像を配置（ここではgrey.jpg）。
themes/tranquilpeak/_config.ymlのcover_imageをcover_image: grey.jpgに変更。

1
2
3
4
5
# or in `source/assets/images/` if you can't or don't want to build the theme,
# and use relative url : `your-image.png`
cover_image: grey.jpg
# Your favicon located in folder `source/_images/` (development) or in `source/assets/images/` (production)
favicon:

サイドバーを小さくする

themes/tranquilpeak/_config.ymlのsidebar_behaviorをsidebar_behavior: 6に変更。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Define the behavior of the sidebar
# 1: Display extra large sidebar on extra large screen, large sidebar on large screen,
# medium sidebar on medium screen and header bar on small screen and
# extra large sidebar is swiped on extra large screen and large sidebar on all lower screen (default)
# 2: Display large sidebar on large screen, medium sidebar on medium screen and
# header bar on small screen and large sidebar is swiped
# 3: Display medium sidebar on large and medium screen and header bar on small screen and
# medium sidebar is swiped
# 4: Display header bar on all screens, extra large sidebar is swiped on extra large screen and
# large sidebar is swiped on all lower screens
# 5: Display header bar on all screens and large sidebar is swiped on large screen
# 6: Display header bar on all screens and medium sidebar is swiped
#sidebar_behavior: 1
sidebar_behavior: 6
# Hide sidebar on all article page to let article take full width to improve reading, and

サイドバーのアイテム編集

themes/tranquilpeak/_config.ymlから不要なリンクをコメントアウトする。
アイコンはFont Awesomeを使う。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
sidebar:
    menu:
        home:
            title: global.home
            url: /
            icon: fa fa-home
        categories:
            title: global.categories
            url: /all-categories
            icon: fa fa-bookmark
        tags:
            title: global.tags
            url: /all-tags
            icon: fa fa-tags
        archives:
            title: global.archives
            url: /all-archives
            icon: fa fa-archive
        search:
            title: global.search
            url: /#search
            icon: fa fa-search
            # `open-algolia-search` classes are used to open algolia search modal
            class: open-algolia-search
        about:
            title: global.about
            url: /#about
            icon: fa fa-question
    author_links:
#        github:
#            title: global.github
#            url: https://github.com/
#            icon: fab fa-github
#        stack_overflow:
#            title: global.stack_overflow
#            url: http://stackoverflow.com/users
#            icon: fab fa-stack-overflow
#        twitter:
#            title: global.twitter
#            url: https://twitter.com/
#            icon: fab fa-twitter
#        facebook:
#            title: global.facebook
#            url: https://facebook.com/
#            icon: fab fa-facebook
#        google_plus:
#            title: global.google_plus
#            url: https://plus.google.com/
#            icon: fab fa-google-plus
#        linked_in:
#            title: global.linkedin
#            url: https://www.linkedin.com/profile/
#            icon: fab fa-linkedin
        mail:
            title: global.mail
            url: mailto
            icon: fa fa-envelope
    rss:
        rss:
            title: global.rss
            url: /atom.xml
            icon: fa fa-rss

カテゴリ、タグ、アーカイブの一覧ページの生成

各Indexページを自動生成させる方法はtranquilpeakのドキュメントに記載がある。
hexoコマンドでページを作成する記述だが、以下のファイル群をsource以下に作成すればよい。

1
2
3
4
5
6
7
8
source  + all-archives
        |   + index.md
        |
        + all-tags
        |   + index.md
        |
        + all-categories
            + index.md

all-archives/index.md

1
2
3
4
5
---
title: "all-archives"
layout: "all-archives"
comments: false
---

all-tags/index.md

1
2
3
4
5
---
title: "all-tags"
layout: "all-tags"
comments: false
---

all-categories/index.md

1
2
3
4
5
---
title: "all-categories"
layout: "all-categories"
comments: false
---

Google Analyticsの設定

themes/tranquilpeak/_config.ymlで、Google AnalyticsのトラッキングIDを追加

1
2
3
4
5
6
7
8
9
# -------------------
# Integrated services
# -------------------

# Your Google analystics web property ID : UA-XXXXX-X
google_analytics_id: UA-XXXXX-X
# Your Baidu analystics web property ID : 9505a5af654a2478f93fd6c0ae4f687d
baidu_analytics_id:
# Your Gravatar email. Overwrite `author.picture` everywhere in the blog