Issue
I've completed the CS50W project 1 wiki project. Though not part of the assignment, I would like to host it online so that I can show it to my friend. The deployment to Railway is a success but when I view the page, the CSS doesn't load. You can view my website here: https://web-production-40b27.up.railway.app/
The error message I got is this:
I think it has something to do with the static files path. Can someone help me?
DEBUG = False
ALLOWED_HOSTS = ['*']
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT =os.path.join(BASE_DIR, 'staticfiles')
Here's a breakdown of my directory tree:
wiki
└── wiki
├── db.sqlite3
├── encyclopedia
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ ├── __init__.py
│ │ └── __pycache__
│ │ └── __init__.cpython-312.pyc
│ ├── models.py
│ ├── static
│ │ └── encyclopedia
│ │ └── styles.css
│ ├── templates
│ │ └── encyclopedia
│ │ ├── create.html
│ │ ├── edit.html
│ │ ├── entry_page.html
│ │ ├── error.html
│ │ ├── index.html
│ │ ├── layout.html
│ │ └── search.html
│ ├── tests.py
│ ├── urls.py
│ ├── util.py
│ ├── views.py
│ ├── __init__.py
│ └── __pycache__
│ ├── admin.cpython-312.pyc
│ ├── apps.cpython-312.pyc
│ ├── models.cpython-312.pyc
│ ├── urls.cpython-312.pyc
│ ├── util.cpython-312.pyc
│ ├── views.cpython-312.pyc
│ └── __init__.cpython-312.pyc
├── entries
│ ├── CSS.md
│ ├── Django.md
│ ├── Git.md
│ ├── HTML.md
│ └── Python.md
├── manage.py
├── Procfile
├── README.md
├── requirements.txt
├── runtime.txt
├── staticfiles
│ ├── admin
│ │ ├── css
│ │ │ ├── autocomplete.css
│ │ │ ├── base.css
│ │ │ ├── changelists.css
│ │ │ ├── dark_mode.css
│ │ │ ├── dashboard.css
│ │ │ ├── forms.css
│ │ │ ├── login.css
│ │ │ ├── nav_sidebar.css
│ │ │ ├── responsive.css
│ │ │ ├── responsive_rtl.css
│ │ │ ├── rtl.css
│ │ │ ├── vendor
│ │ │ │ └── select2
│ │ │ │ ├── LICENSE-SELECT2.md
│ │ │ │ ├── select2.css
│ │ │ │ └── select2.min.css
│ │ │ └── widgets.css
│ │ ├── img
│ │ │ ├── calendar-icons.svg
│ │ │ ├── gis
│ │ │ │ ├── move_vertex_off.svg
│ │ │ │ └── move_vertex_on.svg
│ │ │ ├── icon-addlink.svg
│ │ │ ├── icon-alert.svg
│ │ │ ├── icon-calendar.svg
│ │ │ ├── icon-changelink.svg
│ │ │ ├── icon-clock.svg
│ │ │ ├── icon-deletelink.svg
│ │ │ ├── icon-hidelink.svg
│ │ │ ├── icon-no.svg
│ │ │ ├── icon-unknown-alt.svg
│ │ │ ├── icon-unknown.svg
│ │ │ ├── icon-viewlink.svg
│ │ │ ├── icon-yes.svg
│ │ │ ├── inline-delete.svg
│ │ │ ├── LICENSE
│ │ │ ├── README.txt
│ │ │ ├── search.svg
│ │ │ ├── selector-icons.svg
│ │ │ ├── sorting-icons.svg
│ │ │ ├── tooltag-add.svg
│ │ │ └── tooltag-arrowright.svg
│ │ └── js
│ │ ├── actions.js
│ │ ├── admin
│ │ │ ├── DateTimeShortcuts.js
│ │ │ └── RelatedObjectLookups.js
│ │ ├── autocomplete.js
│ │ ├── calendar.js
│ │ ├── cancel.js
│ │ ├── change_form.js
│ │ ├── collapse.js
│ │ ├── core.js
│ │ ├── filters.js
│ │ ├── inlines.js
│ │ ├── jquery.init.js
│ │ ├── nav_sidebar.js
│ │ ├── popup_response.js
│ │ ├── prepopulate.js
│ │ ├── prepopulate_init.js
│ │ ├── SelectBox.js
│ │ ├── SelectFilter2.js
│ │ ├── theme.js
│ │ ├── urlify.js
│ │ └── vendor
│ │ ├── jquery
│ │ │ ├── jquery.js
│ │ │ ├── jquery.min.js
│ │ │ └── LICENSE.txt
│ │ ├── select2
│ │ │ ├── i18n
│ │ │ │ ├── af.js
│ │ │ │ ├── ar.js
│ │ │ │ ├── az.js
│ │ │ │ ├── bg.js
│ │ │ │ ├── bn.js
│ │ │ │ ├── bs.js
│ │ │ │ ├── ca.js
│ │ │ │ ├── cs.js
│ │ │ │ ├── da.js
│ │ │ │ ├── de.js
│ │ │ │ ├── dsb.js
│ │ │ │ ├── el.js
│ │ │ │ ├── en.js
│ │ │ │ ├── es.js
│ │ │ │ ├── et.js
│ │ │ │ ├── eu.js
│ │ │ │ ├── fa.js
│ │ │ │ ├── fi.js
│ │ │ │ ├── fr.js
│ │ │ │ ├── gl.js
│ │ │ │ ├── he.js
│ │ │ │ ├── hi.js
│ │ │ │ ├── hr.js
│ │ │ │ ├── hsb.js
│ │ │ │ ├── hu.js
│ │ │ │ ├── hy.js
│ │ │ │ ├── id.js
│ │ │ │ ├── is.js
│ │ │ │ ├── it.js
│ │ │ │ ├── ja.js
│ │ │ │ ├── ka.js
│ │ │ │ ├── km.js
│ │ │ │ ├── ko.js
│ │ │ │ ├── lt.js
│ │ │ │ ├── lv.js
│ │ │ │ ├── mk.js
│ │ │ │ ├── ms.js
│ │ │ │ ├── nb.js
│ │ │ │ ├── ne.js
│ │ │ │ ├── nl.js
│ │ │ │ ├── pl.js
│ │ │ │ ├── ps.js
│ │ │ │ ├── pt-BR.js
│ │ │ │ ├── pt.js
│ │ │ │ ├── ro.js
│ │ │ │ ├── ru.js
│ │ │ │ ├── sk.js
│ │ │ │ ├── sl.js
│ │ │ │ ├── sq.js
│ │ │ │ ├── sr-Cyrl.js
│ │ │ │ ├── sr.js
│ │ │ │ ├── sv.js
│ │ │ │ ├── th.js
│ │ │ │ ├── tk.js
│ │ │ │ ├── tr.js
│ │ │ │ ├── uk.js
│ │ │ │ ├── vi.js
│ │ │ │ ├── zh-CN.js
│ │ │ │ └── zh-TW.js
│ │ │ ├── LICENSE.md
│ │ │ ├── select2.full.js
│ │ │ └── select2.full.min.js
│ │ └── xregexp
│ │ ├── LICENSE.txt
│ │ ├── xregexp.js
│ │ └── xregexp.min.js
│ └── encyclopedia
│ └── styles.css
└── wiki
├── asgi.py
├── settings.py
├── urls.py
├── wsgi.py
├── __init__.py
└── __pycache__
├── settings.cpython-312.pyc
├── urls.cpython-312.pyc
├── wsgi.cpython-312.pyc
└── __init__.cpython-312.pyc
Solution
If you look at your network tab in your web inspector:
Fetching the stylesheet results in status code 404. This means that the resource is not present in the path.
Fixing this issue is not as simple as fixing the path to the resource. This is because in production (i.e. DEBUG = False), Django does not serve static files by itself. Django does list out methods of deploying static files in production here, however, I find these methods rather difficult to understand. You may want to install whitenoise found here, which has elaborate instructions on how to set up.
Answered By - nknguyenhc
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.