Error 404 getting static directory

Question

I have aa problem in running my project on vbs server on the cloud "Ubunut machine" the code is working just fine on my local but in the server it seems that it can't access the static directory i don't know why

Here is my project structue :

|-- blogango
|   |-- __init__.py
|   |-- __init__.pyc
|   |-- admin.py
|   |-- admin.pyc
|   |-- akismet.py
|   |-- akismet.pyc
|   |-- conf
|   |   |-- __init__.py
|   |   |-- __init__.pyc
|   |   |-- settings.py
|   |   `-- settings.pyc
|   |-- feeds.py
|   |-- feeds.pyc
|   |-- forms.py
|   |-- forms.pyc
|   |-- management
|   |   |-- __init__.py
|   |   `-- commands
|   |       |-- __init__.py
|   |       |-- comment_notify.py
|   |       `-- update_reactions.py
|   |-- migrations
|   |   |-- 0001_initial.py
|   |   |-- 0002_add_reactions.py
|   |   |-- 0003_add_rendered_html.py
|   |   |-- 0004_add_comment_moderation.py
|   |   |-- 0005_added_reaction_url.py
|   |   |-- 0006_auto__chg_field_comment_user_url__chg_field_reaction_user_url__add_fie.py
|   |   |-- 0007_auto__chg_field_blogentry_publish_date.py
|   |   |-- 0008_auto__chg_field_comment_user_url__chg_field_reaction_user_url.py
|   |   |-- 0008_auto__chg_field_comment_user_url__chg_field_reaction_user_url.pyc
|   |   |-- 0009_auto__chg_field_comment_user_url__chg_field_reaction_user_url.py
|   |   |-- 0010_auto__add_field_comment_user_ip__add_field_comment_user_agent.py
|   |   |-- 0011_auto__chg_field_blogentry_slug.py
|   |   |-- __init__.py
|   |   `-- __init__.pyc
|   |-- models.py
|   |-- models.pyc
|   |-- search.py
|   |-- search_indexes.py
|   |-- static
|   |   `-- blogango
|   |       |-- admin
|   |       |   |-- img
|   |       |   |   |-- add.png
|   |       |   |   |-- banner.png
|   |       |   |   |-- bluetab.png
|   |       |   |   |-- bodybg.png
|   |       |   |   |-- configure.png
|   |       |   |   |-- dialogbg.png
|   |       |   |   |-- error.png
|   |       |   |   |-- info.png
|   |       |   |   |-- logo.png
|   |       |   |   |-- ok.png
|   |       |   |   |-- remove.png
|   |       |   |   `-- whitetab.png
|   |       |   |-- preview.css
|   |       |   `-- style.css
|   |       |-- css
|   |       |   |-- agiliqblog.css
|   |       |   |-- as_blog_styles.css
|   |       |   |-- jquery.autocomplete.css
|   |       |   `-- prettify.css
|   |       |-- images
|   |       |   |-- agiliq_blog_logo.png
|   |       |   |-- bg.png
|   |       |   |-- blog.png
|   |       |   |-- bubble_bg.png
|   |       |   |-- crumbs.gif
|   |       |   |-- date_icon.png
|   |       |   |-- footer_bg.png
|   |       |   |-- frame_bg.png
|   |       |   |-- icon_smile.gif
|   |       |   |-- linesbg.png
|   |       |   |-- linesbg2.png
|   |       |   |-- list_image.png
|   |       |   |-- mainpage_bg.jpg
|   |       |   |-- person_default.jpg
|   |       |   |-- person_img.jpg
|   |       |   |-- personal-blog-logo.png
|   |       |   |-- reactions_bg.png
|   |       |   |-- saikiranb.jpg
|   |       |   |-- sticky_note.png
|   |       |   `-- wood_bg.jpg
|   |       `-- js
|   |           |-- Admin.js
|   |           |-- Form.js
|   |           |-- JSON.js
|   |           |-- WidgetManager.js
|   |           |-- Zine.js
|   |           |-- jQuery.js
|   |           |-- jquery.autocomplete.js
|   |           |-- jquery.min.js
|   |           |-- jquery.textarearesizer.js
|   |           `-- prettify.js
|   |-- templates
|   |   |-- blogango
|   |   |   |-- admin
|   |   |   |   |-- ajaxify.js
|   |   |   |   |-- base.html
|   |   |   |   |-- edit_entry.html
|   |   |   |   |-- edit_preferences.html
|   |   |   |   |-- entry_snippet.html
|   |   |   |   |-- index.html
|   |   |   |   |-- manage_comments.html
|   |   |   |   `-- manage_entries.html
|   |   |   |-- archive_view.html
|   |   |   |-- author.html
|   |   |   |-- base.html
|   |   |   |-- blogroll.html
|   |   |   |-- commentcontrols.html
|   |   |   |-- details.html
|   |   |   |-- eggs.html
|   |   |   |-- email
|   |   |   |   `-- comment_notification.html
|   |   |   |-- entry_controls.html
|   |   |   |-- entry_snippets.html
|   |   |   |-- install.html
|   |   |   |-- mainpage.html
|   |   |   |-- tag_details.html
|   |   |   `-- topbar.html
|   |   |-- entry_footer.html
|   |   `-- search
|   |       |-- blogango
|   |       |   `-- blogentry_text.txt
|   |       `-- search.html
|   |-- templatetags
|   |   |-- __init__.py
|   |   |-- __init__.pyc
|   |   |-- blogango_filters.py
|   |   |-- blogango_filters.pyc
|   |   `-- gravatar.py
|   |-- tests.py
|   |-- urls.py
|   |-- urls.pyc
|   |-- views.py
|   `-- views.pyc
|-- db.sqlite3
|-- manage.py
|-- requirements.txt
|-- saleh_work
|   |-- __init__.py
|   |-- __init__.pyc
|   |-- settings.py
|   |-- settings.pyc
|   |-- urls.py
|   |-- urls.pyc
|   |-- wsgi.py
|   `-- wsgi.pyc
|
|  
|   
`-- static
    |-- admin
    |   |-- css
    |   |   |-- base.css
    |   |   |-- changelists.css
    |   |   |-- dashboard.css
    |   |   |-- forms.css
    |   |   |-- ie.css
    |   |   |-- login.css
    |   |   |-- rtl.css
    |   |   `-- widgets.css
    |   |-- img
    |   |   |-- changelist-bg.gif
    |   |   |-- changelist-bg_rtl.gif
    |   |   |-- default-bg-reverse.gif
    |   |   |-- default-bg.gif
    |   |   |-- deleted-overlay.gif
    |   |   |-- gis
    |   |   |   |-- move_vertex_off.png
    |   |   |   `-- move_vertex_on.png
    |   |   |-- icon-no.gif
    |   |   |-- icon-unknown.gif
    |   |   |-- icon-yes.gif
    |   |   |-- icon_addlink.gif
    |   |   |-- icon_alert.gif
    |   |   |-- icon_calendar.gif
    |   |   |-- icon_changelink.gif
    |   |   |-- icon_clock.gif
    |   |   |-- icon_deletelink.gif
    |   |   |-- icon_error.gif
    |   |   |-- icon_searchbox.png
    |   |   |-- icon_success.gif
    |   |   |-- inline-delete-8bit.png
    |   |   |-- inline-delete.png
    |   |   |-- inline-restore-8bit.png
    |   |   |-- inline-restore.png
    |   |   |-- inline-splitter-bg.gif
    |   |   |-- nav-bg-grabber.gif
    |   |   |-- nav-bg-reverse.gif
    |   |   |-- nav-bg-selected.gif
    |   |   |-- nav-bg.gif
    |   |   |-- selector-icons.gif
    |   |   |-- selector-search.gif
    |   |   |-- sorting-icons.gif
    |   |   |-- tooltag-add.png
    |   |   `-- tooltag-arrowright.png
    |   `-- js
    |       |-- LICENSE-JQUERY.txt
    |       |-- SelectBox.js
    |       |-- SelectFilter2.js
    |       |-- actions.js
    |       |-- actions.min.js
    |       |-- admin
    |       |   |-- DateTimeShortcuts.js
    |       |   `-- RelatedObjectLookups.js
    |       |-- calendar.js
    |       |-- collapse.js
    |       |-- collapse.min.js
    |       |-- core.js
    |       |-- inlines.js
    |       |-- inlines.min.js
    |       |-- jquery.init.js
    |       |-- jquery.js
    |       |-- jquery.min.js
    |       |-- prepopulate.js
    |       |-- prepopulate.min.js
    |       |-- related-widget-wrapper.js
    |       |-- timeparse.js
    |       `-- urlify.js
    `-- blogango
        |-- admin
        |   |-- img
        |   |   |-- add.png
        |   |   |-- banner.png
        |   |   |-- bluetab.png
        |   |   |-- bodybg.png
        |   |   |-- configure.png
        |   |   |-- dialogbg.png
        |   |   |-- error.png
        |   |   |-- info.png
        |   |   |-- logo.png
        |   |   |-- ok.png
        |   |   |-- remove.png
        |   |   `-- whitetab.png
        |   |-- preview.css
        |   `-- style.css
        |-- css
        |   |-- agiliqblog.css
        |   |-- as_blog_styles.css
        |   |-- jquery.autocomplete.css
        |   `-- prettify.css
        |-- images
        |   |-- agiliq_blog_logo.png
        |   |-- bg.png
        |   |-- blog.png
        |   |-- bubble_bg.png
        |   |-- crumbs.gif
        |   |-- date_icon.png
        |   |-- footer_bg.png
        |   |-- frame_bg.png
        |   |-- icon_smile.gif
        |   |-- linesbg.png
        |   |-- linesbg2.png
        |   |-- list_image.png
        |   |-- mainpage_bg.jpg
        |   |-- person_default.jpg
        |   |-- person_img.jpg
        |   |-- personal-blog-logo.png
        |   |-- reactions_bg.png
        |   |-- saikiranb.jpg
        |   |-- sticky_note.png
        |   `-- wood_bg.jpg
        `-- js
            |-- Admin.js
            |-- Form.js
            |-- JSON.js
            |-- WidgetManager.js
            |-- Zine.js
            |-- jQuery.js
            |-- jquery.autocomplete.js
            |-- jquery.min.js
            |-- jquery.textarearesizer.js
            `-- prettify.js

