RevealJSで作ったスライドページをwordpressに埋め込んでみた

Table of Content
警告 この記事の内容で生じた問題についてサポートは出来ませんし、責任も取れません。
そのため、実務レベルのスキルを持つユーザーを想定しています。予めご留意ください。
https://nomuraya.tk/slide/pure_markdown.html
スポンサードリンク

上記でデモスライドを確認できます。
以下のような内容を確認できればOKです。

お詫び

書いていて本項を追記しているのですが、対象読者の想定がかなり高くなってしまいました。
自分で言うのもなんですが、このwordpressもかなり変態的な運用をしています。
意味がわからない場合は、安易に真似しようとせず開発環境などを用意して自前の環境でやってみてください。

読者に求める技術スキル、または想定読者

  • 静的サイトホスティングの知識、運用経験がある
警告 本稿ではwordpressを静的サイト化する話はありません。
本稿はwordpressを静的サイト化した後の話になります。

今回は静的サイトの話が主になるので、wordpressの知識はなくても大丈夫です。
wordpressに外部URLを組み込む方法が分かれば同じ事ができますが、私はwordpressを動的サイトではなくサイトジェネレータとして使っているので、外部サイトの組み込み方は分かりません。

経緯

私はフリーランスエンジニアなので、案件を探す際はエージェントサービスに登録する事も多いのですが、登録項目がオリジナルのものが多すぎて対応が面倒なのでURL欄にポートフォリオサイトを登録するんですが、一元管理できないページだと、情報が古かったりして困るんですよね。
で、ポートフォリオの内容自体もブランクがありすぎて「最新のデータが欲しいです」と、至極尤もなご依頼をいただく事になります。
それで、再度こちらから連絡差し上げるというのが二度手間だと感じたので、これすらも解消する方法はないかな〜、と考えていました。

そこで、作ったのが上記のようなスライドページをwordpressに置くというものでした。

重要なのは、RevealJSで作ったスライドが置けるようになった事ではなく、Githubでホスティングしているリポジトリのデータをwordpressホスティングに組み込めるようになったこと

です。

見出しタイトルが長くなったんですが、これが言いたくて思わず執筆し始めたぐらいなので、少々長いですがご容赦いただきたく。
このスライドデータはwordpressとは無関係なので、wordpressリポジトリとは別管理をしています。
が、このスライドデータは(閲覧して欲しいものなので)公開環境においており、これをwordpressリポジトリのホスティングリポジトリに移動することで成立しています。
アーキテクトはこんな感じです。

このUMLはVSCodeで書いてます

処理フロー解説

基本的にCIで処理できます。
静的サイト(便宜的にpublicディレクトリ)にホスティングしたいファイルをhtmlで置けばいいだけです。
解説も何もないです。

ただし、この仕組みを作るのは大変です。
私はwordpressのリポジトリとは別にページ専用のHTMLファイル(今回はRevealJSで作成)を別の静的サイトジェネレータで作り、RevealJSのリポジトリをcloneしてHTMLファイルをpublicに格納することで実現しています。

CIソースコード(Github Actionsを使用)

# 実行しているリポジトリはwordpressにホスティングしたいファイルを格納したリポジトリを想定
- name: 他リポジトリで作成したスライドページをホスティングする
  env:
    OUTER_REPOSITORY: (git)
    WORDPRESS_HOSTING: (ホスティングディレクトリ)
  run: |
    git clone "${OUTER_REPOSITORY}" "${WORDPRESS_HOSTING}"

コードではこれだけですが、必要に応じて出力先を変えるか、予めcdするかmvしてください。
gitリポジトリの直下にhtmlが置いてある想定ですが、これも場合によりmvする必要があります。

シェアする