Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Cara Hosting CSS, JavaScript dan HTML di CDN GitHub Page

Cara bembuat beberapa Web Statis di 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....

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

6 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Bagaimana untuk file html jika seperti ini, file html nya sudah berupa xml utuh dg style, html, dan lainnya, lalu kita upload saja misal pd folder khusus. Apakah file tersebut bisa dipanggil? Atau memang harus pakai cara seperti di atas kang?
    1. Sudah berupa file utuh kang, coba saja di lihat sourcenya, intinya pembuatan HTML pada layout baru yang kita buat. Untuk pemanggilannya, langsung saja URL-nya, seperti link web/blog pada umumnya
  2. Kalau dengan cara klik kanan, copy link bisa ga?
    1. Kalau untuk CSS dan JS bisa saja, nantinya dengan menghapus sebagian pada link, tetapi untuk HTML tidak bisa, karena nama file bisa berbeda dengan permalink
  3. Mas kalau domain dari cloudflare, apa perlu di Purge Cache setiap ada perubahan?
    1. tergantung perubahan, kalau sedikit ga perlu.. kalau memang total perlu untuk purge chace
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.