画像や CSS の参照を GitHub Pages に変更

この記事は以下の記事の GitHub から画像を参照する話の続きになります。

https://first-step-of-3930.blog.uttne.net/2022/03/blog-post_70.html

GitHub の画像を参照する方法を変更

記事にも書きましたがこのブログでは本文や画像などのデータを全て GitHub で管理する方向で整備を行っています。
このため、記事から参照する画像などは GitHub から取得する必要があり、そのための URL を Python で作成しています。
その URL は GitHub の Raw ファイルを参照するものなのですが以下の StackExchange によるとサービスの悪用と見られかねないらしいので GitHub の静的ホスティングサービスである GitHub Pages でレポジトリを公開し、画像や css を取得する方法に変えました。

CSS file from GitHub pages sent as text/plain, needs to be text/css - StackExchange

また、 GitHub Raw で css を取得しようとすると MIME タイプが text/css ではなく text/plain になってしまうので HTML の head に link を書いても読み込まれないという問題が発生したのでこれを解決するためにも GitHub Pages を使用しました。

やったこと

やったことは単純で以下の2つです。

  1. レポジトリを GitHub Pages で公開
  2. URL の生成部分で GitHub Pages の URL を生成するように変更

GitHub Pages でレポジトリを公開する方法は多くの方が説明してくれているのでここでは省きます。
公式ページにも丁寧な解説があるのでそちらをご確認することをお勧めします。
すでにあるレポジトリを公開する場合はこの GitHub Pages サイトの公開元を設定する - GitHub Docs から見るのがいいと思います。

URL を生成する部分の変更は raw.githubusercontent.com から uttne.github.io というドメインに変更したことと、パスに含まれていたコミットハッシュをなくした所が大きな変更点になります。(uttne の部分はそれぞれのアカウント名が入ります)
コミットハッシュを省くことができるので以下のようなシンプルな URL になりました。

https://uttne.github.io/blog/posts/00003-upload-images-test/test-image.png

同じファイルの元の GitHub Raw の URL は下のような感じです。

https://raw.githubusercontent.com/uttne/blog/3143021a9a16cb5a66b0125fdd6a77e86039cb87/posts/00003-upload-images-test/test-image.png

また、これで GitHub にコミットした css が参照できるようになったので Blogger のコードハイライトで使用する css の link を以下のように head に追加しました。

<head>
    <!-- ～～～～ここに他のコードがたくさん～～～～ -->
    <link href='https://uttne.github.io/blog/css/code-highlight.css' rel='stylesheet'/>
</head>

注意点

ただ GitHub Raw で参照をしていたときと違って以下のことを気を付ける必要があります。

  • 公開するパスは /(ルート) にする
  • GitHub Pages で公開するブランチに更新をマージする必要がある

ルートにするのは URL の生成が楽だからです。別に /docs でも構いませんがそれに合わせて URL の生成部分を修正する必要があります。

今公開しているブランチは main なので他のブランチで画像などをコミットした場合は必ず main にマージする必要があるので注意したいと思います。

変更場所

今回の変更は以下の PR になります。

https://github.com/uttne/blog/pull/5

コメント

コメントを投稿

このブログの人気の投稿

better-sqlite3 を AWS の Lambda で動かす