and the server configration is right (i think so) :

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

but all i get in the termial is :

[11/Apr/2017 00:58:31]"GET /blog/install/blogango/css/as_blog_styles.css HTTP/1.1" 404 7096
[11/Apr/2017 00:58:31]"GET /blog/install/blogango/css/prettify.css HTTP/1.1" 404 7078
[11/Apr/2017 00:58:31]"GET /blog/install/ HTTP/1.1" 200 3239
[11/Apr/2017 00:58:31]"GET /blog/install/blogango/css/as_blog_styles.css HTTP/1.1" 404 7096
[11/Apr/2017 00:58:31]"GET /blog/install/blogango/css/prettify.css HTTP/1.1" 404 7078
[11/Apr/2017 00:58:31]"GET /blog/install/blogango/js/jquery.min.js HTTP/1.1" 404 7078

and here is my template code in templates/base.html for example :

 <link href="{{ STATIC_URL }}blogango/css/as_blog_styles.css" rel="stylesheet" type="text/css"/>
    <link href="{{ STATIC_URL }}blogango/css/prettify.css" rel="stylesheet" type="text/css"/>

and in templates/admin/base.html :

  <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}blogango/admin/preview.css">
  <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}blogango/admin/style.css">
  <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}blogango/css/jquery.autocomplete.css">

so what's wrong ?!

Answer 1

The STATIC_URL variable is not available in templates. In your templates you need to load the static module and use the {% static %} tag to reference a static asset. For example, your template should look like this:

{% load static %}
<link href="{% static 'blogango/css/as_blog_styles.css' %}" rel="stylesheet" type="text/css"/>
<link href="{% static 'blogango/css/prettify.css' %}" rel="stylesheet" type="text/css"/>