Optimizing CSS/JS imports for Static website using common a JS document

Question

Coming from a server side programming background, this might be a noob question.

Currently I have css laid out like below and also JS in a similar fashion.

<link type ="text/css" href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/custom.css" rel="stylesheet">
<link type="text/css" href="css/template.css" rel="stylesheet">

But I have around some 40-50 html pages remaining to be coded and dropped in and all pages share the same CSS/JS more or less.So, how do I avoid this boilerplate typing.Can I just do like below

var navBar = ['<div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a" text-align="">',
                        '<a class="hi-icon hi-icon-fa-home" style="text-decoration:none!important" href="index" title="Blah"></a>Home',
                        '<a class="hi-icon hi-icon-fa-wrench" style="text-decoration:none!important" href="tools" title="Blah"></a>Tools',
                        '<a class="hi-icon hi-icon-fa-folder-o" style="text-decoration:none!important"href="blog" title="Blah"></a>Blog',
                        '<a class="hi-icon hi-icon-fa-user" style="text-decoration:none!important" href="about" title="Blah"></a>About Me',
                    '</div>'].join('\n')

I mean using the same logic to print out <script> and <link> tags?If so, does it have any disadvantages or is there a better way to do it.

If you are open to using a build process like Grunt or Gulp, you could concatenate all the CSS into one file, and all your Javascript into one file and then just reference those two files everywhere. Just regenerate the combined files after you make a change. — GregL
– GregL, Commented Mar 21, 2015 at 12:45
@GregL : Yes,I am open to anything open source.How do I do that ? Do you have any example or anything just to get me started in that direction, I am using Jekyll to build BTW.Thanks for helping :) — Greedy Coder
– Greedy Coder, Commented Mar 21, 2015 at 12:48

GregL · Accepted Answer · 2015-03-21 12:55:28Z

1

Since you are using Jekyll, you should just use the Includes feature built in.

All you do is have a _includes folder in the root folder of your project, and add a js-css.html file in there with all your <script> and <link> tags to reference the JS and CSS files.

Then in your template, you would just have:

{% include js-css.html %}

in your <head> tag everywhere.

answered Mar 21, 2015 at 12:55

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

6 Comments

Greedy Coder Over a year ago

Thanks for that.But it is just throwing up the content without parsing it.Then I found this : nateeagle.com/2011/08/31/jekyll-not-parsing-includes. Let me get back after doing some debugging

GregL Over a year ago

What content are you referring to? Is what is in the js-css.html file just some HTML <script src="..."></script> and <link type="text/css" href="..." rel="stylesheet"> tags?

Greedy Coder Over a year ago

Here is what I did. 1) Put all script,link tags in the js-css.html file inside the _includes folder 2) Using {% include js-css.html %} in head section of my html files to include 3) Did jekyll serve.And the includes is just printed out like HTML i.e it is not getting parsed.What am I doing wrong here?

Greedy Coder Over a year ago

I am not using any jekyll templates.Just using it for disqus and 404 error pages so far.I use a direct HTML template to write content and not markdow,not sure how that will fit in here.

GregL Over a year ago

I haven't used Jekyll myself, sorry. But this page looks promising.

|

Collectives™ on Stack Overflow

Optimizing CSS/JS imports for Static website using common a JS document

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related