Tugas 1 Pemrograman Web A

Profil & Portofolio Pribadi

Nama   : Jonathan Leonardo Hasiholan Simanjuntak
NRP     : 05111940000150
Kelas    : Pemrograman Web A 2021

Link Profil : Ardo Profile
Link Repo : Profile Repository

Pada tugas ini, saya membuat profil dan portofolio pribadi dengan memanfatkan tema yang disediakan di plaform Hugo (Static Site Generator)yaitu Hugo Profile v3. Kemudian, saya hosting-kan resource yang berhasil di generate lewat Github Pages.

Berikut ini adalah tampilan hasilnya,

 

Tahapan Pembuatan Profile

Berikut adalah penjelasan singkat mengenai tahapan - tahapan yang saya lakukan untuk membuat halaman profil pribadi saya, 

1. Pertama - tama, install Hugo terlebih dahulu. Panduan instalasinya bisa dilihat di Install Hugo.
   
   
2. Setelah Hugo berhasil di-instal. Buka command promopt pada perangkat anda dan jalankan perintah :
   

    hugo version 

   Jika perintah "hugo" sudah dikenali, maka proses instalasi hugo telah berhasil.

   

   Gambar 2.1 Hugo berhasil di install pada perangkat
   

   
   
3. Setelah berhasil di install, saya memilih tema yang akan saya gunakan terlebih dahulu (dalam kasus ini  Hugo Profile v3), karena setiap tema pada umumnya memiliki petunjuk masing - masing bagaimana cara mengaplikasikannya.
   
   
4. Untuk tema Hugo Profile, pertama - tama jalankan perintah :
   

   hugo new site <nama projek> -f=yaml

   Jika perintah dijalankan, maka hugo akan membuat sebuah directory lokal tempat projek dijalankan.

   

   Gambar 4.1 Membuat directory lokal proyek Hugo
   

   
   
5. Kemudian setelah directory lokal berhasil dibuat, kita hanya perlu melakukan clone repository tema tersebut kedalam folder "themes" dari directory lokal proyek hugo yang telah kita buat sebelumnya. Hal tersebut dapat dilakukan dengan perintah :

   cd <direktori proyek>\themes

   git clone https://github.com/gurusabarish/hugo-profile.git

   Jika perintah dijalankan, maka resource dari tema tersebut sudah berhasil dipindahkan ke dalam direktori lokal.
   

   

   Gambar 5.1 Clone tema terpilih kedalam direktori lokal
   

   
   
6. Setelah berhasil di clone, buka file konfigurasi tema yang akan digunakan pada directory "<direktori proyek>\themes\hugo-profile\website\v3.yaml" dengan text editor. Kemudian copy - paste isi konten file tersebut ke "<direktori proyek>\config.yaml".

   

   Gambar 6.1 Proses pemindahan konfigurasi tema
   

    
7. Setelah berhasil di konfigurasi, ubah parameter - parameter di config.yaml sesuai kebutuhan. Tambahkan juga resources yang diperlukan untuk website. Kemudian, tambahkan content apabila diperlukan. Bisa juga ditambahkan fitur - fitur lainnya yang tidak tersedia pada theme dengan menambahkan langsung pada resource file html, di "layouts\partials\v3\".
   
   
8.  Agar bisa digunakan dan di host nantinya, ada beberapa parameter yang harus diperhatikan pada config.yaml.
   
   • baseURL : ubah menjadi URL yang nantinya akan digunakan untuk host static websitenya.
   • theme: ubah menjadi nama folder dari theme yang akan digunakan (ex: hugo-profile).
   • tambahkan "canonifyURLs : true"
     
     
9. Untuk mengecek tampilan website, bisa dengan menjalankan perintah :

   hugo server -D

   Sebelum dijalankan, pastikan akses directory berada di root directory dari projek.
   

   

   Gambar 9.1 Mengecek tampilan webserver lewat terminal

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   

   Gambar 9.2 Tampilan dari hasil command diatas
   

   
   
10.  Jika dirasa sudah cukup, jalankan perintah :

    hugo -D

    Perintah tersebut akan menyusun resource - resource yang sebelumnya telah kita masukkan (dalam bentuk markdown, dll) kedalam bentuk html, css, & js sehingga siap di hosting.

    

    Gambar 10.1 Proses penyusunan resource oleh Hugo
    

    
    
11. Untuk melakukan hosting site pada Github Pages, buatlah repository baru sesuai dengan subURL yang telah dimasukkan pada config.yaml sebelumnya. (Ex: baseURL : archieops.github.io/ardo_profile | maka nama repositorynya adalah "ardo_profile").
    
    
12. Setelah berhasil dibuat, copy seluruh isi file pada folder "public" yang sebelumnya telah disusun oleh Hugo kedalam repository github yang telah dibuat dan lakukan push.
    
    
13. Setelah seluruh file dan folder berhasil dipush, kita hanya perlu masuk ke menu "Settings" dari repository tersebut dan masuk ke dalam sub menu "Pages".
    
    
14. Setelah itu, ubah pilihan "Branch" pada kolom "Source" menjadi 'master', dan pilihan "folder" menjadi '/root'. Kemudian save.
    

    

    Gambar 14.1 Menu Github Page
    
    

15. Tunggu beberapa saat, dan website statis sudah berhasil di hosting.
    

Beberapa Source Code

index.xml

	<?xml version="1.0" encoding="utf-8" standalone="yes"?>
	<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
	<title>Ardo&#39;s Profile</title>
	<link>https://ArchieOps.github.io/ardo_profile/</link>
	<description>Recent content on Ardo&#39;s Profile</description>
	<generator>Hugo -- gohugo.io</generator>
	<language>en-us</language><atom:link href="https://ArchieOps.github.io/ardo_profile/index.xml" rel="self" type="application/rss+xml" />
	</channel>
	</rss>

view raw index.xml hosted with ❤ by GitHub

sitemap.xml

	<?xml version="1.0" encoding="utf-8" standalone="yes"?>
	<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
	xmlns:xhtml="http://www.w3.org/1999/xhtml">
	<url>
	<loc>https://ArchieOps.github.io/ardo_profile/</loc>
	</url><url>
	<loc>https://ArchieOps.github.io/ardo_profile/categories/</loc>
	</url><url>
	<loc>https://ArchieOps.github.io/ardo_profile/tags/</loc>
	</url>
	</urlset>

view raw sitemap.xml hosted with ❤ by GitHub

Melihat keterbatasan ruang, untuk source code hasil generate  lainnya, bisa dilihat di repository berikut, Profile Repository. 

Sekian dari saya. Terima kasih atas perhatiannya.