A static site built using frozen flask doesn't have the CSS files linked to index.html

I am trying to freeze a simple flask blog. The dynamic website works great, After freezing the site, if served using: Freezer.serve() the site is served properly at http://127.0.0.1:5000/

But if I open the index.html file of the built site using Chrome or push it to github pages branch and check the repo site, they are not linked properly to CSS. The site appears bare html.

Here is site.py:

from flask import Flask, render_template, redirect
from flask_flatpages import FlatPages
from flaskext.markdown import Markdown
from flask.ext.assets import Environment as AssetManager
from flask_frozen import Freezer


# configuration
DEBUG = False
ASSETS_DEBUG = DEBUG
FLATPAGES_AUTO_RELOAD = True
FLATPAGES_EXTENSION = '.md'
FLATPAGES_ROOT = 'pages'
FREEZER_RELATIVE_URLS = True


app = Flask(__name__)
app.config.from_object(__name__)
pages = FlatPages(app)
freezer = Freezer(app)
markdown_manager = Markdown(app, extensions=['fenced_code'], output_format='html5',)
asset_manager = AssetManager(app)

@app.route('/')
def index():
    return render_template('index.html', pages=pages)

@app.route('/<path:path>/')
def page(path):
    return pages.get_or_404(path).html

if __name__ == '__main__':
    if len(sys.argv) > 1 and sys.argv[1] == "build":
        app.debug = False
        asset_manager.config['ASSETS_DEBUG'] = False
        freezer.freeze()
    elif len(sys.argv) > 1 and sys.argv[1] == "serve":
        freezer.serve()
    else:
        app.run(port=8000)

base.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block page_title %}Home{% endblock page_title %}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="//fonts.googleapis.com/css?family=Asap:400,400italic,700,700italic&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">
    {%- assets filter="cssmin", output="packed.css",
    "css/style.css"
    %}
        <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
    {%- endassets %}
</head>
<body>
    <div class="container">
        <header class="main-title">
            <h1><a href="{{ url_for("index") }}"><strong>Title</strong></a></h1>
        </header>

        <main class="contents" role="main">
            {% block contents %}
            <p>No content found!</p>
            {% endblock contents %}
        </main>

        <nav class="sidebar">
            <ul>
                <li class="home"><a href="{{ url_for("index") }}" hreflang="en">Home</a></li>
            </ul>
        </nav>


        <footer class="site-footer">
            <p>
                <!-- Footer text -->
            </p>
        </footer>
    </div>
    <!-- /container -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
    <script type="text/javascript" src="/static/js/libs/prettify/prettify.js"></script>
    <script type="text/javascript" src="/static/js/app.js"></script>
</body>
</html>

Solution

Two reasons why the static site was not properly linking the CSS and images.

1) we need to specify FREEZER_BASE_URL and assign the project name. (If you want to publish using githubpages) then the git folder name.

2) On any relative url specified, like <img src="/static/img/us.jpg" alt=""> we need to add the foldername (say project_folder) to the relative url. Like this:

<img src="/project_folder/static/img/us.jpg" alt="">

This solution seems specific to my problem, but playing around with the relative links might prove useful.