CODEWITHSUNDEEP
htmlcss
Mango
Mango

Reputation: 43

Reusable HTML Head for GitHub Pages

How can I avoid repeating the same section in multiple HTML files while hosting on GitHub Pages? I want to use a reusable function like myFun(title: String, favicon: URL, styleCSS: [URL]) to dynamically generate the head code content part. What are the best methods to achieve this using only technologies supported by GitHub Pages?

PS: My goal is not recompute head part each time, my goal is to reduce the coding amount in developing time. In other word I do not want my website pages recompute head code for page changes because of using a function for it, that would be very bad in performance, but I want my amount of coding and typing get reduced.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="icon" type="image/png" href="assets/favicon.png"> 
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="shadowStyle.css">
</head>

<body>
    
</body>
</html>

Upvotes: 0

Views: 57

Answers (1)

Brett Donald
Brett Donald

Reputation: 14340

There is no language construct in HTML which allows the inclusion of another HTML document/file/fragment within the current document. If you want to structure your code as you describe, you must use a higher-level templating language such as PHP or Pug or the other ones described here. Some of these languages require server-software which Github won’t have. Your quickest way to get started with HTML and CSS is to do exactly what you are trying to avoid doing, and copy-paste your header code into each of your pages.

This thread provides some clues as to why this feature has never been introduced to the language. This feature could not be introduced in a way which provides for for graceful fallback in older browsers. Therefore, it has never been introduced. Yes, it’s not an ideal situation, it is what it is, so perhaps now you can simply accept the situation and move forward. For most small projects it’s only a minor annoyance.

Upvotes: 0

Related Questions