Scribd
Unggah
47 tayangan34 halaman

Praktikum Web Lanjut - SSG ( (HTML + CSS + JS) - 11ty)

Program studi Teknik Informatika mengadakan praktikum Web Lanjut yang membahas Static Site Generator (SSG) seperti 11ty untuk membangun situs web statis berbasis komponen. SSG memudahkan pembangunan web dengan memecah komponen tampilan ke berkas terpisah sehingga struktur kode menjadi lebih terorganisir dibanding pendekatan monolitik. Praktikum mendemonstrasikan cara dasar membuat situs web sederhana dengan 11ty seperti membuat template

Diunggah oleh

adebsb
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
47 tayangan34 halaman

Praktikum Web Lanjut - SSG ( (HTML + CSS + JS) - 11ty)

Program studi Teknik Informatika mengadakan praktikum Web Lanjut yang membahas Static Site Generator (SSG) seperti 11ty untuk membangun situs web statis berbasis komponen. SSG memudahkan pembangunan web dengan memecah komponen tampilan ke berkas terpisah sehingga struktur kode menjadi lebih terorganisir dibanding pendekatan monolitik. Praktikum mendemonstrasikan cara dasar membuat situs web sederhana dengan 11ty seperti membuat template

Diunggah oleh

adebsb
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 34

Praktikum Web Lanjut :

SSG (bukan SG Puter PB)

Program Studi Teknik Informatika


Jurusan Teknologi Produksi Industri dan Informasi
Institut Teknologi Sumatera
What is Static Site Generator ?
Isn’t produce electricity ?
SSG (Static Site Generator)

merupakan alat bantu untuk memudahkan


kita membangun web statis berbasis
komponen.
( kita akan pakai 11ty, 11ty.dev )
How it concept works?
Berbasis Komponen & Monolith

Monolith , semua tampilan diletakan pada satu file


keseluruhan.

Komponen, memecah komponen tampilan ke berkas


terpisah.
Monolith
Struktur Kode

Kode nya mirip


spageti salah pakai
tepung ya
Komponen
Struktur Kode
Q : How to Start /w SSG?
A : 11ty
Menginstall 11ty
1. Install Node JS
2. Install 11ty
a. Bagi pengguna NPM : npm install --g
@11ty/eleventy
b. Bagi pengguna Yarn : yarn add global
@11ty/eleventy
3. Check versi 11ty : eleventy --version
Cara simple menggunakan 11ty
1. Buat file bernama index.njk ( disini pakai template
engine : nunjuck , bisa pakai .haml , .md atau lainnya ).
2. Tulis contoh ini :
---
title: Nunjuck 11ty
---
<h1> {{title}} </h1>
Cara simple menggunakan 11ty

3. Jalankan: eleventy --serve

4. Buka Browser : localhost:8080/

5. Hasilnya :
Tips & Trick

● Untuk membuat subpath :


localhost:8080/tentang/saya , bisa dengan
membuat folder tentang kemudian buat berkas
saya.njk.
● Untuk menyimpan komponen, buat folder
_includes di root path ( yang ada index.njk )
Contoh Web yang di bangun dengan 11ty

● https://okitavera.me/
● https://every-layout.dev/
● https://usac.ucla.edu/
● https://frontendnorth.com/

Contoh untuk belajar :


https://github.com/OgataKaede/belajar-11ty
Short Implementation
Membuat halaman statis dengan 11ty

1. Masuk ke folder dimana ingin membangun web statis.


2. Buat folder _includes , lalu buat berkas tataletak.njk
dan navigasi.njk . (Isi nya di slide berikutnya).
3. Kemudian kembali ke halaman utama dan buat index.njk.
4. Setelah itu, buat folder tentang berisi <nim>.njk.
5. Kemudian, mulai eleventy --serve dengan terminal pada
folder tersebut.
tataletak.njk
navigasi.njk
index.njk
<nim>.njk
Struktur berkas
Tampilan
Display works but bit bitter, let
add some sugar
Menambahkan konfig 11ty untuk passCopy
folder assets
1.Buat file .eleventy.js di tempat index.njk (intinya di tempat buat
ngejalanin eleventy --serve)

2. Buat folder assets dan css dalam folder assets. Tambahkan berkas
sugar.css.

3. Lalu tambahkan <link rel=”stylesheet”


href=”/assets/css/sugar.css”> pada dalam tag <head> pada
tataletak.njk.
.eleventy.js

module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy('assets')
return {
passthroughFileCopy: true
}
}
sugar.css
sugar.css
Sambung dari bagian sebelumnya
Before CSS applied (index.njk)
After CSS applied (index.njk)
Before CSS applied (<nim>.njk)
After CSS applied (<nim>.njk)
Struktur folder

Folder _site , berisi web hasil

generate 11ty. Yang muncul

Saat eleventy --serve.


That is Short Implementation.
Time for Homework

Anda mungkin juga menyukai