Mediumから自前のサイトへの無痛移行
Medium のコンテンツを Github Pages に移行する (Jekyll/Chirpy 使用)
背景
Medium を始めて4年目で、65本以上の記事を積み重ね、約1000時間以上の時間を費やしました。最初に Medium を選んだ理由は、シンプルで使いやすく、記事執筆に集中できるからです。以前は自分で Wordpress を立ててみましたが、環境設定やデザイン、プラグインの調整にばかり時間を取られ、なかなか満足のいく状態になりませんでした。調整が終わると読み込みが遅く、読者体験も良くなく、管理画面の執筆インターフェースも使いにくかったため、更新がほとんど止まってしまいました。
Mediumでの記事執筆が増え、ある程度のアクセスやフォロワーが集まると、成果を第三者プラットフォームに依存せず自分で管理したいと思うようになりました（例：Mediumが閉鎖すると全てが無駄になる）。そのため、一昨年からバックアップ用の第二のサイトを探し続けています。Mediumは引き続き運営しつつ、内容を自分で管理できるサイトにも同時に公開しています。当時見つけた解決策は — Google Site でしたが、正直なところ個人の「入口サイト」としてしか使えず、記事執筆のインターフェース機能が限られていて、全ての記事を移行するには不十分でした。
最終的に自分でホスティングする道を選びましたが、動的なサイト（例：wordpress）ではなく静的サイトを採用しました。機能は少ないですが、私が求めているのは記事作成機能とシンプルでカスタマイズ可能な快適な閲覧体験だけで、他は必要ありません！
静的サイトのワークフローは、ローカルで Markdown 形式で記事を書き、それを静的サイトジェネレーターで静的なウェブページに変換し、サーバーにアップロードするだけです。静的なウェブページなので、閲覧体験が高速です！
Markdown形式で執筆すると、記事がより多くのプラットフォームに対応できます。慣れていない場合は、オンラインやオフラインのMarkdownエディタを使ってみてください。Mediumで直接書くのと同じ感覚で使えます。
以上を総合すると、この方法は私が望むスムーズな閲覧体験と使いやすい執筆環境の両方を実現できます。
成果
-
カスタム表示スタイルをサポート
-
カスタムページの調整をサポート（例：広告やjsウィジェットの挿入）
-
カスタムページをサポート
-
カスタムドメインをサポート
-
静的ページの読み込みが高速で、閲覧体験が良好
-
Gitのバージョン管理を利用して、記事のすべての履歴バージョンを保存・復元可能
-
Mediumの記事を全自動で定期的にウェブサイトへ同期する方法
2025/01/18 アップデート 🎉🎉🎉
環境とツール
-
環境言語 ：Ruby
-
依存管理ツール ： RubyGems.org 、 Bundler
-
静的サイトエンジン ： Jekyll (Ruby ベース)
-
記事フォーマット ：Markdown
-
サーバー ： Github Page (無料、無制限のトラフィック/容量 静的サイトサーバー)
-
CI/CD ： Github Action（無料 2,000 分+/月）
-
Medium 記事を Markdown に変換するツール ： ZMediumToMarkdown (Ruby ベース)
-
バージョン管理 ： Git
-
(オプション) Git GUI ： Git Fork
-
(オプション) ドメインサービス ： Namecheap
Ruby のインストール
ここでは私の環境を例にしますが、他のOSやバージョンについては GoogleでRubyのインストール方法を検索 してください。
-
macOS Monterey 12.1
-
rbenv
-
ruby 2.6.5
Brew のインストール
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Terminal に以下のコマンドを入力して Brew をインストールします。
rbenv のインストール
brew install rbenv ruby-build
MacOS は Ruby が標準搭載されていますが、システムの Ruby と区別するために rbenv を使って別の Ruby をインストールすることをおすすめします。ターミナルで以下のコマンドを入力して rbenv をインストールしてください。
rbenv init
Terminal に上記のコマンドを入力して rbenv を初期化します
- ターミナルを閉じて再度開く。
Terminal に rbenv と入力して、インストールが成功したか確認してください！
成功！
rbenv を使って Ruby をインストールする
rbenv install 2.6.5
Terminal に以下のコマンドを入力して Ruby 2.6.5 バージョンをインストールします。
rbenv global 2.6.5
Terminal に上記のコマンドを入力して、Terminal で使用する Ruby バージョンをシステム標準のものから rbenv のバージョンに切り替えます。
Terminal に rbenv versions と入力して現在の設定を確認します：
Terminal に ruby -v と入力して現在の Ruby バージョンを確認し、gem -v で現在の RubyGems の状態を確認します：
*Ruby をインストールすると、通常は RubyGems もインストールされています。
成功！
Jekyll & Bundler & ZMediumToMarkdown のインストール
gem install jekyll bundler ZMediumToMarkdown
Terminal に以下のコマンドを入力して、Jekyll、Bundler、ZMediumToMarkdown をインストールします。
完了！
テンプレートから Jekyll ブログを作成する
デフォルトの Jekyll ブログのスタイルは非常にシンプルです。以下のサイトから好みのスタイルを見つけて適用できます：
インストール方法は一般的に gem-based themes を使用しますが、Forkでのインストールを提供するリポジトリもあります。さらにワンクリックインストールを提供する場合もあります。いずれにせよ、テンプレートごとにインストール方法が異なるため、テンプレートの説明を参照してください。
また、Github Pages にデプロイするため、公式ドキュメントによるとすべてのテンプレートが対応しているわけではない点に注意してください。
Chirpy テンプレート
ここでは私のブログで使用しているテンプレート Chirpy を例にします。このテンプレートは最も簡単なワンクリックインストール方法を提供しており、すぐに使えます。
他のテンプレートでは一括インストールのような機能が少ないため、JekyllやGithub Pagesに不慣れな場合は、まずこのテンプレートを使うのが入り口としておすすめです。今後機会があれば、他のテンプレートのインストール方法についても記事を更新します。
また、Github で直接 Fork できるテンプレートもあります（例：al-folio）ので、そのまま使うことも可能です。もし適したものがなければ、自分でテンプレートを手動インストールして Github Pages の設定を調べる必要があります。私も少し調べましたがうまくいかなかったので、結果が出たらまた記事で補足して共有します。
GitテンプレートからGitリポジトリを作成する
https://github.com/cotes2020/chirpy-starter/generate
-
リポジトリ名：
Githubアカウント/組織名.github.io（必ずこの形式を使用してください） -
必ず「Public」公開リポジトリを選択してください
「Create repository from template」をクリックしてください。
リポジトリの作成が完了しました。
Git Clone プロジェクト
git clone [email protected]:zhgchgli0718/zhgchgli0718.github.io.git
git clone 先ほど作成したリポジトリ。
bundle を実行して依存関係をインストールします：
bundle lock — add-platform x86_64-linux を実行してバージョンを固定する
サイト設定の変更
_config.yml 設定ファイルを開いて設定を行います：
# サイトの設定
# テーマのインポート
theme: jekyll-theme-chirpy
# サイトタイプがGitHub Pagesのプロジェクトサイトで、
# カスタムドメインを持っていない場合のみ、次の値を'/PROJECT_NAME'に変更してください。
# baseurl: ''
# ウェブページの言語 › http://www.lingoes.net/en/translator/langcode.htm
# `_data/locales`フォルダ内のファイル名と同じ場合、レイアウトの言語も変更されます。
# それ以外の場合、レイアウト言語はデフォルトの'en'が使用されます。
lang: en
# 日時のローカライズ用の追加パラメータ、任意 › https://github.com/iamkun/dayjs/tree/dev/src/locale
prefer_datetime_locale:
# タイムゾーンを設定 › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
timezone:
# jekyll-seo-tag設定 › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
# ↓ --------------------------
title: ZhgChgLi # メインタイトル
tagline: Live a life you will remember. # サブタイトルとして表示されます
description: >- # SEOメタやAtomフィードで使用
ZhgChgLi iOS Developer 求知若渴 教學相長 更愛電影/美劇/西音/運動/生活
# サイトのプロトコルとホスト名を入力してください。例：'https://username.github.io'
url: 'https://zhgchg.li'
github:
username: ZhgChgLi # GitHubユーザー名に変更してください
twitter:
username: zhgchgli # Twitterユーザー名に変更してください
social:
# フルネームに変更してください。
# 投稿のデフォルト著者名とフッターの著作権者として表示されます。
name: ZhgChgLi
email: [email protected] # メールアドレスに変更してください
links:
- https://medium.com/@zhgchgli
- https://github.com/ZhgChgLi
- https://www.linkedin.com/in/zhgchgli
google_site_verification: # 検証文字列を入力してください
# ↑ --------------------------
# `jekyll-seo-tag`設定の終了
google_analytics:
id: G-6WZJENT8WR # Google Analytics IDを入力してください
# Google Analyticsのページビュー設定
pv:
proxy_endpoint: # Google App EngineのGoogle Analytics superProxyエンドポイントを入力
cache_path: # GFW地域の訪問者に優しいローカルPVキャッシュデータ
# カラースキームの優先設定。
#
# 空欄の場合はシステムの設定に従い、
# サイドバー左下にダーク・ライトテーマ切替トグルが表示されます。
#
# 利用可能なオプション：
#
# light - ライトカラースキームを使用
# dark - ダークカラースキームを使用
#
theme_mode: # [light\\|dark]
# 画像のCDNエンドポイント。
# これを設定すると、すべての画像（サイトのアバターや投稿画像）のパスの先頭にCDN URLが追加されます。
#
# 例：'https://cdn.com'
img_cdn:
# サイドバーのアバター、ローカルまたはCORSリソースをサポート
avatar: '/assets/images/zhgchgli.jpg'
# boolean型、投稿の目次(ToC)のグローバルスイッチ
toc: true
comments:
active: disqus # 投稿コメントのグローバルスイッチ。'disqus'など。空欄は無効化
# 利用可能なオプション：
disqus:
shortname: zhgchgli # Disqusのショートネームを入力 › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
# utterances設定 › https://utteranc.es/
utterances:
repo: # <gh-username>/<repo>
issue_term: # < url \\| pathname \\| title \\| ...>
# Giscusオプション › https://giscus.app
giscus:
repo: # <gh-username>/<repo>
repo_id:
category:
category_id:
mapping: # 任意、デフォルトは'pathname'
input_position: # 任意、デフォルトは'bottom'
lang: # 任意、デフォルトは`site.lang`の値
# 自ホストの静的アセット、任意 › https://github.com/cotes2020/chirpy-static-assets
assets:
self_host:
enabled: # boolean、空欄はfalse
# Jekyll環境を指定、空欄は両方対象
# `assets.self_host.enabled`が'true'の場合のみ有効
env: # [development\\|production]
paginate: 10
# ------------ 以下のオプションは変更しないことを推奨 ------------------
kramdown:
syntax_highlighter: rouge
syntax_highlighter_opts: # Rougeオプション › https://github.com/jneen/rouge#full-options
css_class: highlight
# default_lang: console
span:
line_numbers: false
block:
line_numbers: true
start_line: 1
collections:
tabs:
output: true
sort_by: order
defaults:
- scope:
path: '' # 空文字はプロジェクト内のすべてのファイルを意味します
type: posts
values:
layout: post
comments: true # 投稿でコメントを有効化
toc: true # 投稿で目次カラムを表示
# 以下のパラメータは自信がある場合のみ変更してください。
# プロジェクト内の他の投稿リンクのコードも更新する必要があります。
permalink: /posts/:title/
- scope:
path: _drafts
values:
comments: false
- scope:
path: ''
type: tabs # `site.collections`参照
values:
layout: page
permalink: /:title/
- scope:
path: assets/img/favicons
values:
swcache: true
- scope:
path: assets/js/dist
values:
swcache: true
sass:
style: compressed
compress_html:
clippings: all
comments: all
endings: all
profile: false
blanklines: false
ignore:
envs: [development]
exclude:
- '*.gem'
- '*.gemspec'
- tools
- README.md
- LICENSE
- gulpfile.js
- node_modules
- package*.json
jekyll-archives:
enabled: [categories, tags]
layouts:
category: category
tag: tag
permalinks:
tag: /tags/:name/
category: /categories/:name/
設定をコメントに従ってご自身の内容に置き換えてください。
⚠️ _config.yml を変更した場合は、ローカルサイトを再起動する必要があります！そうしないと変更が反映されません。
サイトのプレビュー
依存関係のインストールが完了したら、
bundle exec jekyll s を実行してローカルサイトを起動できます：
ブラウザに http://127.0.0.1:4000/ のURLをコピーして開いてください。
ローカルプレビュー成功！
この Terminal を開いたままにすると、ローカルサイトも開いたままになります。Terminal はサイトのアクセスログを継続的に更新し、デバッグを容易にします。
新しいターミナルを開いて、他の操作を続けることができます。
Jeklly ディレクトリ構造
テンプレートによってフォルダや設定ファイルが異なる場合があります。記事のディレクトリは：
-
_posts/ ：記事はこのディレクトリに置きます
記事ファイルの命名規則：YYYY–MM–DD-記事ファイル名.md -
assets/ ：
サイトのリソースディレクトリで、サイトで使用する画像や記事内の画像はすべてここに置きます。
他のディレクトリ _includes、_layouts、_sites、_tabs… はすべて高度な拡張やカスタマイズが可能です。
Jekyll はページテンプレートエンジンとして Liquid を使用しており、ページテンプレートは継承のような形で構成されています：
ユーザーは自由にページをカスタマイズできます。エンジンはまずユーザーが対応するページのカスタムファイルを作成しているか確認し、なければテンプレートにあるかを確認し、それもなければ元の Jekyll スタイルで表示します。
なので、対応するディレクトリに同じファイル名で作成するだけで、どのページでも簡単にカスタマイズできます！
記事の作成/編集
- まずは
_posts/ディレクトリ内のサンプル記事ファイルをすべて削除しましょう。
Visual Code（無料）またはTypora（有料）を使って Markdown ファイルを作成します。ここではVisual Codeを例に説明します：
-
記事ファイルの命名規則：
YYYY–MM–DD-記事ファイル名.md -
ファイル名は英語にすることをおすすめします（SEO対策のため）。この名前がURLのパスになります。
文章 内容トップのメタ ：
---
layout: post
title: "安安"
description: ZhgChgLi の最初の記事
date: 2022-07-16 10:03:36 +0800
categories: Jeklly Life
author: ZhgChgLi
tags: [ios]
---
-
layout: post
-
title: 記事タイトル (og:title)
-
description: 記事の説明 (og:description)
-
date: 記事の公開日時（未来の日付は不可）
-
author: 作者 (meta:author)
-
tags: タグ（複数可）
-
categories: カテゴリ（単一、スペースで区切ってサブカテゴリを指定
Jeklly Life→ Jeklly フォルダ内の Life フォルダ）
請提供您要翻譯的 Markdown 文章段落內容，謝謝。
Markdown 形式で執筆する：
---
layout: post
title: "安安"
description: ZhgChgLi の最初の記事
date: 2022-07-16 10:03:36 +0800
categories: Jeklly Life
author: ZhgChgLi
tags: [ios]
---
# HiHi!
こんにちは
私は **ZhgChgLi** です
画像：
{: loading="lazy" decoding="async" width="1200" height="800" lqip="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjgwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2VkZTJjZiIvPjwvc3ZnPg==" }
> _ご質問やご意見があれば [こちらからご連絡](https://www.zhgchg.li/contact) ください。_
成果：
⚠️ 記事の編集はサイトの再起動が不要で、ファイルを変更するとすぐにレンダリングされます。しばらく経っても変更が反映されない場合は、記事のフォーマットに誤りがありレンダリングに失敗している可能性があるため、Terminalで原因を確認してください。
Mediumから記事をダウンロードしてMarkdownに変換し、Jekyllに入れる
基本的な Jekyll の知識が身についたら、次に進みましょう。ZMediumToMarkdown ツールを使って、Medium サイトにある既存の記事をダウンロードし、Markdown 形式に変換して Blog フォルダに保存します。
cd を blog ディレクトリに移動した後、以下のコマンドで Medium の該当ユーザーのすべての記事をダウンロードします：
ZMediumToMarkdown -j あなたの Medium アカウント
すべての記事のダウンロードが完了するのを待っています。。。
ダウンロードに問題やエラーが発生した場合は、遠慮なく ご連絡ください。このダウンローダーは私が作成したもので（開発の思い）、最も速く直接的に問題を解決できます。
ダウンロードが完了したら、ローカルサイトに戻って成果をプレビューできます。
完成！！私たちは無痛で Medium の記事を Jekyll に移行しました！
記事のレイアウト崩れや画像の欠損がないかご確認ください。もしあれば、こちらからご報告ください 修正にご協力いただけると助かります。
リポジトリへのコンテンツアップロード
ローカルでのプレビューに問題がなければ、内容を Github リポジトリにプッシュします。
以下の順番で Git コマンドを操作してください：
git add .
git commit -m "投稿を更新"
git push
Push 完了後、Github に戻ると、Actions で CD が再度実行されているのが確認できます：
約5分待ちます…
デプロイ完了！
初回デプロイ完了後の設定
初回デプロイ完了後、以下の設定を変更してください：
そうしないと、サイトにアクセスした際に以下のように表示されます：
--- layout: home # インデックスページ ---
「保存」してもすぐには反映されず、「Actions」ページに戻って再度デプロイを待つ必要があります。
再デプロイが完了すると、無事にサイトにアクセスできるようになります：
Demo -> zhgchg.li
今すぐ無料の Jekyll 個人ブログを持つことができます！！
デプロイについて
毎回 Repo に内容を Push すると再デプロイがトリガーされ、デプロイが成功するまで変更は実際に反映されません。
カスタムドメインの設定
もし zhgchgli0718.github.io の Github アドレスが気に入らなければ、Namecheap でお好きなドメインを購入するか、Dot.tk で無料の .tk ドメインを登録できます。
ドメインを購入したら、ドメインの管理画面にアクセスします：
以下の4つのType Aレコードを追加してください
Aレコード @ 185.199.108.153
Aレコード @ 185.199.109.153
Aレコード @ 185.199.110.153
Aレコード @ 185.199.111.153
ドメインの管理画面で設定を追加したら、GithubリポジトリのSettingsに戻ります：
Custom domain の欄にあなたのドメインを入力し、「Save」を押してください。
DNS が通った後、zhgchg.li を使って元の github.io の URL を置き換えることができます。
⚠️ DNS設定の反映には最低5分から72時間かかることがあります。認証が通らない場合は、しばらく時間を置いてから再度お試しください。
クラウド、完全自動の Medium 同期機能
新しい記事があるたびに、パソコンで手動で ZMediumToMarkdown を実行してからプロジェクトにプッシュするのは面倒ですか？
ZMediumToMarkdown は実は便利な Github Action 機能 も提供しており、パソコンを使わずに完全自動で Medium の記事をあなたのサイトに同期できます。
Repo の Actions 設定へ移動：
「New workflow」をクリックしてください
「set up a workflow yourself」をクリックしてください
-
ファイル名を
ZMediumToMarkdown.ymlに変更してください。 -
翻訳したいMarkdownの内容を提供してください。ルールに従って日本語に翻訳します。
name: ZMediumToMarkdown
on:
workflow_dispatch:
schedule:
- cron: "10 1 15 * *" # 毎月15日の01:10に実行。
jobs:
ZMediumToMarkdown:
runs-on: ubuntu-latest
steps:
- name: ZMediumToMarkdown 自動ボット
uses: ZhgChgLi/ZMediumToMarkdown@main
with:
command: '-j 你的 Meidum 帳號'
-
cron : 実行周期の設定（毎週？毎月？毎日？）、ここでは毎月15日の午前1時15分に自動実行するよう設定しています
-
command: -j の後にあなたの Medium アカウントを入力してください
右上の「Start commit」->「Commit new file」をクリックしてください。
Github Action の作成が完了しました。
作成が完了すると、Actions に ZMediumToMarkdown Action が表示されます。
時間による自動実行のほかに、以下の手順で手動トリガーして実行することもできます：
Actions -> ZMediumToMarkdown -> Run workflow -> Run workflow。
実行すると、ZMediumToMarkdown は Github Action のマシンを使って Medium の記事をリポジトリに同期するスクリプトを直接実行します：
実行後、同様に再デプロイがトリガーされ、再デプロイ完了後にサイトに最新の内容が表示されます。🚀
完全に手動操作は不要です！つまり、今後も Medium の記事を更新し続ければ、スクリプトが自動でクラウドからあなたのサイトへ内容を同期してくれます！
私のブログリポジトリ
Post Mediumから変換されたもの by ZMediumToMarkdown.
コメント