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.
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.cssCara 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.
.md atau .markdown, tidak bisa menggunakan ekstensi .htmlmaka 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/
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?
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
Kalau dengan cara klik kanan, copy link bisa ga?
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
Mas kalau domain dari cloudflare, apa perlu di Purge Cache setiap ada perubahan?
tergantung perubahan, kalau sedikit ga perlu.. kalau memang total perlu untuk purge chace