Hexo Markdown

 
カテゴリー Markdown SSG   タグ

画像の引用

通常のMarkdownのハイパーリンク（![](http://url/img.jpg)や[](http://url/img.jpg)）を使ってassetフォルダーへのリンクを貼ると、生成されたタグページやカテゴリページでリンク切れになる。

asset_linkでファイルへのリンクを生成する

1
{% asset_link grey.jpg グレーテンプレ画像 %}
グレーテンプレ画像

asset_imgで<img src="/<path>/grey.jpg" alt="title" title="title">タグが生成される。

1
{% asset_img grey.jpg グレーテンプレ画像 %}

ハイパーリンク

Google

1
[Google](http://www.google.co.jp)

カテゴリ・タグ

カテゴリは階層化できる

1
2
3
4
5
6
7
8
9
10
11
12
---
title: testpge
date: 2018-11-28 13:29:56
+update: {{date}}
category:
    - [テスト, テスト2, テスト3]
    - [テスト, テスト2, テスト4]
tags:
    - [jpeg]
    - [hexo]
    - [liefty]
---

続きを読む

1
<!-- more -->
続きを読む

モダンWebホスティングサービスNetlify

 
カテゴリー CI/CD SaaS   タグ

Netlify

NetlifyはContinuous Deploymentに対応したモダンなWebホスティングサービス。
Gitリポジトリサービス（GitHubやBitBucket）と連携し、GitへのPushをトリガーにプレビューおよびサイト公開を自動的に行う。Buildフェーズの中で静的サイトジェネレーターによるサイト生成も行うため、ローカルの開発環境に静的サイトジェネレーターをインストールする必要もない。

  • HTTP/2対応
  • Let’s Encryptの無料サーバ証明書
  • Continuous Deploymentでサイト更新の手間を最小化
  • 静的サイトジェネレーターの環境をローカルPCに用意する必要がない
  • CDN経由での配信（2019年12月時点で日本からのアクセスはシンガポールからの配信）
  • アクセスログは見ることができない
1
2
3
4
5
6
7
8
9
10
11
12
IP General Information
IP Address: 178.128.17.49
Hostname: 178.128.17.49
ISP: DiGital Ocean

IP Geolocation Information
Continent: Asia (AS)
Country: Singapore (SG) SG
City: Time
Zone: Asia/Singapore
Latitude: 1.314 (1°18'50.4" N)
LonGitude: 103.6839 (103°41'2.04" N)

Netlifyのセットアップ

Sign up

以下、BitBucketの場合。

Netlify width=640

Bitbucketアカウントを使う。

Netlify width=640

Bitbucketアカウントでログイン。

Netlify width=640

Bitbucketアカウントに対してNetlify APIのアクセスを許可する。

Netlify width=640

Netlify width=640

New site from Git

Netlify width=640

1. Connect to providerでBitbucketを選択。

Netlify width=640

2. Pick a repositoryでサイト用に作成したリポジトリを選択。

Netlify width=640

3. Build options, and deployでデプロイの設定を行う。

静的サイトジェネレーターにはhexoを使用するので、Build commandはhexo generate、Publish先はpublic/で設定。

Netlify width=640

設定が終わると初回のビルドが始まる。

Netlify width=640

カスタムドメイン設定

Domain settingsで独自ドメインを設定する。
DNSサーバはLets’s Encryptを自動更新するために、Netlifyが提供するサーバに変更する必がある。

Netlify custom domain width=640

Netlify custom domain width=640

DNSサーバ側でレコード登録

Netlify custom domain width=640

Let’s Encryptを使用した無料のサーバ証明書発行

Netlify custom domain width=640

コメント・シェア

Hexoの基本操作チュートリアル

 
カテゴリー SSG Tutorial   タグ

ページ作成 - ドラフト～リリース

ドラフトを作成して、確認してリリースする場合、まずhexo new draftでドラフトを作成。

1
2
hexo new draft テストページ
INFO  Created: C:\....\<<サイト名>>\source\_drafts\テストページ.md

hexo server --draftでドラフトを表示して確認。

1
2
3
hexo server --draft
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

hexo publishでドラフトをリリース。

1
hexo publish テストページ

hexo serverでリリースしたページを表示して確認。

1
2
3
hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

ページ作成 - リリースのみ

ドラフトは作成せずリリースする場合、hexo newで作成。

1
2
hexo new テストページ
INFO  Created: C:\....\<<サイト名>>\source\_posts\テストページ.md

hexo serverでリリースしたページを表示して確認。

1
2
3
hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

静的サイトの作成

hexo generateでサイト一式がpublishフォルダーに作成される。

1
2
3
4
5
6
7
8
9
hexo generate
hexo generate
INFO  Start processing
INFO  Files loaded in 9.24 s
INFO  Generated: post-sitemap.xml
INFO  Generated: atom.xml
INFO  Generated: sitemap.xml
INFO  Generated: sitemap.xsl
INFO  Generated: categories/テスト/index.html

hexo cleanでサイト一式クリアできる。

1
2
3
hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

サイトのデプロイ

hexo deployでサイトをデプロイ。hexo generate -dでサイト作成からデプロイまで一括で行う。

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

コメント・シェア

Hexoを使った静的サイト作成

 
カテゴリー SSG   タグ

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

コメント・シェア

  • page 1 of 1


nullpo

めも


募集中


Japan