css - Reusable HTML Head for GitHub Pages - Stack Overflow

admin2025-04-20 0

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>

<!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>

Share Improve this question edited Mar 3 at 0:06 asked Mar 2 at 23:53 Mango 556 bronze badges

1 GitHub page support absolutely all static features, that's it, any applications without server-part code or server-side settings, that is, HTML+CSS+JavaScript+resources. I don't think there is a way to use server-side includes. So, you can generate any HTML content you need. I don't know why would you need to take care of performance if this generation happens only once during lifetime. What are your concerns? So far, I cannot see any problems. – Sergey A Kryukov Commented Mar 3 at 0:06
I am very new to HTML and CSS, I just want replace the codes that I am repeating with a function, without putting bad effect to website. – Mango Commented Mar 3 at 0:08
1 You can use an HTML templating language like Pug. Your repo can contain both the source Pug files (in /src) and the compiled HTML files (in /docs) and you can set up GitHub pages to serve the HTML files. Compilation happens locally on your machine, and then you commit and push to the repo. GulpJS is good for setting up automatic compilation tasks. I recommend looking for Gulp/Pug tutorials. Once you get the hang of Pug, you'll love it. – Sean Commented Mar 3 at 0:11
Thanks, but really I do not understand what you are saying to me, I just started html and css for 2 days, coming from Swift, SwiftUI. Need help to have working function for now. – Mango Commented Mar 3 at 0:13
I do not want copy and past code, I need to know how I can use a func for this example in question, then I can implement the method to my website as well. – Mango Commented Mar 3 at 0:15

| Show 2 more comments

1 Answer 1

Sorted by: Reset to default 0

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.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745114216a285765.html

cssReusable HTML Head for GitHub PagesStack Overflow

最新回复(0)