Static file not being served to my individual blog pages - css

Question

I am having trouble with serving a css file to the individual blog posts in the blog portion of my website.
So the way it works:
Go to /blog- you get the blog page and that works fine.
But when I am trying to get to, for example, /blog/post1 I am getting an error
http://localhost:4000/blog/static/css/style.css
I'd appreciate the help because I'm pretty new to express and routing files around and around. Cheers.
My file structure looks like this
blog
/node_modules
/src
/mock
/public
/css
style.css
/templates
/partials
_head.jade
_nav.jade
blog.jade
index.jade
layout.jade
post.jade
app.js
So the way it works:
Go to /blog- you get the blog page and that works fine.
But when I am trying to get to, for example, /blog/post1 I am getting an error
http://localhost:4000/blog/static/css/style.css
Here is what my respective files look like, maybe I'm missing something:
app.js
"use strict";
var express = require("express"),
posts = require("./mock/posts.json");
var postsLists = Object.keys(posts).map(function(value){
return posts[value]
});
var app = express();
app.use("/static", express.static(__dirname + "/public"))
app.set("view engine", "jade");
app.set("views", __dirname + "/templates");
app.get("/", function(req, res){
res.render("index");
});
app.get("/blog/:title?", function(req, res){
var title = req.params.title;
if (title === undefined) {
res.status(503);
res.render("blog", {posts: postsLists});
} else {
var post = posts[title] || {};
res.render("post", {post: post} );
}
});
app.get("/about", function(req, res){
res.send("<h1>About Page</h1>");
})
app.get("/projects", function(req, res){
res.send("<h1>Projects Page</h1>")
})
app.listen(4000, function(){
console.log("Frontend server is running on port 4000.")
});
_head.jade
head
meta(charset="UTF-8")
link(rel="stylesheet", href="static/css/style.css")
layout.jade
doctype html
html(lang="en")
include ./partials/_head.jade
body
block content
blog.jade
extends ./layout
block content
section(id="postHolder")
for post in posts
div.post
h2 #{post.title}
p #{post.body}
a(href="/blog/" + post.title)
button Read More
post.jade
extends ./layout.jade
block content
section
div.post
h2 #{post.title}
p #{post.body}
p This is the actual post page itself.

Answer 1

I guess doing this will get you there -
head
meta(charset="UTF-8")
link(rel="stylesheet", href="/css/style.css")

Answer 2

Okay so I want to draw your attention to my _head.jade file:
head
meta(charset="UTF-8")
link(rel="stylesheet", href="/static/css/style.css")
I needed to make a reference to the absolute path and add the "/" in front of "static"
It used to be static/css/style.css and now it's
/static/css/style.css I'm pretty new to this and I don't know if I explained the reference to the absolute path correctly.