How To Serve Django Static Files In Pythonanywhere And Heroku

To configure staticfiles,you would need to follow the steps below to make sure you set them correctly.

Websites generally need to serve additional files such as images, JavaScript, or CSS. In Django, this is refer to as “static files.

In this post I assumed you have a project already and your static files aren’t showing up or you want to configure your static files.

Incase you dont have or dont know how to start a website without any prior knowledge read this posts

This configurations works well on pythonanywhere, heroku, deployment/production and development

#go to settings.py and add import os

<strong>import</strong> os #here

To set up your static files open settings.py then at the end include this configurations in your settings.py

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

Go to your project directory and create a folder and name is static then inside of it you can create your staticfile. that files that end with .css, .js or image too. if you want to use subfolder make sure to include then in your template.

You can see that our static files is configured globally and any app we start can use it because of it is at the root/base directory.

Now go to your base directory where your app and project is found then create a new folder name it static.

Again you have to install white noise for automatical cobfigurations. This is because of heroku and pythonanywhere.

if you don’t install white noise you may need alternative means in deploying to heroku. In pythonanywhere if you don’t install white noise you might need a lots of configurations in your web app static configurations.

Therefore run this command to install whitenoise.

pip install whitenoise

after the installations is done add whitenoise middleware to your configurations.

MIDDLEWARE =
<strong>[
"whitenoise.middleware.WhiteNoiseMiddleware",
]</strong>

After you have done this ,your site would serve staticfiles authomatically

Note: After the installation of white noise your site will serve static files automatically after the collection of staticfiles

For pythonanywhere users you might need to enter the path of the staticfiles in the webapp staticfiles.
Lets demonstrat with example how this static files are being use in image, javascript and css.

I assumed that you have created a static folder in your basic directory.

if you are creating a sub folder for static files then you have to add them in your static files. say for example I stored my javascript files at static/java/javascript.js then when serving it to django i will serve it like this

<<strong>body</strong>>
<<strong>script</strong> type="text/java" src="{% static 'java/javascript.js' %}"></<strong>script</strong>>

</<strong>body</strong>>

Now for image we follow the same approach

<<strong>link</strong>
      rel="icon"
      type="image.png"
      href="{% static 'image/favcon.jpg' %}"
    />

The above image is for icon so it is served with links, the one of image source is below

<<strong>img</strong>
          id="think"
          src="{% static 'image/thinkbig.jpg' %}"
          alt="ThinkBig"
        />
<--you can use this anywhere you want the image to show up-->

Now for css same thing with image

<<strong>head</strong>>
<<strong>link</strong> rel="stylesheet" href="{% static 'signup.css' %}" />
  </<strong>head</strong>>
<<strong>body</strong>>
<<strong>p</strong>>
study where i have placed my css and how i placed it so that it will load before any other stuff on the page 
</<strong>p</strong>>
</<strong>body</strong>>

{% load static %} <!-- include this in your template if not there would be an error--->
<!DOCTYPE <strong>html</strong>>
<<strong>html</strong> lang="en">
  <<strong>head</strong>>
    <<strong>meta</strong> charset="UTF-8" />
    <<strong>meta</strong> http-equiv="X-UA-Compatible" content="IE=edge" />
    <<strong>meta</strong> name="viewport" content="width=device-width, initial-scale=1.0" />
    <<strong>title</strong>>Staticfiles| Benchatronics</<strong>title</strong>>
<!-- you configure your image like this-->
    <<strong>link</strong>
      rel="icon"
      type="image.png"
      href="{% static 'image/favcon.jpg' %}"
    />
<!--image configuration ends here-->
<!--always add your static files here inside the header-->
    <<strong>link</strong> rel="stylesheet" href="{% static 'signup.css' %}" />
  </<strong>head</strong>>

  <<strong>body</strong>>
    <<strong>nav</strong> >
      <<strong>div</strong> class="logo">
        <<strong>img</strong>
          id="think"
          src="{% static 'image/thinkbig.jpg' %}"
          alt="ThinkBig"
        />

        <<strong>img</strong>
          style="border-radius: 40px"
          id="icon"
          src="{% static 'image\night_mode.png' %}"
          class="night"
        />
    <!-- You add your javascript here-->
<<strong>script</strong> type="text/javascript" src="{% static 'javascript.js' %}">
</<strong>body</strong>>
   </<strong>html</strong>>

Now after the above configurations go to your pythonanywhere and set up the static file like my own below.

If you watch very well you will realize that i didn’t specify static files directory i only did this for image this was because we installed white noise.

To copy the url go to your files and copy the root folder of the image then specify image in the url then the path you copied in the path.

If you want to specify staticfiles too you can copy the root folder of files on pythonanywhere staticfiles path then add it to the path as the image path earlier copied .

Then the static url would be /static/ depending on what you named your own .

Don’t be a ghost reader if this works for you leave us a comment below