How to Add externally hosted JS/CSS in Blogger Template.

I recently started writing blogs on blogger.com, and I find myself struggling with managing JavaScript and CSS files on blogger template as I was using a custom template Editing them directly in the Blogger template can be a hassle, especially when the files get large.(I know most people would not customize there templates frequently but for a new starter it would take time till whole look and feel of their template in a stable state) It’s also not the most efficient way to handle these resources. So, I started exploring ways to move all my JS/CSS to external files. This way it would be much easier for me to manage my template code. I found an excellent solution – jsDelivr and Github! 

jsDelivr is a free, open-source CDN (Content Delivery Network) that provides a fast delivery of files hosted on GitHub. It’s exactly what I needed! 

Step 1: Minify JS/CSS Files 

Before we start, it’s important to note that we’ll be using Node.js (Node Package Manager) for this process. Then the first thing I did was to set up my package.json file. Here’s what my package.json file looks like:

{
  "name": "cfaf",
  "version": "1.0.0",
  "description": "A project using Gulp to minify js/css",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rahulrai89/cfaf.git"
  },
  "keywords": [
    "gulp",
    "automation",
    "build"
  ],
  "author": "Rahul",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rahulrai89/cfaf/issues"
  },
  "homepage": "https://github.com/rahulrai89/cfaf#readme",
  "browserslist": [
    "ie >= 10",
    "ie_mob >= 10",
    "ff >= 30",
    "chrome >= 34",
    "safari >= 7",
    "opera >= 23",
    "ios >= 7",
    "android >= 4.4",
    "bb >= 10"
  ],
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-csso": "^4.0.1",
    "del": "^6.0.0",
    "gulp-sass": "^5.0.0",
    "sass": "^1.43.4",
    "gulp-uglify": "^3.0.2"
  }
}

In the devDependencies section, you can see that I’m using Gulp, along with several Gulp plugins. Gulp is a task runner that we can use to automate common tasks in the development process. In this case, I’m using it to compile, autoprefix, and minify my SASS files into CSS, as well as to minify my JavaScript files. I minified my JS/CSS files using Gulp. Here’s how I did it:

Create gulpfile.js  

// Import the required modules
const { src, dest, series, parallel } = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const csso = require('gulp-csso');
const del = require('del');
const sass = require('gulp-sass')(require('sass'));
const uglify = require('gulp-uglify');

// Gulp task to minify CSS files
function styles() {
  return src('src/sass/styles.scss')
    // Compile SASS files
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    // Auto-prefix css styles for cross browser compatibility
    .pipe(autoprefixer())
    // Minify the file
    .pipe(csso())
    // Output
    .pipe(dest('secure/css'));
}

// Gulp task to minify JavaScript files
function scripts() {
  return src('src/js/**/*.js')
    // Minify the file
    .pipe(uglify())
    // Output
    .pipe(dest('secure/js'));
}

// Clean output directory
function clean() {
  return del(['secure']);
}

// Gulp task to minify all files
exports.default = series(clean, parallel(styles, scripts));

Run

npm install

Step 2: Run Gulp Tasks

Next, I ran the command gulp in my project directory. This executed the default task, which in turn ran my clean, styles, and scripts tasks. The minified CSS and JS files were then outputted to the secure/css and secure/js directories, respectively.

gulp

Step 3: Commit Minified Files to GitHub

After running the Gulp tasks, I pushed these minified files to my GitHub repository. 

Step 4: Use jsDelivr to Serve Minified Files 

At first why we need this step anyway - When you access a file through GitHub’s raw link, it’s typically delivered with a “text/plain” Content-Type Header. This is a standard way for servers to inform your browser about the type of content being sent. However, modern browsers are quite particular about how they interpret and process different types of content. When they receive a file labeled as “text/plain”, they treat it as plain text, regardless of its actual content. This means that even if the file contains CSS, JavaScript, or HTML code, the browser won’t recognize it as such. It will simply display it as plain text, which isn’t very useful for our purposes. 

This is where jsDelivr comes in. It serves files with the appropriate Content-Type Headers, ensuring that browsers interpret them correctly. So, a CSS file is served as “text/css”, a JavaScript file as “application/javascript”, and so on. This allows us to use these files as intended in our Blogger template. 

Instead of using the raw content URLs of my minified CSS and JS files, I used jsDelivr. Here’s how it works: 

The base URL for the jsDelivr CDN service is https://cdn.jsdelivr.net/gh/{username}/{repo}/. You just replace {username} with your GitHub username and {repo} with the name of your repository. So, in my case your GitHub username is rahulrai89 and my repository name is cfaf, the URL would be https://cdn.jsdelivr.net/gh/rahulrai89/cfaf/. 

This way, I was able to link to my minified CSS and JS files directly from my Blogger template, like so:

<link href="https://cdn.jsdelivr.net/gh/rahulrai89/cfaf/secure/css/styles.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdn.jsdelivr.net/gh/rahulrai89/cfaf/secure/js/main.js"></script>

If you’re interested, you can find the source code of the above and my blogger template on my GitHub repository. Just head over to https://github.com/rahulrai89/cfaf And that’s it! Now, managing my JS/CSS files for my Blogger template is a breeze. I hope you find this guide helpful. If you have any questions, feel free to ask.