Hexo
Hexo
HexoはNode.js製の高速でシンプルかつ強力なブログフレームワークです。
Butterfly
A Simple and Card UI Design theme for Hexo
構築
構築と手動起動
n(nodejs, npm)
https://github.com/tj/ncurl -L https://bit.ly/n-install | bash
~/.bashrc の末尾に一行追加されます
hexo
npm install hexo-cli -g
hexo init blog
cd blog
npm installhexo-theme-butterfly (+ hexo-renderer-pug hexo-renderer-stylus)
npm install hexo-theme-butterfly hexo-renderer-pug hexo-renderer-stylus
cp ./node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml./_config.yml theme: butterfly
hexoサーバを起動
hexo s
ブラウザで表示
http://localhost:4000カスタマイズ
https://ktkr3d.github.io/2023/12/09/Hexo-Theme-Butterfly/
常駐サービス化
- ユニットファイル
/etc/systemd/system/hexo.service [Unit]
Description=Hexo server
After=network.target
[Service]
Type=simple
# 実行するユーザー名を指定
User=arch
# Hexoのプロジェクトディレクトリを指定
WorkingDirectory=/home/arch/repos/blog
# npx hexo s を実行
ExecStart=/usr/bin/npx hexo server
Restart=always
# ログ出力先
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=hexo
[Install]
WantedBy=multi-user.target - リロード
sudo systemctl daemon-reload
- 有効化と起動
sudo systemctl enable --now hexo
タグプラグイン
Plugins
Hexo is a fast, simple & powerful blog framework powered by Node.js.
Hexo tag plugins
- hexo
blockquote(quote) code(codeblock) iframe img(image) include_code(include-code) link(a, anchor) post_path post_link asset_path asset_link asset_img(asset_image) pullquote url_for full_url_for - hexo-tag-embed
gist jsfiddle vimeo youtube
Theme tag plugins
- hexo-theme-butterfly
button chartjs flink gallery hide inlineImg label mermaid note score series tabs timeline
Custom tag plugins
- hexo-butterfly-tag-plugins-plus
btns bubble carousel checkbox folding ghcard image inline-labels link media notation poem progress reference site-card span tip - hexo-github-repo-tag
githubrepo - hexo-pdf
pdf - hexo-tag-bootstrap
alert badge btn card carddeck cardgroup carousel col container input jumbo label modalbtn modal pill row textcolor - hexo-tag-github-code
ghcode - hexo-tag-google-charts
google-charts - hexo-tag-ogp-link-preview
link-preview - hexo-tag-table-bootstrap
table
行番号以外の列を折り返し可能とする場合 - hexo-tag-twitter
twitterURLの
x.comをtwitter.comに置換すれば利用可能
Custom filter
- hexo-filter-mermaid-diagrams
バックティックコードブロックで言語にmermaidを指定する
コードブロック
https://hexo.io/ja/docs/tag-plugins#コードブロック
- 構文
```[language] [title] [url] [link text]
code snippet
```Markdownの囲みコードブロック(バックティックコードブロック)構文の場合は追加オプションがない
{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}{% code [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcode %} highlight.js でサポートされている言語
https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md主な言語|エイリアス
:-|:-
Bash|bash, sh, zsh
DOS|dos, bat, cmd
Fish|無いのでshで代替
HTML, XML|xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
Ini, TOML|ini, toml
JavaScript|javascript, js, jsx
Lua|lua, pluto
Markdown|markdown, md, mkdown, mkd
OpenGL Shading Language|glsl
Plaintext|plaintext, txt, text
PowerShell|powershell, ps, ps1
Stylus|stylus, styl
TypeScript|typescript, ts, tsx, mts, cts
YAML|yml, yaml- 追加オプション
オプション|説明|デフォルト
:-|:-|:-
line_number|行番号を表示|true
line_threshold|コードブロックの行数がこの閾値を超える場合にのみ行番号を表示|0
highlight|コードのハイライトを有効にする|true
first_line|最初の行番号を指定|1
mark|コンマ区切りで指定された行をハイライト。 範囲指定にはハイフンを使用
例:mark:1,4-7,10は行1、4から7、10をマークします。 |
wrap|コードブロックを<table>でラップ|true
ヘッダなし表
HTMLでタグのオミットを駆使する
- 構文
<table>
<tr><td style="background: #f5f6f8"><b>URL<td><tt>https://www.shadertoy.com/view/XtlSD7
<tr><td style="background: #f5f6f8"><b>FILE<td><tt>$HOME/.config/ghostty/shaders/mario.glsl
</table>固定幅フォントにしたい場合は
<tt>タグを使う - 表示例
URL https://www.shadertoy.com/view/XtlSD7 FILE $HOME/.config/ghostty/shaders/mario.glsl
チェックボックス
- 構文
- [x] aaa
- [ ] bbb - 表示例
- [x] aaa
- [ ] bbb
引用
構文
> 引用
>> 引用の引用
> 引用表示例
引用
引用
引用
注記
- 構文
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %} 表示例 (class)
注記メッセージ (default)
注記メッセージ (primary)
注記メッセージ (info)
注記メッセージ (success)
注記メッセージ (warning)
注記メッセージ (danger)
表示例 (color、no-icon)
表示例 (icon: no-icon)
{% note no-icon %}
#### 見出し
注記メッセージ (指定なし)
{% endnote %}- 表示例 (color: blue, icon: ‘fas fa-bullhorn’, style: simple)
2021 is coming soon….
キーボード
- 構文
<kbd>F12</kbd>
- 表示例
F12
Google Charts
https://ktkr3d.github.io/2019/06/26/Hexo-Tag-Google-Charts/
ソート可能な表
- 構文
{% googlecharts Table 100% 100% %}
テーブル名
{"showRowNumber": true}
'Name', 'Salary', 'Full Time Employee'
'Mike', {v: 10000, f: '$10,000'}, true
'Jim', {v:8000, f: '$8,000'}, false
'Alice', {v: 12500, f: '$12,500'}, true
'Bob', {v: 7000, f: '$7,000'}, true
{% endgooglecharts %}テーブル名は表示されない。
- 表示例
- セル内の文字列の折り返しを許可する場合
表の直前に以下を追記<style>
.google-visualization-table-td:not(.google-visualization-table-seq) {
word-break: break-all; /* URLの途中でも強制的に改行させる */
}
</style>
バーチャート
- 構文
{% googlecharts BarChart 100% 100% %}
チャート名
{ "isStacked": true, "legend": {"position": "top" }}
'Name', 'EFI', 'Reserve', 'Win', 'Ubuntu', 'Recovery'
'出荷時', 10, 10, 447, 0, 10
'再構成', 10, 10, 365, 82, 10
{% endgooglecharts %}チャート名を設定しないと
No titleと表示される。不要な場合は半角空白を設定する。 - 表示例
Youtube動画の引用
- 構文
{% youtube nGdBKGPp-OE %}
- 表示例
Gistの引用
- 構文
{% gist 9add6d3f7a0ef4e4c488 timesync.sh %}
- 表示例
レンダリング抑止
- 構文
{% raw %}
content
{% endraw %}https://hexo.io/ja/docs/tag-plugins#Raw
記事の一部のコンテンツが処理中に問題を起こす場合、rawタグでラップしてレンダリングエラーを回避します。
emoji
https://www.webfx.com/tools/emoji-cheat-sheet/
- 使いそうなemoji 🙂⭐☂❤️🔥⚡⚽🎲🔔🔖✉✏️📝📋🔒💣🧰🔧💡🔍✅✔❌🚧❓
- 使うかもしれないemoji 😲💦👏🎉⚠⚙🏁🚩🍄🐟🍎🍓🍞🥚🍙🍦🎂🌏🏠🚂🚗🚚🚲✈⏰☀🌙☁🌈💧🏆🎵🎤🎧📞☎🛠❗🔴⚫⚪🔓🔎
サイトリンクカード
- Open Graph プロトコル対応の場合
{% link_preview ★URL★ %}
★URL★
{% endlink_preview %}https://toolsaday.com/seo/open-graph
URLがOpen Graphプロトコルに対応しているかチェックできます - Open Graph プロトコル非対応の場合
<a href="★URL★" target="_blank" rel="external nofollow noopener noreferrer" class="link-preview">
<div class="og-image">
<img src="★IMAGE URL★" alt="★TITLE★" class="not-gallery-item" loading="lazy"></div>
<div class="descriptions">
<div class="og-title">★TITLE★</div>
<div class="og-description">★DESCRIPTION★</div></div></a> - スタイル設定
./source/css/custom.css .link-preview {
display: block;
overflow: hidden;
position: relative;
margin: 1em 0 1em 0;
padding: 10px;
border: 1px #ccc solid;
}
.link-preview > .og-image {
float: left;
margin-right: 10px;
}
.link-preview > .og-image > img {
width: 125px;
margin: 0px;
}
.link-preview > .descriptions {
overflow: hidden;
}
.link-preview > .descriptions > .og-title {
overflow: hidden;
font-size: 1.2em;
font-weight: bold;
}
.link-preview > .descriptions > .og-description {
font-size: 0.86em;
margin-top: 0.2em;
}./_config.butterfly.yaml inject:
head:
- <link rel="stylesheet" href="/css/custom.css">
GitHub Card
nwtgck/gh-card
https://github.com/nwtgck/gh-cardリポジトリ
<div class="github-card" data-github="lepture/github-cards" data-width="100%"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>- ユーザ
<div class="github-card" data-github="lepture" data-width="100%"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
コメント
- HTMLを生成しない
[これはコメントです。]:#
[
これは
複数行の
コメントです。
]:# - HTMLを生成する
<!--
コメント
-->
その他
エラー対応
INFOメッセージが多くてエラーの内容がスクロールしてしまう場合
hexo generate --silent
Github側でJekyllがエラーとなる場合
touch source/.nojekyll
_config.yml deploy:
ignore_hidden: false # default is true
include:
- .nojekyll- deployで整合性エラーが発生した場合
.deploy_git/ ディレクトリを削除
ローカルサーバ
- ローカルサーバの実行を継続
hexo s & disown
Google Analytics向けカスタマイズ
- hexo serverの場合にはGoogle Analyticsのカウント対象外にする
./node_modules/hexo-theme-butterfly/layout/includes/head/analytics.pug -// if theme.google_analytics
if theme.google_analytics && env.env !== 'development'
script(async src=`https://www.googletagmanager.com/gtag/js?id=${theme.google_analytics}`)
script.
window.dataLayer = window.dataLayer || []
function gtag(){dataLayer.push(arguments)}
gtag('js', new Date())
gtag('config', '!{theme.google_analytics}')
btf.addGlobalFn('pjaxComplete', () => {
gtag('config', '!{theme.google_analytics}', {'page_path': window.location.pathname})
}, 'google_analytics')- developmentの実行例
hexo server
hexo generate
- productionの実行例 (fish shellの場合)
env NODE_ENV=production hexo server
env NODE_ENV=production hexo generate
- developmentの実行例
- abbr
以下を設定しておくとよいかもしれない。~/.config/fish/config.fish abbr hs 'hexo server & disown'
abbr hg 'env NODE_ENV=production hexo generate'
abbr hgd 'env NODE_ENV=production hexo generate -d'
abbr hgds 'env NODE_ENV=production hexo generate -d --silent'
Comments