Hosting Website Gratis di Gitlab

Gitlab sebuah perusahaan penyedia layanan hosting Git. Mirip Github tapi lebih ekonomis. Salah satu bedanya, di Gitlab, akun gratisan bisa punya private project, kalo di Github semuanya public / opensource, kecuali kalo kita pake akun berbayar.

Kalo Github punya Github Pages, Gitlab juga punya Gitlab Pages. Layanan ini bisa kita pake untuk hosting website gratisan & bisa sekalian belajar Git ( buat yang belum tahu).

Silakan daftar dulu kalo belum punya akun Gitlab. Saya tunggu …

Udah?

Bagus.

Daftarin SSH Key

Supaya bisa push/upload file ke Gitlab, kita perlu daftarin SSH key supaya komputer kita dikenali oleh Gitlab & diijinin ngirim file.

Apa itu SSH key? SSH key sederhananya adalah semacam sidik jari komputer kita. Key ini unik, per komputer. Maksudnya kalo Anda punya dua komputer, ya minimal Anda punya dua SSH key yang berbeda.

Kalo di komputer Anda belum ada SSH key, silakan bikin dulu & terus daftarin ke Gitlab. Caranya gimana, silakan baca sendiri di sini.

SSH Key yang Anda buat ga cuma bisa dipake di Gitlab tapi juga untuk hosting lain, Github, Bitbucket, dll.

Bikin Proyek

Sekarang bikin proyek baru & kasih nama, misalnya website. Setiap proyek di Gitlab dapet alamat dengan pola seperti ini:

gitlab.com/username/namaproyek

Kalo proyek ini kita pake untuk Pages, alamat websitenya jadi ini:

username.gitlab.io/namaproyek

Jadi alamat proyek saya begini ( punya Anda pasti beda username-nya )

gitlab.com/masputih/website

Alamat websitenya nanti begini:

masputih.gitlab.io/website

Kalo Anda pengen bikin website yang alamatnya username.gitlab.io, Anda harus bikin proyek yg namanya username.gitlab.io (ganti username dengan nama akun / login Anda )

gitlab.com/username/username.gitlab.io

gitlab-new-project

Gitlab CI

Semua akun di Gitlab, termasuk yang gratis bisa pake fitur Gitlab CI. Fitur ini juga yang kita pake untuk website kita.

Jadi setelah bikin proyek, kita akan dibawa ke halaman Dashboard proyek itu. Klik tombol di sebelah field alamat repositori. Terus pilih New File di menu dropdown.

gitlab-project-dashboard.png

Berikutnya kita pilih gitlab-ci.yml sebagai tipe filenya.

gitlab-new-file-type.png

Habis itu pilih template untuk filenya.

gitlab-new-file-template.png

Menu dropdown di atas, isinya daftar generator website statis yang bisa kita pake. Kali ini kita pilih HTML aja. Isi file gitlab-ci.yml jadi begini.

gitlab-html-yml.png

Ubah dulu isi filenya jadi begini:

pages:
  stage: deploy
  script:
    - echo 'Sabar...' 
  artifacts:
    paths:
    - public
  only:
  - master

Apa maksudnya file di atas? Yang perlu kita tahu hanya tiga:

  • script adalah perintah-perintah yang akan dijalanin di terminal server CI ( servernya pake Linux)
  • - public adalah nama direktori di mana nanti kita taruh file-file untuk website (html, js, css, gambar).
  • - master adalah nama branch yang akan kita deploy / publish. Setiap update di branch ini akan diproses oleh Gitlab CI.

Terus isi Commit Message di bawah & klik Commit.

gitlab-commit-yml.png

Bikin Repositori Lokal

Kembali ke Dashboard, kita kopi URL repositori proyek.

gitlab-copy-url.png

Terus bikin direktori di komputer kita, misalnya gitlab-website. Buka terminal & klon repositorinya di dalam direktori ini.

Jalanin perintah git clone. Ganti username dengan username Anda. Dan jangan lupa spasi+titik di belakang.

git clone git@gitlab.com:username/website .

Bikin Websitenya

Sekarang kita bisa mulai bikin websitenya. Ingat direktori yang nanti dipake oleh Gitlab Pages adalah direktori public, jadi kita bikin dulu direktori ini.

Berikutnya, kita coba bikin file index.html dan styles.css (di dalam direktori css) yang masing-masing isinya begini:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
    <h1>Hello Gitlab Pages</h1>
    </body>
</html>
h1{
    color: red;
}

Commit dua file itu terus push.

git add .
git commit -m 'initial'
git push origin master

Project Pipeline

Kembali ke Dashboard. Buka halaman Pipeline. Setelah push barusan, ada job yang otomatis dijalanin di repositori yang statusnya Running. Ini berarti website kita dalam proses update.

gitlab-pipeline-running.png

Sebetulnya proses ini ga lama, tapi karena bukan kita aja yang pake layanan Gitlab CI kita harus sabar ngantri :). Kalo semuanya OK & website berhasil di-update, status Running berubah jadi Passed.

gitlab-pipeline-passed.png

Silakan coba website barunya di alamat username.gitlab.io/website. Yang saya buat untuk artikel ini ada di sini.


Terusin sendiri websitenya. Bisa Anda tambahin file JavaScript, dll. Setiap kali Anda push, Gitlab Pipeline akan jalanin proses di atas & website akan otomatis di-update.

Also in this category ...


Leave a Reply

Your email address will not be published. Required fields are marked *