Sphinxで作るランディングページ

本編：この話をします

#pyconjp
Python Boot Campのページ（静的なHTML）は
実は今年にっきーがSphinxに移行しました✌️（GitHub Pagesでサーブ）https://t.co/0QTfwXGxBh

📣なんとSphinxでLPが作れちゃうんです！

— nikkie にっきー 🎤10/1 XP祭り 10/14-15 PyCon JP (@ftnext) October 15, 2022

お手元で触りながら聞くのがオススメです

https://pycamp-lp.pycon.jp/

Python Boot Camp (#pycamp)

• 日本各地での初心者向けPythonチュートリアルイベント

• 詳しくは https://www.pycon.jp/support/bootcamp.html

• 概要を伝える ランディングページ がある

pycampのランディングページについて相談

ペライチの仕様が3月28日から変更になり、無料プランは累計10,000PVを超えると有料プランへの切り替えが必要になった（切り替えないとページが強制的に非公開になる）。

2022/03 一般社団法人PyCon JP Association運営会議#52

手を挙げたnikkie氏🙋‍♂️「まかせて！」

Sphinxを使ってGitHub Pagesに移すなら、個人的な型があるので、私はやってみたいです (nikkie

ドキュメント変換ツール Sphinx

あるルールに従って記述されたテキストファイルを、HTMLやPDFなどの形式に変換する

📖『Sphinxをはじめよう 第3版』（1章）

reSTで書いたテキストファイル

• 「あるルール」の例：reST (reStructuredText)

• reSTはマークアップ言語で、テキストのままでも読みやすい（『Sphinxをはじめよう 第3版』1.2）

========================================
すごいランディングページ
========================================

Sphinxで作っています
========================================

* Sphinxはドキュメント変換ツール
* reSTからHTMLへの変換を使っています

reSTをHTMLに変換

$ make html

ブラウザでHTMLを開く

HTMLをWebに公開

• reSTから変換したHTMLは、静的サイトホスティングサービスを使ってWebに公開できる

• 今回のランディングページの例では GitHub Pages を使用

• GitHub Pages用のブランチにHTML一式をpushする

ランディングページのこの要素、Sphinxでもできるんですか？

ランディングページにはあるけど、ドキュメントではあまり見かけないモノたち

ボタン

カードの並び

sphinx_design も使ってできます！

https://github.com/executablebooks/sphinx-design

1️⃣🎂ボタンできます！

.. button-link:: https://docs.google.com/forms/d/1IANh21fievi_lyyQyL8II66RSxlVuHBdAhr05C1qv9c/viewform
    :align: center
    :class: sd-rounded-pill sd-px-4

    問い合わせる

https://sphinx-design.readthedocs.io/en/furo-theme/badges_buttons.html#buttons

2️⃣🎂カードの並びもできます！

.. grid:: 1 1 2 3

    .. grid-item-card:: `@pyohei <https://github.com/pyohei>`_
        :img-top: _static/impressions/pyohei.jpg
        :class-header: sd-text-center
        :class-title: sd-text-center sd-fs-3

        運営スタッフ
        ^^^
        運営スタッフとしてPythonを学ぶ方たちのサポートができ、やりがいと充実感を感じました。

https://sphinx-design.readthedocs.io/en/furo-theme/grids.html#placing-a-card-in-a-grid

2️⃣🎂カードの並びもできます！

Sphinxのデフォルトテーマ Alabaster、存在感ある

3️⃣🎂Alabasterは 簡単にスタイル変更 できます！

html_theme = 'alabaster'
html_theme_options = {
    "font_family": "sans-serif",
    "font_size": "16px",
    "link": "#4EBBE2",
}

https://alabaster.readthedocs.io/en/latest/customization.html#fonts

Alabasterと言われても気づかないのでは？

h1, h2の中央寄せ

4️⃣🎂拡張を自作（リポジトリ内にモジュールとして配置）

• Sphinxのイベントの1つ doctree-resolved （ドキュメント）

  • 入力したテキストファイルを 木 構造(doctree)に変えたとき

• 木をたどって、HTMLでh1, h2にあたる要素に sd-text-center クラスを付与

  • sphinx-designが提供する 中央揃え のクラス

容易に更新できる、参加人数の表

要件：容易に表に行追加できる

• 時間とともにpycampの 開催数は増える （connpassのイベント一覧）

• 実装に精通していなくても、参加人数の表を 更新 できるよう容易にするべきと考えた

  • nikkieに毎回更新を頼む形は避けたい

現状： CSVファイルに列の追加だけ していただく

開催地,URL,参加人数
静岡県沼津市,https://pyconjp.connpass.com/event/251468/,一般参加8人、学生3人
新潟2nd,https://pyconjp.connpass.com/event/255600/,一般参加10人、学生5人

GitHubリポジトリに記載した手順

5️⃣🎂CSVファイルを元に人数表を作るディレクティブを自作

class EventHistoryCSVTable(CSVTable):
    ...

def setup(app):
    app.add_directive("event-history-csv-table", EventHistoryCSVTable)

• 開催地にリンクのマークアップ をした上で、参加人数と合わせて CSVTable に渡す実装（CSVテーブルディレクティブ）

• CSVファイルに「開催地,URL,参加人数」だけ追加しさえすれば、後はコードが責務を果たす

外部へのリンクをブラウザの新しいタブで開く

（少なくとも私は）ランディングページの説明とそこからのリンクを タブを切り替えて行き来 したい

6️⃣🎂自作拡張 sphinx-new-tab-link （公開済み）

pip install sphinx-new-tab-link

extensions = [
    "sphinx_new_tab_link",
]

詳しくは SphinxでビルドしたHTMLの中の外部リンクを、ブラウザの新しいタブで開くように設定する拡張 sphinx-new-tab-link を公開しました！🎉

まとめ🌯 Sphinxで作るランディングページ

• https://pycamp-lp.pycon.jp/ はSphinxとGitHub Pagesでできています

• ランディングページに必要な要素（ボタンやカード）は sphinx_design で

• Sphinx拡張を自作 して、ランディングページの細かい要素を実現

ご清聴ありがとうございました！

• 地方でPythonイベントを開催してみたい方、pycampいかがですか？（コアスタッフの方のブログ）

• 参考にランディングページ作りたい方、困ったらお気軽に @ftnext をお呼びください！