Membuat Github Pages dengan linux

github pages

Pada tutorial sebelumnya saya menulis tentang git, perintah-perintah dasar git dan sekilas tentang apa itu github. Kali ini saya akan mengajak anda untuk membuat situs statis menggunakan layanan gratis dari GitHub yakni GitHub Pages.

Apa itu GitHub Pages

Jika anda mengunjungi situs https://pages.github.com/ disana tertulis Website for you and your projects, artinya GitHub Pages adalah layanan hosting website gratis untuk Anda atau project yang sedang anda kerjakan. Seluruh file website kita akan dihosting di GitHub artinya untuk melakukan perubahan Anda bisa melakukannya melalui github, atau langsung dari desktop anda melalui perintah-perintah git.

Persiapan Website

Untuk tutorial pembuatan github page ini kita akan membuat situs bio sendiri, kita mulai membuat file HTML dan CSSnya terlebih dahulu, lalu menguploadnya ke github dan menjadikannya sebagai github page. Jika Anda penasaran seperti apa jadinya situs yang akan kita buat nanti silahkan buka link berikut:

nandapuspitarana.github.io

Ok, kita sepakat kalo situs simple yang barusan anda buka itu keren ( maksa ? ), ajarin doong kakaa ?, OK siap ?.

HTML

Pertama-tama kita buat file HTML untuk situs kita, untuk file HTML ini sangatlah simple

<!doctype html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Hello, world!</title>
		<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100,700">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="bio">
			<h1><em>Hi!</em> My Name is <strong>Nanda</strong></h1>
			<h2>the coolest front end developer ever</h2>
			<div class="social-links">
				<h2>Get connected with me over:</h2>
				<a href="http://abuadzhan.com/"><i class="fa fa-globe"></i>abuadzhan.com</a>
				<a href="https://www.facebook.com/abuadzhan"><i class="fa fa-facebook"></i>abuadzhan</a>
				<a href="http://portofolio.abuadzhan.com/webpaint"><i class="fa fa-globe"></i>Webpaint</a>
				<a href="https://twitter.com/abuadzhan"><i class="fa fa-twitter"></i>@abuadzhan</a>
			</div>
		</div>
	</body>
</html>

Di atas saya menyertakan font-awesome untuk menampilkan icon-icon yang ada dalam social link. Untuk Font saya juga menambahkan Google Font dengan nama font Raleway.

CSS

Untuk Background saya menggunakan stock foto didapat dari pexels.com. Silahkan kunjungi pexels.com untuk foto-foto gratis menarik lainnya. Kita simpan gambar untuk background ini ke dalam folder images. jadi buatlah folder “images” dan masukkan gambar untuk banckground ke dalamnya.

Selanjutnya kita buat file CSS untuk situs kita. Pertama-tama kita beri style global untuk body:

body{
	background-image:url(images/tumblr_n6eszmeQMR1st5lhmo1_1280.jpg);
	background-size:cover;
	font-family:Raleway,Open Sans,Droid Sans,arial,sans-serif;
}

Lalu kita beri style untuk .bio agar posisinya berada tepat ditengah layar. Untuk itu kita akan menggunakan teknik absolute, jadi anda harus menentukan width dan height dari .bio tersebut lalu menerapkan nilai 0 pada top,right,bottom, dan left dan margin: auto agar posisinya tepat berada di tengah.

.bio{
	width:600px;
	height:200px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	text-align:center;
}

Untuk judul, kita atur ukuran font agar tidak terlalu tebal.

h1,h2{
	font-weight:100;
}
h2{
	font-size:15px;
}

Terakhir untuk .social-links, kita tambahkan jarak atas, dan atur jarak antar icon, dan style dari link

.social-links{margin-top:50px;}
a{
	color:#333;
	text-decoration:none;
}
a:hover{text-decoration:underline}
.fa{margin:0 10px;}

Ok, Jika semuanya telah anda ketik dengan benar, cobalah untuk membuka file index.html dalam browser, Jika sudah oke kita lanjut ke proses selanjutnya.

Membuat Repository GitHub

Untuk membuat GitHub Pages terdapat dua pilihan, yang pertama adalah GitHub Pages untuk halaman GitHub kita dan kedua adalah GitHub Pages untuk website Project kita, kali ini saya akan membuat github pages untuk halaman GitHub kita untuk opsi yang kedua bisa anda ikuti caranya di situs pages.github.com tadi karena yang berbeda itu langkah di awalnya saja.

Tapi sebelumnya saya anjurkan untuk menginstall GitHub client terlebih dahulu karena saya akan menggunakannya untuk melakukan aktifitas git pada file-file website kita.

Login terlebih dahulu ke situs github.com, lalu buat repository baru.

github repository

Untuk nama repository, karena kita akan menggunakan GitHub Page untuk Halaman GitHub kita, jadi penamaannya seperti berikut:

username.github.io

Sebagai contoh, username saya adalah nanda jadi nama repository yang akan dibuat adalah:

nandapuspitarana.github.io

Nama repository ini akan menjadi domain untuk mengakses GitHub Pages milik kita

Tambahkan sedikit deskripsi tentang repository yang akan kita buat, seperti gambar berikut:

github create repository

Jika sudah, Klik Create repository. Maka selanjutnyua kita akan langsung masuk ke page https://github.com/nandapuspitarana/nanda.github.io  langsung saja copy link yang dibawah.

clone git

Selanjutnya buka terminal(linux)/cmd(windows), ketikkan :

$ git clone https://github.com/nandapuspitarana/nanda.github.io.git

git clone repository

Selanjutnya kita pindahkan file-file yang telah kita buat sebelumnya ke dalam folder repository kita.

git clone repository

Karena saya tadi menyimpannya di folder nanda.github.io maka seluruh file dan folder saya masukkan ke dalamnya. kira-kira strukturnya seperti berikut:

Jika semua file telah dipindahkan, buka terminal pada folder dengan klik kanan>open terminal ketik :

$ git add .

lalu ketik :

$ git commit -m "pesan(bebas)"

lalu ketik :

$ git push -u origin master

Setelah proses ini selesai Anda bisa buka alamat GitHub anda di alamat username.github.io.

Custom Domain

Jika Anda ingin mengganti alamat website anda dengan domain yang telah anda sewa caranya sangatlah mudah. Buatlah file CNAME dan isi dengan alamat domain yang anda kehendaki.
Selanjutnya atur juga DNS record domain anda agar mengarah ke IP berikut:

192.30.252.153
192.30.252.154

Kesimpulan

GitHub Pages bisa menjadi solusi gratis untuk anda yang ingin membuat situs sendiri atau untuk anda yang ingin bereksperimen dengan situs statis, Anda juga mendapatkan manfaat lain dari penggunaan Git sebagai version control untuk situs Anda. Jika anda ingin mengganti alamat domain, Anda bisa dengan mudah melakukannya namun perlu diingat bahwa sewa domain itu tidaklah gratis ? . Jika Anda bermaksud menggunakan GitHub Pages sebagai tempat blogginpun sangat bisa dilakukan dengan bantuan jekyll. Seluruh kode situs anda dapat dilihat, dicopy oleh orang lain, dan asyiknya orang lain juga bisa ikut berkontribusi atau langsung melaporkan jika anda yang salah dengan situs anda.

Jika Anda tidak source code situs anda bisa dilihat oleh orang lain, Anda harus mengatur repositorynya ke mode private, dan untuk itu anda akan dikenakan biaya karena GitHub hanya menyediakan versi free untuk project yang persifat Open Source saja.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.