We Keep Coding

My website was showing CSS fine until I did collectstatic - Django

My website was doing everything well and showing all the CSS until I ran collectstatic on it. Now everything is how it would look if CSS didn't exist. Is there any solution to this? Or is there some way I can delete the collectstatic to get back the previous thing?
I followed this tutorial to host this website: https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-16-04
Here's my settings.py(only the last bit where I set the static and the media stuff):
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
STATICFILES_DIRS = []
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
LOGIN_URL = '/main/user_login/'

Okay, so as you mentioned it stopped working after you ran collectstatic command.
collectstatic command makes Django looks for all static files in your apps and collects them in a single directory which is STATIC_ROOT. (In production it needs a single directory for all the static files)
Put the directories containing your static files into the STATICFILES_DIRS.
You also have to include your static urls in your urls.py
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [your paths go here]
urlpatterns += staticfiles_urlpatterns()
After including your static directories into the STATICFILES_DIRS array and including the static urls in your urls.py, use the command collectstatic and then it should work.

Why is collectstatic not copying all my directories?

Currently working on deployment for my django website. Im trying to get my static files working so obviously I used this command: python manage.py collectstatic. Once finished running it prints 119 files copied... I thought this was working until I cd'd into the newly created static directory and didn't find my css folder. Weirdly enough, I did see the admin folder. Once I saw this, I deleted my static folder entirely and attempted to directly copy the static folder using scp. I did this and all of my other folders (css, uploads, etc. And also the admin folder) appeared. I tried to collectstatic now with all of the folders there only to find out when I do that, it deletes all of my folders except for the admin folder. When I start the website up using the runserver command. There is no css on my homepage but there is in the admin page.
This is how everything looks like in the finder.
(projectname) ——— env
——— excelsite
——— pages
——— templates
——— (settings folder)
——— static ——— css, uploads, admin
——— manage.py
——— db.sqlite3
This is my settings.py:
STATIC_ROOT = "/home/alexholst/excelsite/static"
STATIC_URL = '/static/'
#STATICFILES_DIRS = ("/home/alexholst/excelsite/static",)
#STATICFILES_DIRS = (
# os.path.join('static'),
# 'static',
#)
Any help is very much appreciated!!
Thanks in advance!

You need to configure in settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/var/www/static/',
]
And add your app's static directory there.
See https://docs.djangoproject.com/en/3.0/howto/static-files/

Heroku static files not loading, Django

I'm trying to push my Django project to Heroku, but it isn't loading the staticfiles.
I used this to setup the things, everything is fine but I'm not able to fix the issue with static files.
My directory structure is like this
help_the_needy
help_the_needy
__init__.py
settings.py
urls.py
views.py
wsgi.py
manage.py
Procfile
requirements.txt
static
css
font-awesome
fonts
img
js
templates
base.html
display_list2.html
index.html
Here is the complete code (all files).
This is my settings.py.
I tried alot of things to fix this, but nothing seems to work.
When I push it does copy static files but it's not loading them.
Can someone please point me to my mistake? Where is it wrong?

I have been dealing with the same problem too. And here are the 2 things that I changed in my code.
(I'm using Django 1.7)
1) settings.py
I add these lines to the setting files
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
# Add to this list all the locations containing your static files
)
STATIC_ROOT: this tells Django where to (a) put the static files when you run python manage.py collectstatic and (b) find the static files when you run the application
TEMPLATE_DIRS: this tells Django where to look for your static files when it search for statics files when you run python manage.py collectstatic
2) wsgi.py
Originally my file was:
import os
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "xxxx.settings")
from django.core.wsgi import get_wsgi_application
application = get_wsgi_application()
And I changed it to:
import os
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "xxxx.settings")
from django.core.wsgi import get_wsgi_application
from whitenoise.django import DjangoWhiteNoise
application = get_wsgi_application()
application = DjangoWhiteNoise(application)
Read here for more information on whitenoise: https://devcenter.heroku.com/articles/django-assets#whitenoise
Also, remember to install whitenoise:
pip install whitenoise==2.0.6
Before deploying the project, run:
python manage.py collectstatic
This will create a folder indicated by STATIC_ROOT (declared in your settings.py), containing all your static files.

Since it's been a few years since this was posted (and it still pops up when I search for the issue), here's what worked for me in Django 3.2.
pip install whitenoise
Make sure in settings.py you have
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
Add whitenoise to your Middleware:
MIDDLEWARE = [
'whitenoise.middleware.WhiteNoiseMiddleware',
]
Make sure the directory you specified as the STATIC_ROOT (staticfiles) exists in your base directory and is not empty.
After that, I committed the changes and Heroku was able to build the static files and everything worked fine.

pip install whitenoise
Add whitenoise to requirement.txt.
and also add whitenoise in the middleware of settings.py
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware', #add whitenoise
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
Follow the steps in https://devcenter.heroku.com/articles/django-assets

Your STATICFILES_DIRS setting is wrong. It should be pointing to the actual location of the "static" directory containing the files:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

It looks like django don't know where your static_root is.
This folder is autogenerated when you fire manage.py collectstatic
Make sure that the folders static and templates are inside your django app. You didn't created a django app to put this folders into. You created a django project the next step is to create a django app with something like this python manage.py startapp polls
# Absolute filesystem path to the Django project directory:
DJANGO_ROOT = dirname(dirname(abspath(__file__)))
# Absolute filesystem path to the top-level project folder:
SITE_ROOT = dirname(DJANGO_ROOT)
STATIC_URL = '/static/'
STATIC_ROOT = normpath(join(SITE_ROOT, 'static_root'))

