How to Manage Duplicate Code in Static HTML Websites

What is the best way to manage duplicate code in static HTML websites

Out of all the possibilities, both what you listed and anything else I know of, I'd still just run with a simple PHP-based solution. It's easy and clean, requiring next to no effort on your part. I do this with all the small sites I design.

Most often, you end up with fairly trivial structure. You write up a full page, then for each subsequent page you're just changing the bit in the middle where the content lives. In that case, just take everything above and below the content and save it in header.php and footer.php files, then put <?php require_once "header.php"; ?> at the top of each content file (and similarly with the footer file). Done!

This does have some minor disadvantages. For one, you're depending on scripting, but PHP is the most widely deployed server-side language in the world, so that's not really an issue. You don't even care if it's PHP4 or PHP5, since you're not doing anything fancy.

For two, you're running a script on every page load, in order to serve what is essentially a static file. That slows down your responses, and stresses the CPU unnecessarily. This probably doesn't matter much (the lag is very minor), but if you find it wasteful, there are some good PHP frameworks which will take your PHP-generated pages and generate static htmls out of them for you. (This is easy enough to do yourself, too, with just a bit of work using output buffering.) This way you get the best of both worlds - PHP templates (and the full PHP language if you end up wanting something fancier down the line) but static html pages for minimal CPU activity and fastest page load times.

Reducing code duplication using HTML helpers

Since you are using MVC3, I would recommend using child actions for the sub fields:

http://haacked.com/archive/2009/11/18/aspnetmvc2-render-action.aspx

Child actions allow you to execute an action on a controller inside of your view, this would be a much cleaner approach.

How to avoid code duplication in Flask web application

I made it this way:

def render_sidebar_template(tmpl_name, **kwargs):
    if current_user.is_authenticated:  # если залогинен
        trigger_logged_id()
    else:  # иначе
        trigger_logged_out()
    return render_template(tmpl_name,
                           login_button=g.login_button,
                           login_sidebar_class=g.login_sidebar_class,
                           login_button_class=g.login_button_class,
                           signin_button=g.signin_button,
                           signin_button_class=g.signin_button_class,
                           signin_sidebar_class=g.signin_sidebar_class,
                           personal_account=g.personal_account,
                           **kwargs)

And now instead of return render_template(...) I call the above function

@app.route('/')
def home():
    return render_sidebar_template("index.html")

any ideas for avoiding duplicate code in C# and javascript

One way to do this is to expose the logic that generates the markup as a web service on your server and have JavaScript get that markup via an AJAX call rather than duplicating the logic.

This way you can call something like a CreateRow method from JavaScript that will actually invoke the same exact logic that you used on the server when you rendered the page.

Is there such a thing like compiling a website?

On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.

This use case fits very well with template engines, such as Handlebars, Mustache or Pug, just to mention a few. Template engines simplify your development by letting you re-use components across multiple files.

Besides, template engines are (also) good at being complemented with data feeds. This simplifies the process of creating your HTML files even more. Let's look at an example why:

// example taken from Pugjs.org 

ul
each val, index in ['zero', 'one', 'two']
   li= index + ': ' + val

The sample code will render 3 <li> DOM elements from data that can be generated with JavaScript. This allows your website to be dynamic in content. That is exactly the key difference with Static Site Generators.

Static Site Generators (SSGs) can also compile HTML files with reusable components. However, these tools (i.e. Jekyll, Hugo, etc) emphasize more on the "static" compilation of the website, rather than the dynamic data complement. Just to elaborate more on this, Jekyll uses Liquid, which is a template language for HTML. Let's say Jekyll is the engine in charge of the layouts, HTML files, deployment etc. Whereas, Liquid a template language, allows you to do loops similar to Pug (template engine):

{% for post in site.categories.podcasts %}
  <li><a href="{{ post.url }}">{{ post.title}}</a></li>
{% endfor %}

If your website has a lot of static content like blogs with articles, tutorials, images, and even writing documentation or basic text information, SSGs should be your option. For more dynamic content, i.e. fetching from server communication and databases, a template engine is definitely better.

---

If you want even more robust options, then you have Gatsby which is a framework using React for CMS, and again, a static content generator with more capabilities.

Azure Static Websites encoding apostrophes and other characters in a weird way

check if you have this line in the head section

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

---

Related Topics