I am pretty new to Django and I am trying to put static files in my site but I am unable to do so. I am getting 404 when the browser tries to GET my static files
I'm not sure of the best practices or the correct way for Django to find these static files
Here is a picture of my project structure:
Here is my settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
In my index.html I have a line:
<link href="{{ STATIC_URL }}boothie.css" rel="stylesheet">
<script src="{{ STATIC_URL }}boothie.js"></script>
<script src="{{ STATIC_URL }}jquery.js.1.3.js"></script>
I think this would work:
{% load staticfiles %}
<link href="{% static "css/boothie.css" %}" rel="stylesheet">
<script src="{% static "js/boothie.js" %}"></script>
<script src="{% static "js/jquery.js.1.3.js" %}"></script>
See: Configuring static files
Edit:
You can maintain static files which belong to your home app with the structure like this:
home/
static/
css/
images/
js/
While deploying, you can set STATIC_ROOT to where you want to serve these static files, then run python manage.py collectstatic, django will copy your static files into the STATIC_ROOT directory and you can maintain static files easier (in a single directory) without changing your code.
static_url will give the relative path ....
You may have to include
<link href="{% static "css/boothie.css" %}" rel="stylesheet">
Related
How can I plug css into html by importing css from the main folder? I have a network project with 3 app.
network
--chat
--news
--static/style.css
...
My code:
{% load static %}
<link rel="stylesheet" href="{% style.css' %}">
It works if I create a static folder in some app, but I want to put it in the main network folder and then it stops working.
In your settings.py;
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
Then inside your html files;
{% load static %}
<link rel='stylesheet' href="{% static 'styles.css' %}">
Explanation
first of all i am setting the STATIC_URL which helps in the way that everytime you don't need to provide the path of the static files but use the syntax as i used ("{% static 'styles.css' %}").
After that i set the STATICFILES_DIRS which sets the directories where the app should search for the static files which i set to the static folder present in the base directory. You can set it as you want.
<script src="./home/static/js/2.d754fc32.chunk.js"></script>
Currently my html file points to this. What static variable django setting.py do I declare to make the HTML point to
<script src="./home/static/static/js/2.d754fc32.chunk.js"></script>
currently in setting.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '../frontend/build')
]
STATIC_ROOT = '/var/www/web/home/static/'
STATIC_URL = 'home/static/'
My build folder contains a static file inside as well.
if STATICFILES_DIR is in the right place:
You just have to {% load 'static' %} on the top of your html (after extend), and to set the css file:
<link rel="stylesheet" type="text/css" href="{% static '/style.css' %}">
if you want a img from there would be:
<img src="{% static '<PathOfImage>/img.png' %}">
I always get 404 error in loading static files in an EC2 instance. I have searched for hours and tried to implement various suggestions but nothing worked.
Following is my configuration of different files:
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
LOGIN_REDIRECT_URL = '/'
html
{% extends "base.html" %}
{% load staticfiles %}
{% block extra_head %}
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script src="{% static "ddv_example/ddv_example_1_10.js" %}"></script>
<script type="text/javascript">
nginx.conf
location /static/admin {
alias /usr/local/virtualenvs/mysite/lib/python2.7/site-packages/django/contrib/admin/static/admin;
}
location /static/rest_framework {
alias /usr/local/virtualenvs/mysite/lib/python2.7/site-packages/rest_framework/static/rest_framework;
}
location /static {
alias /usr/local/apps/mysite/src/mysite/mysite/static;
}
location /static/ddv_example {
alias /usr/local/apps/mysite/src/mysite/mysite/static/ddv_example;
}
Any suggestions on what am i missing out ?
I had missed out re-running sudo ./server_setup.sh. The nginx configs will take effect only when the script is re-run.
I am trying to install a new template on my Mezzanine website. My Mezzanine is on version 4.2.2 and Django on 1.9.7 . Here is what I did:
With
DEBUG = true
I created a new app call "template_app" and loaded in settings.py:
INSTALLED_APPS = (
"template_app",
...
)
I created the directory structure, and copied over the default mezzanine files (base, index...) like:
template_app
static
css
img
js
templates
base.html
index.html
includes
footer_scripts.html
I downloaded a bootstrap template and replaced the above css js img folder and index.html with the ones found in the template. (The template I used: https://startbootstrap.com/template-overviews/business-casual/ ) Then link the css and javascript in base.html:
(All css)
{% compress css %}
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "css/business-casual.css" %}">
<link rel="stylesheet" href="{% static "css/mezzanine.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap-theme.css" %}">
(All js)
{% compress js %}
<script src="{% static "mezzanine/js/"|add:settings.JQUERY_FILENAME %}"></script>
<script src="{% static "js/bootstrap.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "js/jquery.js" %}"></script>
<script src="{% static "js/bootstrap-extras.js" %}"></script>
I'm not sure where I did wrong, or what I am missing. My website can't find the css and javascript file in the app:
Not Found: /css/bootstrap.min.css/
Not Found: /css/business-casual.css/
[07/Jan/2017 08:12:30] "GET /css/bootstrap.min.css/ HTTP/1.1" 404 1716
[07/Jan/2017 08:12:30] "GET /css/business-casual.css/ HTTP/1.1" 404 1720
Not Found: /js/jquery.js/
...
I tried modify urls.py and other parts of setting.py based on other's solutions, but they don't seems to be working. What am I doing wrong?
-- added 2017-01-09 --
Checking with findstatic linked me to the right path. Except bootstrap.css which linked me both the css file in my downloaded template and the mezzanine template.
I had the same issue with static files, but it did require that I set the "STATIC_ROOT" setting since my paths were off course.
Since I was using a custom theme I had to change the "STATIC_ROOT" path in settings.py to point to my app static files rather than it pointing to the default PROJECT_ROOT.
So I added something like this...
## Custom Theme Path (For Static Files)
THEME_URL = "template_app/"
And Changed "STATIC_ROOT" to...
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(PROJECT_ROOT, THEME_URL, STATIC_URL.strip("/"))
Make sure you restart the test server again (manually if need be), the autorestart doesnt recognise changes to the static/ directories.
I found this question on Google while looking for a solution for the same issue. I managed to work around with these steps:
First of all, double check that template_app is listed on INSTALLED_APPS above all Mezzanine apps;
Re-run findstatic;
If you still don't find it, run collectstatic. While findstatic wouldn't find the theme I wanted (but would find other themes), collectstatic managed to find it and link its static files.
I want to save my style.css file in the main project folder (for my project in django that is) under either /static/ or /templates/ but I cannot seem to load it properly. I use:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static '/style.css' %}" \>
This css file is suppose to be loaded with my /templates/base.html site (stored in the main project folder).
Thanks,
Matt
Loading of static files from templates directory is a bad idea - source of your templates will be available to web user.
To load files from static/ directory add the STATICFILES_DIRS to your settings.py:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
And BTW remove the first slash in the {% static %} tag:
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" \>