How to run html with css using golang

Question

everyone, I have a problem with including css in html files through golang file. The output on the local server is only the html file but no css, how can I fix it?

Maybe problem with the way I use template package, so could you explain how to make routing differently? Example: When you go http://localhost:8080/login and it would show login.html. I saw net/http documentation about it but either I'm blind or I just try to found wrong things there. All files are in the same directory

welcome.html

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
    <link rel="stylesheet" href="style.css" >
</head>

<body>
    <link rel="stylesheet" href="style.css">
<form action="">
    <center><h1>Enter</h1></center>
        <div class="group">
            <label for="">Login:</label>
            <input type="text">
        </div>
        <div class="group">
            <label for="">Password:</label>
            <input type="password">
        </div>
    <div class="group">
            <center><button>Come in</button></center>
        </div>
    <center><a href="regist.html" class="link">Registration</a></center>
    </form>

</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
body
{
    font-family: "Comic Sans MS";
    background-image: url(images/bg.jpg);
    background-repeat: repeat ;
    background-size: 80px 80px ;
}
h1
{
margin: 0;
text-transform: uppercase;
padding-bottom: 5px;
border-bottom: 3px solid rgba(58,87,15,0.80);
}
form 
{
    margin : 0 auto;
    background: rgba(123,170,52,0.76);
    width: 450px;
    height: 350px;
    padding: 20px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}
.group
{
    margin: 16px ;
    padding: 5px;

}
label
{
    padding-left: 10px;
    text-transform: uppercase;
}
input
{
    margin-top: 5px;
    height: 30px;
    width: 400px;
    border-radius:20px/20px;
    border: none;
    padding-left: 15px;
    font-size: 18px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}

input:focus{
    border: 2px solid #264503;
    transform: translateX(15px);
    width: 385px;
}
button{
    font-family: "Comic Sans MS";
    cursor: pointer;
    padding: 10px 20px;
    height: 40px;
    color:aliceblue;
    background: rgba(21,73,3,1.00);
    border: none;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
}
button:hover{
    font-weight: bold;
    transform: scale(1.1);
}

.link{
    font-family: "Comic Sans MS";
    cursor: pointer;
    padding: 10px 20px;
    height: 40px;
    color:aliceblue;
    background: rgba(21,73,3,1.00);
    border: none;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.82);
    text-decoration: none; 

}

goFile.go

package main

import (
    "fmt"
    "html/template"
    "net/http"
)

func welcome(w http.ResponseWriter, r *http.Request) {

    tmpl := template.Must(template.ParseFiles("welcome.html"))

    tmpl.Execute(w, nil)
}

func login(w http.ResponseWriter, r *http.Request) {
    tmpl := template.Must(template.ParseFiles("login.html"))

    tmpl.Execute(w, nil)
}

func main() {
    http.HandleFunc("/", welcome)
    http.HandleFunc("/login", login)

    fmt.Println("Listening...")
    http.ListenAndServe(":8080", nil)
}

**The output is following: **

Summarize: How to display page with css using golang net/http or html/template packages? How to do routing between pages properly? Sorry for mistakes. Thanks in advance, guys!

So, you've opened up Developer Tools in your browser (any of them now have them built-in), cleared the cache and re-tried your request with the "Network" tab there active, right? Did it show you that the request for the CSS file failed with 404? I mean, you either failed to perform the most straightforward check or failed to inform us about the full details. Either one is not too good, you know ;-) — kostix
– kostix, Commented Apr 6, 2020 at 10:17

xarantolus · Accepted Answer · 2020-04-06 10:16:48Z

9

Your Go server doesn't know that it should serve style.css because you never told it to. If you move that file to an assets/ subdirectory, you can register a handler to serve that directory:

http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))

Also see this answer.

answered Apr 6, 2020 at 10:16

xarantolus

2,0491 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mkopriva Over a year ago

This won't work without also updating the html hrefs, or will it? The hrefs also need to be absolute rather than relative or else the browser will look in /login/assets/styles.css when serving /login.

Collectives™ on Stack Overflow

How to run html with css using golang

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related