Cara Hosting CSS, JavaScript dan HTML di CDN GitHub Page

Hosting CSS, JavaScript dan HTML di GitHub Page - Pada tutorial kali ini, saya akan menjelaskan cara hosting CSS, JavaScript dan HTML di GitHub Page.

Inti dari tutorial ini, sobat tidak perlu lagi CDN yang lain seperti Statitically, RawGit, GitHack dll, cukup dengan CDN GitHub Page

Apabila sobat belum punya GitHub Page, silahkan buat dulu Halaman Github, kunjungi: Cara Termudah membuat Github Page / Halaman Github.

Cara Hosting CSS dan JavaScript

Untuk hosting CSS dan JavaScript ini sangat mudah, seperti biasa sobat tinggal upload file CSS atau JavaScript melalui Add File > Upload File (saya anggap sobat sudah paham tentang ini). CSS atau JavaScript bisa diletakan di folder utama (master) atau bisa di Folder baru. Bagi yang belum paham cara membuat Folder di GitHub, ikuti caranya:

Cara Membuat Folder Baru di Repository Github

Contoh : Katakan lah sobat mau membuat file dengan nama chart.js dan mau disimpan di folder js, sementara foldernya belum ada. Maka Silahkan buat file baru, Add File > Create new file, kemudian pada Name your file, isi namafolder/namafile pada kasus di atas contohnya js/chart.js. Perhatikan gambar.

Cara Mengambil URL CSS dan JavaScript

Untuk URL CSS atau JavaScript, kita tinggal melihat posisi dimana File itu disimpan. Sebagai contoh saya punya custom.css tersimpan di Folder Utama, maka linknya :

https://cdnblogger.github.io/custom.css
Apabila kode ada pada folder, maka sertakan folder dan nama file.

Cara Hosting HTML di GitHub Page / Membuat beberapa Web Statis di GitHub Page

Berbeda dengan CSS dan JavaScript, maka file HTML tidak bisa langsung diupload. Kalaupun kita upload dan kita buka linknya, maka file Not Found (tidak ditemukan).

Ada beberapa langkah untuk bisa hosting file HTML di GitHub Page

1. Buat Custom CSS

Custom CSS ini natintya akan kita gunakan pada header baru yang akan kita buat, yang nantinya akan berbeda dengan halaman utama. Sebagai contoh saya membuat file custom.css sederhana. Isinya seperti ini :

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ptsans/v12/jizaRExUiTo99u79D0-ExdGM.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
.demo-container {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: 16px;
}

Sebetulnya ini opsional, bisa diakhirkan. Tapi akan lebih mudah nantinya untuk pembuatan layout.

2. Buat Layout Baru

Nah ini intinya, untuk membuat layout yang berbeda dengan Halaman Utama, kita perlu membuat layout baru, caranya buka folder _layout seperti pada gambar ini,

kemudian buat file baru, misalkan namanya halamandemo.html. isikan kode HTML seperti ini :

<!DOCTYPE html>
<html>
  <head>
  <html lang="en-US">
  <title>{% if page.title %}{{ page.title }} – {% endif %}{{ site.name }}</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <link href="{{ site.baseurl }}/images/ki-icon.ico"  rel="icon" type="image/x-icon">	  
  <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/custom.css" />
</head>

<body>

  <div class="demo-container">
    {{ content }}
  </div>

</body>
</html>

Perhatikan pada kode :

href="{{ site.baseurl }}/custom.css"

Kode tersebut adalah Custom CSS yang pertama tadi kita buat. Apabila mau menggunakan favicon perhatikan juga linknya. Kemudian klik Commit new file untuk menyimpan. Apabila ada kesalahan, santai aja, kita bisa edit nantinya.

Cara Membuat file HTML pada GitHub page

Setelah selesai dengan pembuatan layout baru, sekarang kita akan membuat file HTML. Sebagai contoh saya membuat file demo-hosting-html.md.

Harus diperhatikan, dalam pembuatan file html di GitHub page, harus menggunakan ekstensi .md atau .markdown, tidak bisa menggunakan ekstensi .html

maka pembuatannya seperti gambar ini :

perhatikan 3 baris teks pertama

---
layout: halamandemo /* ini adalah layout yang baru kita buat */
title: Demo HTML GitHub Page /* ini judul yang akan tampil di browser */
permalink: /user/demohtml/  /* ini link (URL) yang kan kita gunakan */
---

Cara Mengambil link (URL) HTML pada GitHub page

Setelah membuat file dengan ekstensi md, maka untuk membukanya perhatikan kode di atas permalink: /user/demohtml/, maka URL file yang kita buat adalah namahalaman.github.io/user/demohtml/, sebagai contoh telah saya buat https://cdnblogger.github.io/user/demohtml/

Demikianlah cara Hosting CSS, javaScript dan HTML di GitHub Page. Semoga bermanfaat....