Your urls.py file lacks the setting to manage and route requests for static resources.
in order to provide access to static resorces you must add to urlpatterns of urls.py:
urlpatterns += patterns('',
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT}),
)

Django: static files returning 404 error

I want to be able to load my static files on my local server, but when I request them, the browser returns 404 for every resource.
From what I can understand, STATIC_URL is the url in which my static files will be served. And STATICFILES_FINDERS specifies how my static files will be discovered. I set STATICFILES_DIRS to search for the static directory at the project root, but it doesn't seem to be be finding it.
On my settings.py,
# Python 2.7.5, Django 1.6
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
This is my directory structure:
.
|-- myapp
|-- settings.py
|-- ...
static
|-- images
|-- javascript
|-- stylesheets

Here are a couple of ideas:
You need a server for your static files. Are you using Apache HTTP server? The easiest way to serve your static files is to alias them in the httpd.conf file:
Alias /static/ /path/to/static/
<Directory /path/to/static>
Require all granted
</Directory>
You need to specify a STATIC_ROOT, which could be /path/to/your_project/static but then you probably want to put your current static files and folders somewhere else, because everything in STATIC_ROOT will be overwritten when you call manage.py collectstatic. I put all of my static files, such as Bootstrap, Tablesorter, images and icons in a folder called assets, then put assets in my STATICFILES_DIR list.
Use manage.py collectstatic to collect all static files and put them in STATIC_ROOT so that Apache can find them. Static files for the admin site will be automatically copied even if you do not add them to the list of STATICFILES_DIR.
Check out this post I wrote, which has several links to Django documentation on the topic.

Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT

What are the differences of these three static url?
I am not sure if I am right, I am using the MEDIA_ROOT to store my uploaded photos (via models.ImageField())
However, I created a JS script to my admin and in admin.py. I defined the media as below:
....
class Media:
js = ('/admin/custom.js', )
and my settings.py:
....
STATIC_ROOT = "/home/user/project/django1/top/listing/static"
and I added the custom.js to STATIC_ROOT/admin/custom.js, but it is not working. Throwing 404 not found error.
And then I change the STATIC_ROOT to STATICFILES_DIRS, and it works!!
....
STATICFILES_DIRS = "/home/user/project/django1/top/listing/static"
So, I am not understand what is going on here. In fact, I just don't understand what is the difference between STATIC_ROOT and STATICFILES_DIRS.
Currently I am testing Django in my machine via virtualenv, not deployed yet, is it the reason STATIC_ROOT not working??

Development
STATIC_ROOT is useless during development, it's only required for deployment.
While in development, STATIC_ROOT does nothing. You don't even need to set it. Django looks for static files inside each app's directory (myProject/appName/static) and serves them automatically.
This is the magic done by manage.py runserver when DEBUG=True.
Deployment
When your project goes live, things differ. Most likely you will serve dynamic content using Django and static files will be served by Nginx. Why? Because Nginx is incredibly efficient and will reduce the workload off Django.
This is where STATIC_ROOT becomes handy, as Nginx doesn't know anything about your Django project and doesn't know where to find static files.
So you set STATIC_ROOT = '/some/folder/' and tell Nginx to look for static files in /some/folder/. Then you run manage.py collectstatic and Django will copy static files from all the apps you have to /some/folder/.
Extra directories for static files
STATICFILES_DIRS is used to include additional directories for collectstatic to look for. For example, by default, Django doesn't recognize /myProject/static/. So you can include it yourself.
Example
STATIC_URL = '/static/'
if not DEBUG:
STATIC_ROOT = '/home/django/www-data/example.com/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static/'),
]

You can find these settings in the Django documentation. Here are my own definitions and quotations from the documentation:
MEDIA_ROOT is the folder where files uploaded using FileField will go.
Absolute filesystem path to the directory that will hold user-uploaded files.
STATIC_ROOT is the folder where static files will be stored after using manage.py collectstatic
The absolute path to the directory where collectstatic will collect static files for deployment.
If the staticfiles contrib app is enabled (default) the collectstatic management command will collect static files into this directory. See the howto on managing static files for more details about usage.
STATICFILES_DIRS is the list of folders where Django will search for additional static files aside from the static folder of each app installed.
This setting defines the additional locations the staticfiles app will traverse if the FileSystemFinder finder is enabled, e.g. if you use the collectstatic or findstatic management command or use the static file serving view.
In your settings, you should have:
MEDIA_ROOT = os.path.join(BASE_DIR, "media/")
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
# Make a tuple of strings instead of a string
STATICFILES_DIRS = ("/home/user/project/django1/top/listing/static", )
...where:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
as defined in the default Django settings.py now.

Difference between STATICFILES_DIRS and STATIC_ROOT
The STATICFILES_DIRS can contain other directories (not necessarily app directories) with static files and these static files will be collected into your STATIC_ROOT when you run collectstatic. These static files will then be served by your web server and they will be served from your STATIC_ROOT.
If you have files currently in your STATIC_ROOT that you wish to serve then you need to move these to a different directory and put that other directory in STATICFILES_DIRS. Your STATIC_ROOT directory should be empty and all static files should be collected into that directory.
MEDIA_ROOT where media files ,all uploaded files goes.
Example : Images, Files

class Media:
js = ('/admin/custom.js', )
but it is not working. Throwing 404 not found error.
The 404 error is in part because of the leading slash in the file path.