Tried hosting my site, css and database not working.

So I made a simple site to function as a small scale leaderboard and I am trying to post it on my Raspberry Pi. I created the site on my laptop and when I run python manage.py runserver and open it up in my browser it all works fine. The page is there, the css is there, and all the individuals on the leaderboard are on the leaderboard. However when I tried running it on my raspberry pi and tried to view it, the HTML was there, but the CSS wasnt, and neither where the individuals on the leaderboard.

How I tried to host the site locally:

  1. I created a virtual environment at the root of my rpi with virtualenv site
  2. In site/ I copied over the files of my django site from my laptop
  3. Following an online guide I installed apache2 and mod-wsgi
  4. I ran source bin/activate to run the virtual environment and then installed django with pip
  5. Following this site I configured /etc/apache2/apache2.conf (you can find what it looks like here)
  6. I ran sudo apachectl start and then python manage.py runserver 192.168.178.42:8000

After this I opened it up in my browser and came across my problem. Also I should note that when I open the admin page (also lacks css) and log in to it, I can see my Individual class in models.py and all the objects I created, but they just don’t appear on the site when they previously did before I tried hosting it.

Thanks

Posting this in a separate reply as I’m limited to 2 links per post, but here is the directory tree of my site. (I removed the extra files created by the virtualenv so I could fit it into one photo)

Do your have your settings correct for static files?

(You don’t want to serve static files from within your project directories. You want your static files copied to a different directory and served from there. See Deploying static files for more information.)

Did you remember to do a “collectstatic”, to move your static resources to their proper directory?

Do you have your apache configuration right to serve those resources?

Also, look at the developer tools on your browser under the “network” tab to see what’s being requested from the server, and verify the URLs being rendered.

It’s also worth finding the log files on the server to see what Apache has to say about those requests.

Ken

Do your have your settings correct for static files?

(You don’t want to serve static files from within your project directories. You want your static files copied to a different directory and served from there. See Deploying static files for more information.)

Did you remember to do a “collectstatic”, to move your static resources to their proper directory?

I tried running python manage.py collectstatic and got the following error
PermissionError: [Errno 13] Permission denied: '/robots.txt'
I’m not sure how exactly to solve it. I tried doing chmod +rw on robots.txt and the error seems to persist

Also, look at the developer tools on your browser under the “network” tab to see what’s being requested from the server, and verify the URLs being rendered.

I tried that and its giving me a 404 not found error with the request url being the path to my styles.css file.

Do you have your apache configuration right to serve those resources?

Honestly, I’m not quite sure what how exactly the configuration works as this is my first time doing anything like this, but my apache2.conf looks like this:
Alias /static/ /home/ubuntu/site/leaderboard/static/

<Directory /home/ubuntu/site/leaderboard/static>
Require all granted
</Directory>

In your settings file, what are your settings for STATIC_URL and STATIC_ROOT?

(STATIC_ROOT needs to point to a real directory on your server.)

Might also help to actually see the html that was rendered to see the URL being requested.

STATIC_ROOT = '/home/ubuntu/site/leaderboard/static/'
STATIC_URL = '/static/'

I checked the console again on Firefox and saw the following
The resource from “http://192.168.178.42:8000/static/leaderboard/styles.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

I looked it up briefly, but I’m quite busy today so I’ll look into it more tomorrow.

First, you want static_root to be outside your project directory structure. You could create a directory directly in /home/ubuntu named static, then set STATIC_ROOT=’/home/ubuntu/static’. Your collectstatic should then show all the files being copied to this directory.

IIRC, your Alias doesn’t need to include the static component, so it would then look more something like this:
Alias /static/ /home/ubuntu/
(if I’m mis-remembering, then it becomes):
Alias /static/ /home/ubuntu/static/

I’m not sure off the top of my head what the mime issue would be - I’m guessing there’s some type of interaction with this being specified within your project directories, but that’s a real guess.

I’d try getting this moved out to a more proper location and giving it another shot.

Ken

I set STATIC_ROOT='/home/ubuntu/static' and that allowed me to run python manage.py collectstatic successfully. However despite changing the alias to both of the examples you gave, I wasn’t able to get the CSS to display with the console giving me the same MIME type mismatch error as detailed above

Ok, so a quick search shows that this error on the browser side will appear if the Apache process can’t read the file. (Does not exist or no permissions - I’m guessing Apache is returning an HTML 404 response which the browser is objecting to.)

You need to verify that the process running Apache has access to that directory - I know I’ve had problems in the past with trying to keep things in /home in Ubuntu. You may want to switch the static directory to something like /var/www/static and change the ownership to www-data, or whatever ID is running the server process.

You may also want to pull the Apache logs to see what information they have, and if necessary, raise the logging level.

But I’m guessing right off-hand that it’s permissions-related.

Ken