title: Unable to understand how flask uses url_for
body: <p>I have a very simple use case. I have downloaded the flask clean blog files from the link : <a href="https://startbootstrap.com/template-overviews/clean-blog/" rel="nofollow noreferrer">https://startbootstrap.com/template-overviews/clean-blog/</a> and my intention is to build a blog website.</p>
  
  <p>For starters i am just trying to load the index page using a very simple script :</p>
  
  <p>Test.py :</p>
  
  <pre><code>from flask import Flask,render_template
  
  app = Flask(__name__)
  
  @app.route('/index')
  def index():
      return render_template('index.html')
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>
  
  <p>I have the below module structure :</p>
  
  <pre><code>C:.
  │   Test.py
  │
  ├───static
  │   └───css
  │           bootstrap.min.css
  │           clean-blog.min.css
  │           font-awesome.min.css
  │
  └───templates
          index.html
  </code></pre>
  
  <p>Now my index.html file is as follows :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
    &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;Clean Blog - Start Bootstrap Theme&lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}" &gt;
  
      &lt;!-- Custom fonts for this template --&gt;
      &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}"  &gt;
      &lt;link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic'  type='text/css'&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'&gt;
  
      &lt;!-- Custom styles for this template --&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static',filename='css/clean-blog.min.css') }}" &gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;!-- Navigation --&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"&gt;
        &lt;div class="container"&gt;
          &lt;a class="navbar-brand" href="index.html"&gt;Start Bootstrap&lt;/a&gt;
          &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
            Menu
            &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse" id="navbarResponsive"&gt;
            &lt;ul class="navbar-nav ml-auto"&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="index.html"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="about.html"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="post.html"&gt;Sample Post&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="contact.html"&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;!-- Page Header --&gt;
      &lt;header class="masthead" style="background-image: url('img/home-bg.jpg')"&gt;
        &lt;div class="overlay"&gt;&lt;/div&gt;
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
              &lt;div class="site-heading"&gt;
                &lt;h1&gt;Clean Blog&lt;/h1&gt;
                &lt;span class="subheading"&gt;A Blog Theme by Start Bootstrap&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;!-- Main Content --&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
            &lt;div class="post-preview"&gt;
              &lt;a href="post.html"&gt;
                &lt;h2 class="post-title"&gt;
                  Man must explore, and this is exploration at its greatest
                &lt;/h2&gt;
                &lt;h3 class="post-subtitle"&gt;
                  Problems look mighty small from 150 miles up
                &lt;/h3&gt;
              &lt;/a&gt;
              &lt;p class="post-meta"&gt;Posted by
                &lt;a href="#"&gt;Start Bootstrap&lt;/a&gt;
                on September 24, 2018&lt;/p&gt;
            &lt;/div&gt;
            &lt;hr&gt;
            &lt;div class="post-preview"&gt;
              &lt;a href="post.html"&gt;
                &lt;h2 class="post-title"&gt;
                  I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
                &lt;/h2&gt;
              &lt;/a&gt;
              &lt;p class="post-meta"&gt;Posted by
                &lt;a href="#"&gt;Start Bootstrap&lt;/a&gt;
                on September 18, 2018&lt;/p&gt;
            &lt;/div&gt;
            &lt;hr&gt;
            &lt;div class="post-preview"&gt;
              &lt;a href="post.html"&gt;
                &lt;h2 class="post-title"&gt;
                  Science has not yet mastered prophecy
                &lt;/h2&gt;
                &lt;h3 class="post-subtitle"&gt;
                  We predict too much for the next year and yet far too little for the next ten.
                &lt;/h3&gt;
              &lt;/a&gt;
              &lt;p class="post-meta"&gt;Posted by
                &lt;a href="#"&gt;Start Bootstrap&lt;/a&gt;
                on August 24, 2018&lt;/p&gt;
            &lt;/div&gt;
            &lt;hr&gt;
            &lt;div class="post-preview"&gt;
              &lt;a href="post.html"&gt;
                &lt;h2 class="post-title"&gt;
                  Failure is not an option
                &lt;/h2&gt;
                &lt;h3 class="post-subtitle"&gt;
                  Many say exploration is part of our destiny, but it’s actually our duty to future generations.
                &lt;/h3&gt;
              &lt;/a&gt;
              &lt;p class="post-meta"&gt;Posted by
                &lt;a href="#"&gt;Start Bootstrap&lt;/a&gt;
                on July 8, 2018&lt;/p&gt;
            &lt;/div&gt;
            &lt;hr&gt;
            &lt;!-- Pager --&gt;
            &lt;div class="clearfix"&gt;
              &lt;a class="btn btn-primary float-right" href="#"&gt;Older Posts &amp;rarr;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;hr&gt;
  
      &lt;!-- Footer --&gt;
      &lt;footer&gt;
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-lg-8 col-md-10 mx-auto"&gt;
              &lt;ul class="list-inline text-center"&gt;
                &lt;li class="list-inline-item"&gt;
                  &lt;a href="#"&gt;
                    &lt;span class="fa-stack fa-lg"&gt;
                      &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-twitter fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
                    &lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="list-inline-item"&gt;
                  &lt;a href="#"&gt;
                    &lt;span class="fa-stack fa-lg"&gt;
                      &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-facebook fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
                    &lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="list-inline-item"&gt;
                  &lt;a href="#"&gt;
                    &lt;span class="fa-stack fa-lg"&gt;
                      &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-github fa-stack-1x fa-inverse"&gt;&lt;/i&gt;
                    &lt;/span&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;p class="copyright text-muted"&gt;Copyright &amp;copy; Your Website 2018&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
  
      &lt;!-- Bootstrap core JavaScript --&gt;
      &lt;script src="vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/bootstrap/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom scripts for this template --&gt;
      &lt;script src="js/clean-blog.min.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I am not sure why but this does not seem to work. The navigation bar is not visible .</p>
  
  <p>Even more strangely when i change the lines :</p>
  
  <pre><code>&lt;link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}" &gt;
  &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}"  &gt;
  &lt;link rel="stylesheet" href="{{ url_for('static',filename='css/clean-blog.min.css') }}" &gt;
  </code></pre>
  
  <p>to </p>
  
  <pre><code>&lt;link rel="stylesheet" href="{{ url_for('static',filename='bootstrap.min.css') }}" &gt;
  &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='font-awesome.min.css') }}"  &gt;
  &lt;link rel="stylesheet" href="{{ url_for('static',filename='clean-blog.min.css') }}" &gt;
  </code></pre>
  
  <p>everything works normally and i can see the indentation and navigation bar works normally . Ideally it should not work since the css files are inside the /static/css folder and not directly under static.</p>
  
  <p>Can someone please tell me what is the issue here ?</p>
  
  <p>Thanks in advance.</p>