title: Django - unable to load static files?
body: <p>Very new to Django I am trying to follow along a tutorial by sentdex over on youtube. </p>
  
  <blockquote>
    <p>Django version 1.9</p>
  </blockquote>
  
  <p>Chose this version as that is being used in the tutorial.</p>
  
  <p>I can't seem to figure out how to get the <code>css</code> file to load. </p>
  
  <p>The location of the <code>css</code> file</p>
  
  <p><code>/media/xxx/django tutorial/mysite/personal/static/personal/css</code></p>
  
  <p>I assume the <code>BASE_URL</code> is referencing till: 
  <code>/media/xxx/djangotutroial/mysite</code></p>
  
  <p>This is the location of the <code>manage.py</code>. Or am I wrong?</p>
  
  <p>The <code>css</code> file is reference in <code>header.html</code>:</p>
  
  <pre><code> {% load staticfiles %}
   &lt;link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/&gt;
  </code></pre>
  
  <p>I read through a lot of the answers and if I understand correctly I have to change <code>settings.py</code> in <code>mysite</code> folder.</p>
  
  <p>This is what I have at the moment:</p>
  
  <pre><code>STATIC_URL = '/static/'
  STATICFILES_DIRS = [
  os.path.join(BASE_DIR,'personal'),
  ]
  </code></pre>
  
  <p>I have tried a lot of combinations in the <code>os.path.join</code> I still can't get the file to load. </p>
  
  <p>Thank for your help.</p>
  
  <p>Project Structure:</p>
  
  <pre><code>django tutorial
  --mysite
    --mysite
      ---------__pycache_
      ---------__init__.py
      ---------settings.py
      ---------urls.py
      ---------wsgi.py
    --personal
      ---------migrations
      ---------__pycache_
      ---------static
               ------personal
                     ------css     # has the bootstrap.min.css
                     ------js
      ---------templates
      ---------admin.py
      ---------apps.py
      ---------init.py
      ---------models.py
      ---------tests.py
      ---------urls.py
      ---------views.py
  </code></pre>
  
  <p>If someone can tell me the right command to get the directory structure in ubuntu I would be happy to show that here.</p>
  
  <p>Template:</p>
  
  <p>In home.html:</p>
  
  <pre><code>{% extends "personal/header.html" %}
  
  
  {% block content %}
  
  
  &lt;p&gt;Hey, welcome to my webpage. We are testing.&lt;p&gt;
  
  
  {% include "personal/includes/htmlsnippets.html" %}
  
  {% endblock %}
  </code></pre>
  
  <p>Error message in view page source</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;Page not found at /static/personal/css/bootstrap.min.css&lt;/title&gt;
    &lt;meta name="robots" content="NONE,NOARCHIVE"&gt;
    &lt;style type="text/css"&gt;
      html * { padding:0; margin:0; }
      body * { padding:10px 20px; }
      body * * { padding:0; }
      body { font:small sans-serif; background:#eee; }
      body&gt;div { border-bottom:1px solid #ddd; }
      h1 { font-weight:normal; margin-bottom:.4em; }
      h1 span { font-size:60%; color:#666; font-weight:normal; }
      table { border:none; border-collapse: collapse; width:100%; }
      td, th { vertical-align:top; padding:2px 3px; }
      th { width:12em; text-align:right; color:#666; padding-right:.5em; }
      #info { background:#f6f6f6; }
      #info ol { margin: 0.5em 4em; }
      #info ol li { font-family: monospace; }
      #summary { background: #ffc; }
      #explanation { background:#eee; border-bottom: 0px none; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="summary"&gt;
      &lt;h1&gt;Page not found &lt;span&gt;(404)&lt;/span&gt;&lt;/h1&gt;
      &lt;table class="meta"&gt;
        &lt;tr&gt;
          &lt;th&gt;Request Method:&lt;/th&gt;
          &lt;td&gt;GET&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Request URL:&lt;/th&gt;
          &lt;td&gt;http://127.0.0.1:8000/static/personal/css/bootstrap.min.css&lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div id="info"&gt;
  
        &lt;p&gt;&amp;#39;personal/css/bootstrap.min.css&amp;#39; could not be found&lt;/p&gt;
  
    &lt;/div&gt;
  
    &lt;div id="explanation"&gt;
      &lt;p&gt;
        You're seeing this error because you have &lt;code&gt;DEBUG = True&lt;/code&gt; in
        your Django settings file. Change that to &lt;code&gt;False&lt;/code&gt;, and     Django
        will display a standard 404 page.
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the terminal where runserver:</p>
  
  <pre><code>[24/Feb/2019 06:19:32] "GET /static/personal/css/bootstrap.min.css HTTP/1.1" 404 1703
  </code></pre>
  
  <p>Error when running using @bkawan code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;Page not found at /static/personal/css/bootstrap.min.css&lt;/title&gt;
    &lt;meta name="robots" content="NONE,NOARCHIVE"&gt;
    &lt;style type="text/css"&gt;
      html * { padding:0; margin:0; }
      body * { padding:10px 20px; }
      body * * { padding:0; }
      body { font:small sans-serif; background:#eee; }
      body&gt;div { border-bottom:1px solid #ddd; }
      h1 { font-weight:normal; margin-bottom:.4em; }
      h1 span { font-size:60%; color:#666; font-weight:normal; }
      table { border:none; border-collapse: collapse; width:100%; }
      td, th { vertical-align:top; padding:2px 3px; }
      th { width:12em; text-align:right; color:#666; padding-    right:.5em; }
      #info { background:#f6f6f6; }
      #info ol { margin: 0.5em 4em; }
      #info ol li { font-family: monospace; }
      #summary { background: #ffc; }
      #explanation { background:#eee; border-bottom: 0px none; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="summary"&gt;
      &lt;h1&gt;Page not found &lt;span&gt;(404)&lt;/span&gt;&lt;/h1&gt;
      &lt;table class="meta"&gt;
        &lt;tr&gt;
          &lt;th&gt;Request Method:&lt;/th&gt;
          &lt;td&gt;GET&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Request URL:&lt;/th&gt;
             &lt;td&gt;http://127.0.0.1:8000/static/personal/css/bootstrap.min.css&lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/table&gt;
    &lt;/div&gt;
   &lt;div id="info"&gt;
  
        &lt;p&gt;&amp;#39;personal/css/bootstrap.min.css&amp;#39; could not be found&lt;/p&gt;
  
    &lt;/div&gt;
  
    &lt;div id="explanation"&gt;
      &lt;p&gt;
        You're seeing this error because you have &lt;code&gt;DEBUG = True&lt;/code&gt; in
        your Django settings file. Change that to &lt;code&gt;False&lt;/code&gt;,     and Django
            will display a standard 404 page.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>