Cara menggunakan html css website github

Jadi apa sih sebenarnya GitHub Pages? Jadi, GitHub Pages adalah salah satu produk atau layanan GitHub.Layanan ini merupakan semacam hosting bagi para web designer yang disediakan secara gratis. Namun layanan Pages ini hanya dapat menjalankan web di sisi client (client-side) seperti HTML, CSS dan Javascript. Sehingga tidak dapat digunakan untuk sistem kompleks yang melibatkan kerja server seperti program yang ditulis dengan bahasa PHP ataupun melibatkan database MySQL.

Lalu bagaimana cara menggunakan GitHub Pages ?? Simak langkah-langkah berikut.

  • First, kita harus masuk dulu ke akun GitHub di https://www.github.com. Lalu klik Sign in di bagian navigasi sebelah kanan atas. Kalau belum memiliki akun, silakan daftar dulu ya. (baca juga: Tutorial Mendaftar Akun GitHub)

Cara menggunakan html css website github
Halaman Awal GitHub

  • Setelah berhasil masuk ke akun GitHub, maka selanjutnya adalah membuat repositori baru. Repositori dalam bahasa Indonesia dapat diartikan sebagai gudang. Pada GitHub, repositori (atau beberapa orang menyebutnya ‘repo’ saja) merupakan istilah yang digunakan untuk direktori atau folder proyek. Bedanya dengan folder biasa yaitu adanya fitur Git Log yang digunakan untuk melihat riwayat perubahan proyek. Berikut adalah tampilan untuk membuat repositori baru.

Cara menggunakan html css website github
Membuat repositori baru

  • Dikarenakan repositori ini nantinya digunakan khusus untuk memakai layanan GitHub Pages, maka harus menggunakan nama repositori dengan aturan penulisan username.github.io. Kemudian klik tombol Create repository. Berikut adalah tampilan setelah repository berhasil dibuat.
    Cara menggunakan html css website github
    Repositori yang telah berhasil dibuat
    • Langkah selanjutnya adalah upload file baru ke repositori yang telah dibuat dengan klik Upload files. Namun jika belum memiliki file dapat menuliskannya secara online dengan klik Create new file.

    Cara menggunakan html css website github
    Membuat file baru di repositori GitHub

    • Beri nama file, misalnya saya menggunakan nama index.html. Lalu tulis kodenya di text editor yang disediakan. Setelah selesai menulis kode, untuk menyimpan perubahan dapat dilakukan dengan klik tombol Commit new file yang terletak dibawah text editor.

    Cara menggunakan html css website github
    Menyimpan file

    • Jika file berhasil tersimpan, maka akan ditampikan pada repositori kita.

    Cara menggunakan html css website github
    File index.html berhasil tersimpan

    • Tidak hanya membuat atau mengupload file, namun di GitHub juga bisa melakukan edit ataupun hapus file juga. Untuk melakukan pengubahan atau editing file, maka dapat dilakukan dengan klik nama file yang akan diedit, lalu klik icon pensil.

    Cara menggunakan html css website github
    Mengedit file index.html

    • Sedangkan untuk menghapus file, klik icon tempat sampah yang berada tepat di sebelah icon pensil. Untuk menyimpan segala perubahan terhadap file, jangan lupa untuk melakukan Commit changes yang berada di bawah teks editor seperti yang telah dilakukan di langkah sebelumnya.
    • Setelah membuat file dalam repositori khusus untuk GitHub Pages, maka cara mengaksesnya adalah mengetikkan nama repositori yang telah dibuat pada kolom URL address, yaitu username.github.io. Kemudian akan otomatis mengakses file index.html yang tersimpan di repositori. Namun jika ingin membuka file lainnya yaitu dengan mengakses username.github.io/namafile.html  atau jika filenya terdapat dalam folder lain di repositori, maka dapat diakses dengan username.github.io/namafolder/namafile.html .Berikut ini adalah tampilan web yang telah dibuat sebelumnya dan diakses dengan layanan GitHub Pages.

    Cara menggunakan html css website github
    Tampilan index.html yang diakses dengan GitHub Pages

    Bagaimana? Sangat menarik kan? Bagi kalian yang sedang belajar pemrograman web pasti seru kalau sambil bereksperimen di GitHub Pages. Seperti yang sudah saya tulis di awal, kalian juga bisa menambahkan styling CSS maupun Javascript dalam GitHub Pages. Silakan bereksplorasi dengan GitHub ya.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Section 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Section 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.




    Sidenav overlay
    Sidenav push
    Sidenav push w/opacity

    Open Modal

    ×

    Hello World!

    Modals are awesome!

    Go Back To W3 How TO Examples


    Cara menggunakan html css website github

    ×

    Cara menggunakan html css website github


    London

    London is the capital city of England.

    Paris

    Paris is the capital of France.

    Tokyo

    Tokyo is the capital of Japan.

    Success Info Warning Danger Default

    Success Info Warning Danger Default

    Resize the browser window to see the effect:

    Ever heard about W3Schools Spaces? Here you can create your own website, or save your favorite code snippets.

    Langkah langkah membuat web menggunakan HTML dan CSS?

    Membuat Website Menggunakan HTML dan CSS.
    Membuat wireframe / kerangka website. Langkah yang pertama ini adalah membuat wireframe. ... .
    Menginstal text editor. Langkah kedua inilah yang paling penting. ... .
    Membuat folder baru. ... .
    Membuat file index. ... .
    Membuat file style. ... .
    6. Hubungkan file css dengan file html..

    Apa itu Website HTML dan CSS?

    html merupakan inti dari halaman website yang dibuat, Anda dapat menambahkan konten website pada file ini. Sedangkan file style.css merupakan file pelengkap HTML yang digunakan untuk mengubah dan mempercantik tampilan website.

    Apa itu Github page?

    Apa sih sebenarnya Github Pages itu? Github Pages merupakan layanan dari github (sebuah platform berbagi kode program) yang berguna untuk meng-host halaman statis web. Halaman statis merupakan halaman web yang di dalamnya tidak memerlukan server-side code (seperti PHP, Python, dll.).