Complete step-by-step guide to put your CSS and JavaScript on GitHub, link it to your Divi Code Module, and make sure any changes you make on GitHub are automatically visible on your Divi-powered website (thanks to jsDelivr).
🔧 STEP 1: Create or Update Your GitHub
Repository
1.
Go
to https://github.com
2.
Log
in and create a new repository:
o Click the + at the top right →
"New repository"
o Give it a name like Hosting-GuardFile
o Choose Public (important so
jsDelivr can access it)
o Click Create repository
📁 STEP 2: Add Your style.css and script.js
Files
You have 2 options:
➤ Option 1: Use GitHub Website
1.
Open
your repo
2.
Click
"Add file" → "Create new file"
3.
Name
it style.css
4.
Paste
your CSS code (e.g. button styles, layouts, etc.)
5.
Scroll
down → Commit changes
Repeat the same for script.js
(JavaScript code).
➤ Option 2: Use GitHub Desktop (optional)
You can also use GitHub Desktop
app to sync your files from your computer — let me know if you want that
method.
🔗 STEP 3: Get the jsDelivr Link to
Your Files
Use this format:
https://cdn.jsdelivr.net/gh/[username]/[repo-name]@[branch]/[file]
Example for you:
If your GitHub username is SaratRout
and your repo is Hosting-GuardFile, and the default branch is main or master,
your links would be:
<!-- CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/SaratRout/Hosting-GuardFile@latest/style.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/SaratRout/Hosting-GuardFile@latest/script.js"></script>
✅ Use @latest so updates are reflected automatically.
💻 STEP 4: Add HTML + Link in Divi Code
Module
1.
Go
to your WordPress site
2.
Open
the Divi page → Edit with Divi
3.
Add
a Code Module
4.
Paste
this:
<div id="my-box">
<h2>This is styled and functional!</h2>
<button onclick="showAlert()">Click Me</button>
</div>
<!-- Link your external files
-->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/SaratRout/Hosting-GuardFile@latest/style.css">
<script
src="https://cdn.jsdelivr.net/gh/SaratRout/Hosting-GuardFile@latest/script.js"></script>
Here the link including Username and File
Name is case sensitive
5.
Save
the module and the page.
🔄 STEP 5: How to Update Your CSS or JS
Anytime you update your style.css or script.js
on GitHub:
- Open
your GitHub repo
- Click
the file → Edit
- Make
your changes
- Scroll
down and click Commit changes
✅ Since you’re using @latest, changes will reflect automatically on your live website within a few minutes (usually instantly).
🧪 Optional: Force Refresh
Sometimes browsers cache CDN files.
You can:
- Use Ctrl
+ F5 to hard refresh
- Or
temporarily use ?v=123 like this:
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/SaratRout/Hosting-GuardFile@latest/style.css?v=2">
✅ You're Done!
Your HTML in Divi stays clean ✅
Your CSS/JS is managed in GitHub ✅
Live updates via jsDelivr ✅
Want me to double-check your GitHub
links or look at your actual files? Just drop them here!