新しい私の書く場所
GitHubでPublicリポジトリならホスティング費用なしで記事を配信できる。
そんなことも知らなかった。
とりあえず実験でやってみます。
解離性障害と診断された。
傷病名：解離性障害
仮想空間における出来事を客観的に捉えることが難しくなり、現実の生活が困難になっていると思われます。このため、SNSやネットでの集まりから離れ、自身の心身が健康な状態になることを最優先に過ごしてください。十分な睡眠と生活リズムを整え、軽い運動ができるような状態になることをまずは目指しましょう。以下余白。
【２０２６年３月１３日（金曜日）】
SNSやコミュニティ運営はもうしない
「汝、足るを知れ」とばかりの身の程知らずの診断書。
なので、今後は、SNS活動はせずに、小説かいたり、こうして一人の静かな日記を書いて過ごそう。
GitHubではPublicリポジトリなら無料でMkDocsでサイトを作れる。
知らなかった。
四苦八苦して作ったので誰でも使えるようシェアします。
Deploy_MkDocs.yml
| {リポジトリ}/.github/workflows/Deploy_MkDocs.yml |
|---|
| name: Deploy MkDocs Blog to GitHub Pages
on:
push:
branches:
- main
workflow_dispatch:
env:
FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: '3.x'
- name: Install dependencies
run: |
pip install mkdocs-material
pip install "mkdocs-material[blog]"
pip install mkdocs-rss-plugin
pip install mkdocs-glightbox
# 1. 物理ディレクトリの存在保証とCSS・JS生成
- name: Ensure src directory and generate CSS/JS
run: |
mkdir -p src/stylesheets
mkdir -p src/javascripts
mkdir -p src/img
mkdir -p src/assets
if [ ! -f "src/index.md" ]; then
echo "# ホーム" > src/index.md
fi
rm -f src/404.md
cat <<'EOF' > src/stylesheets/extra.css
/* 1. リンクとタイトルの太字化 */
.md-typeset a,
.md-nav__link,
.md-post__title a,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
font-weight: bold !important;
}
/* 2. ダークモード (slate) の配色強制 */
body[data-md-color-scheme="slate"] {
--md-typeset-a-color: #e0e0e0 !important;
--md-accent-fg-color: #e0e0e0 !important;
}
body[data-md-color-scheme="slate"] .md-typeset h1,
body[data-md-color-scheme="slate"] .md-typeset h2,
body[data-md-color-scheme="slate"] .md-typeset h3,
body[data-md-color-scheme="slate"] .md-typeset h4,
body[data-md-color-scheme="slate"] .md-typeset h5 {
color: #e0e0e0 !important;
}
/* 3. ライトモード (default) の配色強制 */
body[data-md-color-scheme="default"] {
--md-default-bg-color: #f5f5f5 !important;
--md-default-bg-color--light: #f5f5f5 !important;
--md-typeset-a-color: #212121 !important;
--md-accent-fg-color: #212121 !important;
}
body[data-md-color-scheme="default"] .md-typeset h1,
body[data-md-color-scheme="default"] .md-typeset h2,
body[data-md-color-scheme="default"] .md-typeset h3,
body[data-md-color-scheme="default"] .md-typeset h4,
body[data-md-color-scheme="default"] .md-typeset h5 {
color: #212121 !important;
}
/* 4. 詳細ページ内のリンク色を再適用 */
.md-content__inner .md-typeset a {
color: var(--md-typeset-a-color) !important;
}
/* 画像の最大高さを制限してサムネイルらしくする */
.md-typeset img {
max-height: 400px;
width: auto;
border-radius: 4px;
}
EOF
# ★ JSによるGLightboxの強制適用（Materialの遷移対応）
cat <<'EOF' > src/javascripts/zoom.js
document$.subscribe(function() {
document.querySelectorAll('.md-typeset img').forEach(function(img) {
if (img.parentElement.tagName === 'A') return;
var a = document.createElement('a');
a.className = 'glightbox';
a.href = img.src;
a.dataset.type = 'image';
img.parentNode.insertBefore(a, img);
a.appendChild(img);
});
if (typeof lightbox !== "undefined" && lightbox.reload) {
lightbox.reload();
}
});
EOF
# 2. カスタムテンプレートを生成
- name: Create overrides
run: |
mkdir -p overrides
cat <<'EOF' > overrides/main.html
{% extends "base.html" %}
{% block extrahead %}
{{ super() }}
<meta property="og:type" content="website" />
<meta property="og:title" content="{% if page and page.title %}{{ page.title }} - {% endif %}{{ config.site_name }}" />
<meta property="og:description" content="{{ config.site_description }}" />
<meta property="og:url" content="{{ config.site_url }}" />
<meta property="og:image" content="{{ config.site_url }}assets/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{% if page and page.title %}{{ page.title }} - {% endif %}{{ config.site_name }}" />
<meta name="twitter:image" content="{{ config.site_url }}assets/og-image.png" />
{% endblock %}
EOF
cat <<'EOF' > overrides/404.html
{% extends "base.html" %}
{% block extrahead %}
{{ super() }}
<base href="/ama/">
{% endblock %}
{% block content %}
<div align="center" style="margin-top: 4em;">
<p>
<img src="/ama/assets/logo.png" alt="Logo">
</p>
<h1 id="404-not-found">404 Not Found</h1>
<hr style="border: none; border-top: 1px solid #e0e0e0; margin: 2em 0;">
<p>
お探しのページは見つかりませんでした。<br>
URLが変更されたか、削除された可能性があります。
</p>
<hr style="border: none; border-top: 1px solid #e0e0e0; margin: 2em 0;">
<div style="margin-top: 2em;">
<a href="/ama/">ホームへ戻る</a>
</div>
</div>
{% endblock %}
EOF
# 3. mkdocs.yml を生成
- name: Create mkdocs.yml
run: |
TS=$(date +'%Y%m%d%H%M%S')
cat <<'EOF' > mkdocs.yml
site_name: 灰月琥珀 - Ash Moon Amber
site_url: https://ash-moon-amber.github.io/ama/
site_description: 琥珀の技術と日常の記録
repo_name: GitHub
repo_url: https://github.com/ash-moon-amber/ama
use_directory_urls: false
theme:
name: material
custom_dir: overrides
not_found_template: 404.html
language: ja
logo: assets/logo.png
favicon: assets/logo.png
palette:
- media: "(prefers-color-scheme: dark)"
scheme: slate
primary: black
accent: indigo
toggle:
icon: material/brightness-4
name: ダークモード
- media: "(prefers-color-scheme: light)"
scheme: default
primary: black
accent: indigo
toggle:
icon: material/brightness-5
name: ライトモード
features:
- navigation.tabs
- navigation.indexes
- navigation.sections
- toc.integrate
- content.code.copy
markdown_extensions:
- nl2br
- pymdownx.highlight:
anchor_linenums: true
line_spans: __span
pygments_lang_class: true
- pymdownx.inlinehilite
- pymdownx.snippets
- pymdownx.superfences:
custom_fences:
- name: mermaid
class: mermaid
format: !!python/name:pymdownx.superfences.fence_code_format
nav:
- Blog:
- index.md
- Tags: tags.md
- Profile: profile.md
extra_css:
- stylesheets/extra.css?v=TIMESTAMP_PLACEHOLDER
extra_javascript:
- javascripts/zoom.js?v=TIMESTAMP_PLACEHOLDER
plugins:
- blog:
blog_dir: .
post_dir: posts
draft_if_future: false
post_url_format: "{date}/{file}"
archive_url_date_format: yyyy/MM
archive_date_format: yyyy年MM月
- search
- glightbox:
touchNavigation: true
loop: false
effect: zoom
slide_effect: slide
- tags:
tags_file: tags.md
- rss:
match_path: posts/.*
docs_dir: src
site_dir: site
EOF
sed -i "s/TIMESTAMP_PLACEHOLDER/$TS/g" mkdocs.yml
# 4. ビルド実行
- name: Build MkDocs
run: mkdocs build
# 5. 公開ディレクトリ(public)の整理
- name: Prepare Public Directory
run: |
rm -rf public
mkdir -p public
if [ -d "site" ]; then
cp -r site/* public/
fi
if [ -d "src/stylesheets" ]; then
mkdir -p public/stylesheets
cp -r src/stylesheets/* public/stylesheets/
fi
if [ -d "src/javascripts" ]; then
mkdir -p public/javascripts
cp -r src/javascripts/* public/javascripts/
fi
if [ -d "src/img" ]; then
mkdir -p public/img
cp -r src/img/* public/img/
fi
if [ -d "src/assets" ]; then
mkdir -p public/assets
cp -r src/assets/* public/assets/
fi
if [ -f "site/404.html" ]; then
cp site/404.html public/404.html
fi
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: './public'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
|
ポイントは extra.css をランナー上で物理的に生成 の箇所です。
これをしないとMkDocsはテーマカラーをいくら指定してもAタグがIndigoになる。
それ以外は…仕様に従う、という普通の方式で作りました。
GitHub Actionsに登録されるので、Commitしたら自動で日記が更新されます。
SNS疲れたな…という人の参考になるといいなと思います。
Web版VSCodeのMarkdown執筆を静かにできるようにする
設定から「Markdownの検証」を無効化する
-
VSCodeの左下にある 歯車アイコン ＞ 設定
-
markdown.validate で検索
-
以下の項目のチェックをすべて外す
-
Markdown > Validate: Enabled
- Markdown > Validate: Unused Definitions（未使用の参照リンク警告）
- Markdown > Validate: Duplicate Link Definitions（重複リンク警告）
Markdown Lint 拡張機能を切る
| {リポジトリ}/.markdownlint.json |
|---|
| |