[Django Girls] ブログ用のCSSを読み込めない

Django Girlsのチュートリアルを見ながらブログを作成しています。

最初のCSSファイル！にあるように、blog/static/css/blog.cssにブログ用のCSSを作成しました。

このCSS、ローカルでは読み込みましたが、PythonAnyware上では読み込まれないのです。
CSS以外のhtml等はどちらも反映されています。

どうしたらよいでしょう。

どうぞよろしくお願いいたします。

blog/templates/blog/post_list.html
1{% load static %}
2<html>
3    <head>
4        <title>Django Girls blog</title>
5        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
6        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
7        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
8    </head>
9    <body>
10        <div>
11            <h1><a href="/">Django Girls Blog</a></h1>
12        </div>
13
14        {% for post in posts %}
15            <div>
16                <p>published: {{ post.published_date }}</p>
17                <h2><a href="">{{ post.title }}</a></h2>
18                <p>{{ post.text|linebreaksbr }}</p>
19            </div>
20        {% endfor %}
21    </body>
22</html>

blog/static/css/blog.css
1h1 a, h2 a {
2    color: #C25100;
3}

○確認したこと

ブラウザの「ページのソースを表示」でソースを確認するとCSSの部分は次のようになっていました。

<link rel="stylesheet" href="/static/css/blog.css">

クリックすると、ローカルではCSSが開き、PythonAnywareではPage not found (404)となりました。

http://matsufff.pythonanywhere.com/static/css/blog.css
http://127.0.0.1:8000/static/css/blog.css

ベストアンサーで教えて頂いたチュートリアルを参考に
How to setup static files in Django

PythonAnywareのWebタブのStatic files:に <UserDir>/blog/staticを登録、リロードでCSSを読み込めました。

setting.pyが更新され、ローカルでは<UserDir>/blogstatic、サーバーでは <UserDir>/blog/staticとずれてしまいました。

つっこんで調べてみます。

settings.pyのSTATIC_ROOTを確認すると

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

<中略>

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

BASE_DIR = os.path.dirname(　#ひとつ上のパス
os.path.dirname(　#ひとつ上のパス
os.path.abspath(　#絶対パス
file #実行中のファイルの場所
)))

PythonAnywareのコンソールで確認してみる。

12:17 ~/matsufff.pythonanywhere.com (master)$ pwd
/home/matsufff/matsufff.pythonanywhere.com
12:17 ~/matsufff.pythonanywhere.com (master)$ ls
blog  db.sqlite3  manage.py  mysite  requirements.txt  static
12:17 ~/matsufff.pythonanywhere.com (master)$ cd blog
12:20 ~/matsufff.pythonanywhere.com/blog (master)$ ls
__init__.py  __pycache__  admin.py  apps.py  migrations  models.py  static  templates  tests.py  urls.py  views.py
12:20 ~/matsufff.pythonanywhere.com/blog (master)$ cd templates/
12:21 ~/matsufff.pythonanywhere.com/blog/templates (master)$ ls
blog
12:21 ~/matsufff.pythonanywhere.com/blog/templates (master)$ python
Python 2.7.12 (default, Oct  8 2019, 14:14:10) 
[GCC 5.4.0 20160609] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> import os
>>> os.path.dirname(os.path.dirname(os.path.abspath('')))
'/home/matsufff/matsufff.pythonanywhere.com'
>>> BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath('')))
>>> STATIC_URL = '/static/'
>>> STATIC_ROOT = os.path.join(BASE_DIR, 'static')
>>> STATIC_ROOT 
'/home/matsufff/matsufff.pythonanywhere.com/static'
>>>

BASE_DIRに入るのが、setting.pyを実行した場所から２つ上のディレクトリ。
/home/static/だとすると、/home/static/blog/template あたりから実行されている？？？

この辺がちょっとまだわかりません。

(参考)
Pythonでパス文字列からファイル名・フォルダ名・拡張子を取得、結合

（追記）
チュートリアルHow to setup static files in Djangoを読んでいて気がつきました。

Run pythonX.Y manage.py collectstatic

collectstatic→これコマンドですね！

12:04 ~/matsufff.pythonanywhere.com (master)$ python3.7 manage.py collectstatic
You have requested to collect static files at the destination
location as specified in your settings:
    /home/matsufff/matsufff.pythonanywhere.com/static
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel: yes
1 static file copied to '/home/matsufff/matsufff.pythonanywhere.com/static', 119 unmodified.
12:05 ~/matsufff.pythonanywhere.com (master)$

<BASE_DIR>を検索し、staticがあれば、<BASE_DIR>/staticにコピーするコマンドでした。

サーバー側を確認すると<BASE_DIR>/staticができている・・・いつの間に！？
ローカルにはないフォルダです。

PythonAnywareのWebタブから/stastc/の設定を戻して、ローカルと同一にしました。
これでGitで同期をとれるようになりました。

しかしローカルとサーバーのSTATIC_ROOTはずれたままです。
謎は深まるばかりです。

作り直した方がいい気がしてきました。

行動規範の内容に同意します

回答1件

ベストアンサー

静的リソースのマッピングが必要かも？

このページのSet up a static files mappingに書いてありました
How to setup static files in Django | PythonAnywhere help

前に示したページはここからジャンプしました
Static files mappings | PythonAnywhere help

投稿2020/08/03 13:33

mcho71

総合スコア67

matsufff

2020/08/04 08:21

ご回答ありがとうございます。リンク先のチュートリアルを参考にPythonAnywareのWebタブの`Static files:`に `<UserDir>/blog/static`を登録、リロードでCSSを読み込めました。ただ、setting.pyが更新され、ローカルでは`<UserDir>/blog/static`にあるので、ちょっと困った状況ではありますが、、、こちらは練習用なので、あとでまた考えてみます。ありがとうございました。

行動規範の内容に同意します