0

I am building out my very first website and already anticipating hundreds of pages. I'm using Host Gator and coded everything myself.

I don't want to have to manually update 100's of pages if I need to update my CDN links, meta tags, Favicon, or add new items.

My current solution is a JS file that sits in the head like so:

<head>
     <script src="assets/generateHead.js"></script>
</head>

It holds(adds) my google fonts, bootstrap cdn, site css stylesheet, favicon, jQuery CDN, and site .js file. to my .

Script Example:

if(!document.getElementById('googleFont1')) {
var link = document.createElement('link');
link.id = 'googleFont1';
link.rel = 'stylesheet';
link.href = 'https://fonts.googleapis.com/css?family=Architects+Daughter';
document.head.appendChild(link);

etc. etc.

Is this a good or best practice for maintaining the HTML content? Should I leave my site.css and .js files out and just keep the meta, cdn and favicon links in there?

Bangarang
  • 1
  • 2
  • 3
    Can your server run PHP? If so, you can use PHP "includes" for your header and footer - allowing you to maintain the global header/footer in a separate PHP file. If not, then you can use a templating framework like Moustache.js to maintain a single header and single footer template that applies dynamically to each page. – Korgrue Jul 11 '17 at 14:36
  • 1
    You can do that. You might end up with [fout/fouc](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). If the server supports PHP, you could always use a PHP include. https://stackoverflow.com/questions/8054638/creating-a-php-header-footer – Michael Coker Jul 11 '17 at 14:36
  • What about devices and browsers with JS turned off? No love? – I haz kode Jul 11 '17 at 14:43
  • @I haz kode do you have js turned off? It is too small percentage to care about nowadays. – Morpheus Jul 11 '17 at 14:46
  • 1
    @Morpheus -- keep in mind that humans aren't the only users of your website. See also: https://www.stephanboyer.com/post/122/does-google-execute-javascript – Shauna Jul 11 '17 at 14:57
  • @Ihazkode [stackoverflow.com/questions/9478737/...](https://stackoverflow.com/questions/9478737/browser-statistics-on-javascript-disabled) – War10ck Jul 11 '17 at 14:58

3 Answers3

0

Short answer: no, this is not "best practice." It may even be bad for your SEO (read: people may not be able to find your site, making the number of humans who don't have JS turned on a moot point).

It's also arguably unnecessary. How often are you really going to change the name of your assets once you have them in? As a professional developer, I'd argue the answer is "very rarely," especially if your CDN based assets are such that you request a major version (ie - "3.x") and let the library maintainer handle the minor versions.

If you're dealing with hundreds of pages, you'll want to look into templating of some sort, since maintaining that in any form (not just the assets) is going to be cumbersome.

Depending on your hosting, you may have access to PHP or possibly Ruby or Python. Each of these server side languages have templating systems for websites and now would be a good time to check them out.

If your hosting option doesn't have that, there are also JavaScript options.

As mentioned in the comments, Moustache.js is a good option, and is available for many languages (including JavaScript, PHP, and Ruby), making it a good option regardless of what your hosting option has available.

If you're just experimenting, you can also toy with HTML Templates, which are part of the new HTML component standards. However, be mindful that Internet Explorer does not support them at all.

Once you choose your templating solution, you can then create a template partial that houses all of the content of your head (or, depending on the templating system, you can create a "layout" that houses that data, as well as the core structure of your site; refer to the documentation for information on which way to go). That way, you only need to update one file when things change.

You can also then pull out your CSS from the JavaScript file, so you don't get a flash of unstyled content (FOUC) when your page loads (you'll probably want to do that, anyway, regardless of what route you go).

Shauna
  • 9,495
  • 2
  • 37
  • 54
  • Thank you very much Shauna! You are correct I don't see any reason as to why one would change their asset name (mysite.css, mysite.js) but definitely the favicon and CDN files (ex Bootstrap releases a new feature that I want). I will look into Templates, PHP, Ruby and Python, which I haven't done before and have only been researching javascript solutions. – Bangarang Jul 11 '17 at 15:25
0

Well, I would certainly not use JavaScript for this, as that is terrible for SEO. You need to use a server side solution. Of these, I have two.

The first is PHP, which allows include 'head.txt'

The second is SSI (.shtml), which allows <!--#include virtual="head.txt" -->

IF YOU DON'T KNOW ANY server side languages, use this one. It's not the best language, however, it is by far the easiest to use, and your server will support it. Additionally, it is essentially an HTML file, where you change the extension to .shtml

Keep in mind that similar functions and methods likely exist in other languages, I know from a buddy, that asp and asp.NET have this capability, I just don't know how to use them.

Ben
  • 2,200
  • 20
  • 30
  • Thanks Ben! I have never heard of .shtml before. So both replies have shown me that the best solution is a server side solution. This really helps! – Bangarang Jul 11 '17 at 16:28
0

You already have answers explaining why you need a server side solution. I would like to offer an alternative solution. What you really need is some kind of scripting language to automate the tedious job of keeping all of the links in your tag updated. And these server side solutions offer you just that: a programming language (PHP is often mentioned) that automatically combines your templates (the part of your websites that is the same on all of your 100's of pages, eg the header and footer and everything inside ) with your real content.

Static site generators offer you the same but on your own computer. You manually write the html that has to be repeated on every page (just like you seem to be doing now) and save it as a template. The static site generator is a script that runs on your own computer. It combines all of your 100+ content pages with the template and produces 100+ complete html pages that you can then upload to your hosting provider.

If you want to update the favicon or version of bootstrap, you just run the script again and 100+ pages get updated all at once.

There are some advantages to generating sites on your own computer and then uploading them: some people argue that a server that only serves html pages is faster and less vulnerable than a server that also runs a scripting language.

There are some disadvantages to this solutions as well, mainly the need to reupload all of your html pages everytime you generate them again because there is one small change in your template.

This article is a good introduction

jpuntd
  • 902
  • 6
  • 9
  • I would have to see if Host gator would allow be to bulk upload everything from the root. If so this is also a great solution to check out. Thanks snwclone! – Bangarang Jul 11 '17 at 18:13