背景

前回はDjangoアプリをGithub経由でHerokuにアップしてインターネットから見れるようにしました。せっかくインターネットで使えるなら、使いやすい様にUIもカスタマイズ出来る様にしたいです。

前回の投稿
GitHubとHerokuを連携してDjangoアプリをデプロイする（2022.3.15）

なお、説明や用語の使い方が間違っている事がありましたら、優しく教えて頂けると嬉しいです。その割に説明はいろいろ飛ばしているので、初心者には向かないものになっています。ただ、大雑把にどのようにするかは分かると思いますので取っ掛かりになれば幸いです。

目的

CSSを使って、見た目をカスタマイズしたいです。

方法

簡単な手順は

Djangoアプリを作る
サーバー環境で動くように調整する
デプロイする

になります。ほとんど前回と同じですので、今回は詳細な説明を省いている所があります。詳細は前回の投稿「GitHubとHerokuを連携してDjangoアプリをデプロイする（2022.3.15）」をご参照下さい。

準備

GitHub,Heroku,ローカルの環境を整えます。詳細は

「GitHubとHerokuを連携してDjangoアプリをデプロイする（2022.3.15）」
をご参照下さい。

Djangoアプリを作る

DjangoBoysを参考にメモアプリを作ります。出来上がりは以下の様になります。以下の画像はローカルからブラウザに表示した物です。

本番環境でCSSが反映される様にする

先程は開発環境でCSSが反映される様にしました。次は本番環境でCSSが反映される様にします。具体的にはwhitenoiseを使えるようにします。settings.pyにおいて、次の様に追記します。

詳細は「Django と静的アセット」をご参照下さい。

最後に設定ファイルを作成していきます。下の画像はコマンドラインからファイルを作っていますが、どのように作っても構いません。詳細は「とりあえず秒速でDjangoでホームページを作ってHerokuで公開するやつ（Windows対応）」をご参照下さい。「Procfile」を作る際はアプリ名をご自身のアプリ名に変えるのを忘れないで下さい。

GitHub経由でHerokuにデプロイする

GitHubにpushした時点でHerokuにも反映されます。ただ、デプロイはされないので、手動でデプロイする必要があります。詳細は

「GitHubとHerokuを連携してDjangoアプリをデプロイする（2022.3.15）」
をご参照下さい。

結果

本番環境でもCSSが反映される様に出来ました。

考察

公式の情報を見るのが一番良いとは思うものの、公式の情報を理解して実装するまでの実力が無い為、必然的にいろんなサイトを見る事になったりします。実力を付けるために記事を書いたりしますが、記事を書くためには更に多くの時間が必要になります。「情報を見つける＝＞理解する＝＞実装する＝＞記事にする」のサイクルを効率良く回せるようにしたいです。

課題

データベースとしてMySQLやPostgreを使いたい。

次の記事
「.env」を使ってGitHubで安全なアプリ管理をする（2022.4.2）