Forums

How do to host a static page

Hi,

i build my personal web page as static html page using Flask, Flask-FlatPages and Frozen-Flask. So after building my site i get bunch of static HTML files. But how so host them on PythonAnywhere?

My plan was to create a new web site on PythonAnywhere and set the static files to URL "/" pointing to the root of my web directory (e.g. "/home/{username}/mysite/"). Does this work, or ist there any better way?

And do i have to make any changes to WSGI file?

http://net.tutsplus.com/tutorials/python-tutorials/an-introduction-to-pythons-flask-framework/

Is how I done it, I don't think there is any point using Frozen-Flask. You would only need to do that if you were using a host that did not support dynamic content, which defies the object of using Pythonanywhere.

Also you would skip the Flask installation bit on those instructions! If you look at those instructions, the 'static' parts are just loaded as required.

It is a good introduction to how Flask and other web apps work. And lets you build up to more complicated things.

Hope that helps!

Thanks for the information.

But the reason why i have written a static page generator isn't some lack of knowledge or stuff like that. I simply like the idea of static page generators. And since my page has no dynamic content - what could be better and faster than simple html files genereated from some markdown files.

I found a similar topic here, but there is no information about how to serve the generated content with PythonAnywhere.

Anyway, the trick with setting the static files URL "/" pointing to the web root where my html files are located seems to work fine. I just wonder if there is a more elegant way of doing this.

@AlexanderRuf, that's the way to serve static files on PythonAnywhere.

I've written up an official guide in our help pages: how to serve a static site on PythonAnywhere -- suggestions for improvement encouraged!

Should this work on an existing app https://help.pythonanywhere.com/pages/hosting-a-static-site

I've specified /blog/ as the URL but it doesn't appear to be working

It should work yes. What's not working? What's an example:

  • url that should be working
  • path to that file on disk
  • and what's the entry in your static files mapping on the web tab?

Hello, I tried serving a static template as indicated in the thread except that it is not in the "/" URL, but in "/template/" URL

http://fitsoft.pythonanywhere.com/template/index.html works fine http://fitsoft.pythonanywhere.com/template/ (with trailing slash) works fine

http://fitsoft.pythonanywhere.com/template (withOUT trailing slash) does not load any of the imports (CSS, JS).

Is there any fix for this? Thank you, fitsoft

If you check your browser's developer console, you'll see lots of 400 errors on the page without the trailing slash. An example URL: http://fitsoft.pythonanywhere.com/css/responsive.css. Looking at what happens when you hit the page with the trailing slash, I think the URL that it should be looking at is http://fitsoft.pythonanywhere.com/template/css/responsive.css.

This is because you're including the stylesheets into your HTML using code like this:

<link rel="stylesheet" href="css/responsive.css">

The way URLs are calculated by the browser, based on the document URL is:

  • If the document URL ends with a slash, it's treated like a "directory", and so relative URLs are just added on to the end. So, http://fitsoft.pythonanywhere.com/template/ plus css/responsive.css becomes http://fitsoft.pythonanywhere.com/template/css/responsive.css
  • If the document URL does not end with a slash, it's treated like a "file", and so relative URLs are based on its containing "directory". Thus: http://fitsoft.pythonanywhere.com/template plus css/responsive.css becomes http://fitsoft.pythonanywhere.com/css/responsive.css

If you want your page to be able to get its CSS regardless of whether it's accessed using a slash or not, you'll need to use an absolute URL to reference the assets, like this:

<link rel="stylesheet" href="/templates/css/responsive.css">