Membuat Website Statis dengan

Nicepage dan AWS Amplify

Buka https://nicepage.com dan pilih
Download, sesuaikan dengan OS yang dipakai
Tutorial ini menggunakan versi Windows,
tunggu proses downloading
Cari file hasil donwload dan install
Klik I Agree, dan tunggu proses install
Sign in dengan Facebook atau akun Google
Ikuti saja tutorial dari Nicepage jika baru
pertama menginstall. Selanjutnya tutorial
dibawah digunakan setelah tutorial dari
Nicepage selesai
 Tampilan Awal dari Page Editor dari
Nicepage
Device

Header

Block dari
Web

Editor Utama

Isi dari Web nanti

Footer
Kita bisa menambahkan Block (seperti slide
pada power point) dan juga Element (seperti
teks, gambar, dll)
Tombol pengaturan halaman, seperti nama
web dan lainnya
Element-element yang bisa digunakan
Ambil contoh block “Full Width Slider” yang
akan berisi gambar dan title
Edit apapun yang diinginkan dari Block ini,
seperti mengganti gambar, klik icon gambar
Upload gambar yang ingin digunakan
Setelah gambar, edit heading dengan klik pada
tulisan dan edit pada kolom kanan. Lakukan
pada text dan button yang ada
Selanjutnya tambahkan Block baru untuk
memperkenalkan fitur utama, dengan
“Features”
Edit sesuai kebutuhan, Icon juga dapat diganti
Selanjutnya menambah Block baru berupa
“Split”
Edit Block sesuai keinginan, baik text,
gambar, button dan lainnya. Klik setiap
elemen yang ingin diedit dan edit melalui
sidebar kanan
Selanjutnya menambahkan Block sambutan
dengan “About”
Edit seperti biasa, sesuaikan dengan
keinginan, jika ada yang kurang bisa
menambah element sendiri seperti button dll
Selanjutnya edit header dengan menambah
element berupa text dan juga logo
Settingan header bisa juga melalui sidebar
kanan
Lakukan hal yang sama juga untuk Footer
Bisa menggunakan template yang ada, atau
dikreasikan sendiri seperti menambah link
media sosial
Setelah edit dirasa cukup, maka dapat di quick
preview melalui menu preview
Tampilan Quick Preview, dapat diatur untuk
tablet smartphone dan device lainnya
Setelah siap untuk di publish, maka klik menu
Export dan pilih HTML, isi nama folder dan
juga tempat penyimpanan
Cek lokasi folder dan code sudah di generate
secara otomatis oleh Nicepage, jika ingin
melihat sekali lagi melalui browser cukup
buka halaman yang ingin dilihat (ekstensi
.html)
Jika sudah siap, maka select all semua file
didalam folder tadi dan compres ke dalam .zip
file. windows bisa dengan klik kanan
kemudian pilih Send To Compressed Zip
folder. Jangan lupa nama filenya
Buka https://aws.amazon.com/education/awseducate/
dan sign in dengan akun AWS Educate
Setelah masuk, langsung menuju AWS
Console
Search Amplify dan pilih service AWS Amplify
Selanjutnya klik Get Started
Klik lagi Get Started pada Deliver
Pilih Deploy without Git Provider dan klik
continue
Isi App name dan Environment name (bebas,
pendek saja) dan upload file .zip tadi
Setelah terupload, klik Save and Deploy
Setelah proses selesai, klik pada bagian
Domain untuk masuk ke halaman web yang
sudah dibuat. Jika ingin mengganti maka bisa
upload lagi dengan choose files
Website sudah berjalan, dan dapat diakses
oleh siapa saja dengan memasukan link yang
tersedia

Hasil website tutorial ini bisa diakses di

https://pesantren.d2dxr301opkhu.amplifyapp.com/Page-1.html