MediumからGithub Pagesへ無痛転送｜JekyllとChirpyで簡単サイト構築

Mediumから自前のサイトへのスムーズな移行

Medium のコンテンツを Github Pages に移行する（Jekyll/Chirpy 使用）

zhgchg.li

背景

Medium を運営して4年目で、65本以上の記事と約1000時間以上の労力を費やしました。当初 Medium を選んだ理由は、シンプルで使いやすく、記事執筆に集中できるからです。以前は自分で Wordpress を構築しようとしましたが、環境設定やスタイル、プラグインの調整に時間を取られ、どれだけ調整しても満足できませんでした。調整後も読み込みが遅く、読書体験が悪く、管理画面の執筆インターフェースも使いにくかったため、更新がほとんど止まってしまいました。

Mediumでの記事執筆が増え、ある程度のアクセスやフォロワーが集まるようになると、第三者プラットフォームに依存せず自分で成果を管理したいと考えるようになりました（例：Mediumが閉鎖すると苦労が水の泡になるため）。そこで一昨年からバックアップ用の第二のサイトを探し続けています。Mediumは引き続き運営しますが、内容は自分で管理できるサイトにも同時に公開するつもりです。当時見つけた解決策は — Google Site ですが、正直なところ個人の「入口サイト」としてしか使えず、記事執筆の機能が限られていて、全ての記事を本格的に移行することはできませんでした。

最終的に自分で構築する道を選びましたが、動的なサイト（例：wordpress）ではなく、静的サイトを採用しました。機能は少ないですが、私が求めているのは記事作成機能とシンプルでカスタマイズ可能な快適な閲覧体験だけで、他は必要ありません！

静的サイトのワークフローは以下の通りです：ローカルで Markdown 形式で記事を書き、それを静的サイトジェネレーターで静的なウェブページに変換し、サーバーにアップロードして完了します；静的なウェブページは閲覧体験が高速です！

Markdown 形式で執筆すると、記事がより多くのプラットフォームに対応できます。慣れていない場合は、オンラインやオフラインの Markdown 作成ツールを使ってみてください。Medium で直接書くのと同じ感覚で使えます。

総合すると、この方法はスムーズな閲覧体験と使いやすい執筆環境という二つの要件を満たすことができます。

成果

zhgchg.li

カスタム表示スタイルをサポート
カスタムページの調整をサポート（例：広告や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 を標準で搭載していますが、rbenv を使って別の Ruby をインストールし、システム標準のものと分けることをおすすめします。ターミナルで以下のコマンドを入力して rbenv をインストールしてください。

rbenv init

Terminal に以下のコマンドを入力して rbenv を初期化する

Terminal を閉じて再度開く。

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

Repository name： Githubアカウント/組織名.github.io ( 必ずこの形式を使用してください )
必ず「Public」公開リポジトリを選択してください

「Create repository from template」をクリックしてください

Repo の作成を完了しました。

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:       # ローカルのPVキャッシュデータ、GFW地域の訪問者に優しい

# カラースキームの優先設定。
#
# 空欄の場合はシステムのプリファレンスに従い、
# サイドバー左下にダーク・ライトテーマ切替のトグルが表示されます。
#
# 利用可能なオプション：
#
#     light  - ライトカラースキームを使用
#     dark   - ダークカラースキームを使用
#
theme_mode:   # [light\\|dark]

# 画像のCDNエンドポイント。
# 一度設定すると、CDN URLは '/' で始まるすべての画像（サイトアバターや投稿画像）パスに追加されます。
#
# 例： 'https://cdn.com'
img_cdn:

# サイドバーのアバター、ローカルまたはCORSリソースをサポート
avatar: '/assets/images/zhgchgli.jpg'

# ブール型、投稿の目次（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:      # ブール型、空欄は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をコピーしてブラウザに貼り付けて開いてください

ローカルプレビュー成功！

このターミナルを開いたままにしておくと、ローカルサイトも起動し続けます。ターミナルはサイトのアクセスログをリアルタイムで更新し、デバッグに便利です。

新しいターミナルを開いて、続けて他の操作を行いましょう。

Jekyll ディレクトリ構造

依照テンプレートによって異なるフォルダや設定ファイルがありますが、記事のディレクトリは：

_posts/ ：記事はこのディレクトリに置きます
記事ファイルの命名規則： YYYY – MM – DD - 記事ファイル名 .md
assets/ ：
サイトのリソースディレクトリで、サイトで使用する画像や記事内の画像はすべてここに配置します。

その他のディレクトリ _includes、_layouts、_sites、_tabs… は高度な拡張や修正に使用できます。

Jeklly はページテンプレートエンジンとして 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テキストを送ってください。

Markdown 形式で記述する：

---
layout: post
title:  "安安"
description: ZhgChgLi の最初の記事
date:   2022-07-16 10:03:36 +0800
categories: Jeklly Life
author: ZhgChgLi
tags: [ios]
---
# HiHi!
こんにちは
私は **ZhgChgLi** です
画像：
![](/assets/post_images/DSC_2297.jpg){: 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に取り込みました！

記事のレイアウト崩れや画像の欠損がないかご確認ください。もしあれば、ぜひこちらにご報告ください。修正をお手伝いいたします。

Repoへのコンテンツのアップロード

ローカルでプレビュー内容に問題がなければ、内容を Github リポジトリにプッシュしましょう。

以下の Git コマンドを順番に実行してください：

git add .
git commit -m "update post"
git push

Push 完了後、Github に戻ると、Actions に CD が再度実行されているのが見えます：

約5分待ちます…

デプロイ完了！

初回デプロイ完了設定

初回デプロイ完了後、以下の設定を変更してください：

そうしないと、サイトにアクセスすると以下のように表示されます：

--- layout: home # インデックスページ ---

「Save」後すぐには反映されず、「Actions」ページに戻って再度デプロイの完了を待つ必要があります。

再デプロイが完了したら、無事にサイトにアクセスできます：

Demo -> zhgchg.li

今すぐ無料の Jekyll 個人ブログを持つことができます！！

デプロイについて

毎回リポジトリにプッシュすると再デプロイがトリガーされ、デプロイが成功するまで変更は実際に反映されません。

カスタムドメインの設定

もし 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
ファイル内容は以下の通りです：

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 は ZMediumToMarkdown によって Medium から変換されました。