動かない... AWS の Lambda 上で Sqlite を動かしたいと思ったので試してみたが、素直に動かせなかったので動かせるようになるまでの記録を残しておく。 現象 nodejs で Sqlite を動かすために better-sqlite3 をインストールし、 AWS の Lambda にデプロイして実行すると以下のようなエラーが発生し実行ができなかった。 /lib64/libm.so.6: version `GLIBC_2.29' not found どうも nodejs 18 が動いている Amazon Linux 2 の /lib64/libm.so.6 に GLIBC_2.29 が入っていないが、 better-sqlite3 では 2.29 を使っているため実行エラーになってしまっている様子。 ちなみに Amazon Linux 2 の /lib64/libm.so.6 の確認は以下のように行った。 # Amazon Linux 2 のコンテナを起動 > docker run -it --rm --entrypoint "bash" public.ecr.aws/lambda/nodejs:18-x86_64 以下をコンテナ内で実行 > yum install binutils > strings /lib64/libm.so.6 | grep GLIBC_ GLIBC_2.2.5 GLIBC_2.4 GLIBC_2.15 GLIBC_2.18 GLIBC_2.23 GLIBC_2.24 GLIBC_2.25 GLIBC_2.26 GLIBC_PRIVATE GLIBC_2.15 ... 解決方法 AWS Lambda の nodejs 18.X ランタイムが動いている Amazon Linux 2 用に better-sqlite3 をビルドし直した。 ビルド方法 AWS Lambda nodejs 18.X の実行コンテナイメージは公開されているので、それを使ってビルドした。 今回対象としている better-sqlite3 のバージョンは 8.3.0。 Amazon Linux 2 が更新されない限り、これ以降のバージョンを使う場合で...
続きを読む

Python の oletools で日本語の VBA を出力する方法

VBA はどこにある? 以下の記事がとても参考になる。 実務であまり役に立たないVBAの内部の話 - Qiita マクロの実体は vbaProject.bin というバイナリファイルの中にあるらしく、これを解析すると VBA を取得することができる。 このファイルは Compound File Binary Format というファイル形式で仕様は効果されているらしい。 時間があるときに確認してみたい。 [MS-CFB]: Compound File Binary File Format oletools で VBA を出力する方法 vbaProject.bin を自分で解析して VBA を出力するのは大変なので oletools というライブラリを使用する。 このライブラリは olefile というパーサを使いやすくしたもの。 ただし、このライブラリで VBA を出力すると以下の記事にもあるように日本語は文字化けをしてしまう。 ExcelマクロのVBAソースコードをAzure DevOpsでバージョン管理する方法 この記事では extract_macros を自作することで対応をしていたが、以下のように bytes2str を置き換えることでも日本語することができた。 記述量も少なく手軽に実行できるので記事にしておく。 import os import oletools.olevba as vba # ------------------------------------------------------------------ # 定数 OUT_DIR = "./out" """出力するフォルダ""" # ------------------------------------------------------------------ # 日本語出力用の設定 def _bytes2str ( bytes_string : bytes , encoding = "utf-8" ): # ShiftJis でデコードする return bytes_strin...
続きを読む

Amazon Linux 2 に PostgreSQL をインストールする

Amazon Linux 2 に PostgreSQL をインストールして外部のクライアントからアクセスするまでを忘れないようにメモとして残しておく。 環境 AMI Amazon Linux 2 Kernel 5.10 AMI 2.0.20221004.0 x86_64 HVM gp2 インスタンスタイプ t3a.small ストレージ 16GB EC2内での手順 sudo amazon-linux-extras install -y postgresql14 sudo yum install -y postgresql-server postgresql-devel パッケージ 説明 postgresql-server initdb や pg_ctl などのユーティリティ postgresql-devel ヘッダや pg_config などの開発関連 export PGSETUP_INITDB_OPTIONS = "--encoding=UTF8 --locale=ja_JP.UTF-8 --lc-collate=ja_JP.UTF-8 --lc-ctype=ja_JP.UTF-8" オプション 説明 --encoding initdbでPostgreSQLクラスタのデフォルト文字セット(エンコーディング) --locale ロケールのサポートはアルファベット、並び換え、数字の書式など文化的嗜好を配慮したアプリケーションを対象にします。 --lc-collate 文字列の並び換え順 --lc-ctype 文字の分類（文字とはどんなもの？大文字小文字を区別しない？） sudo postgresql-setup --initdb sudo systemctl start postgresql.service sudo systemctl enable postgresql.service 以下のコマンドで PostgreSQL が実行されているかを確認できる。 systemctl status --no-pager postgresql.service インストールが完了すると...
続きを読む