nikkie-ftnextの日記

イベントレポートや読書メモを発信

LT報告 | PyLadies Tokyoの8周年記念オンラインパーティにて、Sphinxでランディングページを作って得た知見を8つ共有してお祝いしました #PyLadiesTokyo

登壇報告 Sphinx

はじめに

飾り帯の意が強ければ、斧とて飾り帯に砕けることもあろう。1 nikkieです。

Sphinxでランディングページを作って得た知見を、1ヶ月ほど前（11/19(金)）にLTしました。
実はこのひと月の間、そのLTに関連して執筆したエントリがいくつかあったんです！
この記事でLT報告、そして、一連の記事を編み上げます。

目次

勉強会の概要

PyLadies Tokyo - 8周年記念オンラインパーティ - connpass

この10月でPyLadies Tokyoは最初のMeetup開催から丸8年を迎えます。
設立8周年をみんなでお祝いするために、オンラインで8周年記念パーティーを開催します！

本イベントは女性男性問わずオールジェンダーで参加できます！

周年パーティはオールジェンダー参加できます！
4周年パーティ以来の参加となりました。

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

8周年に合わせて8つの知見を共有しています。
5分で8項目を盛り込んだら、それぞれの詳細は当然話せないので、後日エントリで補強したのです！

  1. Sphinxでボタン
  2. Sphinxでカードの並び
  3. Alabasterテーマのスタイル変更
  4. Sphinx拡張を自作して、h1・h2タグを中央寄せ
  5. CSVファイルを元に人数表を作るディレクティブを自作
  6. 外部へのリンクをブラウザの新しいタブで開くために、自作拡張sphinx-new-tab-link
  7. sphinx.ext.githubpagesがGitHub Pagesでの公開をサポート
  8. make singlehtml利用

こちらのランディングページはSphinx製です！

Python Boot Campのランディングページ（HTML）はSphinxでreStructuredTextから変換しています！

ソースコードはこちら

よろしければランディングページをお手元で触ってみてください。

それでは行ってみましょう！

1️⃣&2️⃣ sphinx-designでボタンやカード！

sphinx-designのおかげでめちゃ表現力上がりました！

3️⃣ Alabasterテーマのスタイル変更

めっちゃ簡単ですよ！

4️⃣ Sphinx拡張を自作して、h1・h2タグを中央寄せ

これはブログのエントリとしてはまだ書いていません。
ソースコードはこちらです。

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

CSVファイルの行追加を反映できるように実装したことで、「nikkie以外でも更新できる」が達成できて満足しています

簡単に使えるようにしたので、試してみてください！
いいなと思った方はリポジトリにスターもください！！

7️⃣ sphinx.ext.githubpagesがGitHub Pagesでの公開をサポート

Sphinxと一緒に配布される拡張sphinx.ext.githubpages、いぶし銀すぎてもう大好きです。
今回のランディングページの他、sphinx-revealjs製スライドもGitHub Pagesで公開しているので、もう手放せないですね〜

8️⃣ make singlehtml

ランディングページにはうってつけでした！

終わりに

過去エントリも使って、PyLadies Tokyo 8周年記念パーティでのLT「Sphinxで作るランディングページ」の報告でした。

Sphinxはランディングページも作れます！
ドキュメントも作れるし、スライドもランディングページも！
Sphinxすごすぎますね。

得た知見は、例えば、自分の発表スライドの一覧ページにも試してみようと思っています。
よければ一緒にSphinxでランディングページ作りませんか？

P.S. 「一話完結じゃない一話完結」

今回の記事のような過去のエントリを編み上げるスタイルは、私は初めてだと思います。
実はid:thinkamiさんのブログで目の当たりにしまして、「一連のアウトプットがここにつながるのか〜！！」👏👏👏とめちゃめちゃうならされたので、自分もやってみたいな〜と思っています。

そんな中、個人的に使ってみたかったGoogle Cloudで動かせるか気になったので、必要な機能を検証してみました。

『バクマン。』の「一話完結じゃない一話完結」みたいなアウトプットの仕方だなと憧れています。

  1. こちらのカードのフレーバーテキストです。編み上げ直し｜カードギャラリー｜マジック：ザ・ギャザリング 日本公式ウェブサイト↩