Cara menggunakan landing-page bootstrap github

The easiest way to create a Next.js app by using the command create-next-app. Install this package using the following command in your terminal.

npx create-next-app next-landing-page
cd next-landing-page
npm run dev

Install package

After creating the project first, install packages ReactStrap and Bootstrap

npm i reactstrap bootstrap

Layout component

We will create a new file “components/Layout.js” with the code below and save it.

Header component

Create a new file “Header.js” in the folder components, and write the code:

Create a new file “styles/header.css”

We need to modify the style for our Header:

Next, we have to import “header.css”, please find “pages/_app.js” and update the code

Edit pages/index.js with the code below for import Header component

Now, Open your browser and visit localhost:3000, you should see like below. Don't forget to run the command npm run dev.

Figure 2. Berwarna  merah karena sudah dipakai.

Repositori dengan nama diperlukan agar github secara otomatis mengenali bahwa kita ingin membuat github page.

 3. Setelah itu, kunjungi situs  https://bootsnipp.com/builder

pada website tersebut, klik page builder dan mulai buat halaman statismu!

Prosesnya sangat mudah, untuk kalian yang berpengalaman menggunakan Microsoft Word pasti bisa membuatnya sendiri.

4. Jika kamu sudah merasa puas dengan bootsnipp, klik tombol download untuk mengunduh file html.

Figure 3 Coba tebak tombol download yang mana!

5. Setelah berhasil mendapat file html nya, upload file tersebut ke repositori github yang telah dibuat!

Caranya cukup mudah, masuk ke akun github kamu dan halaman repository dengan akhiran github.io, lalu klik add file dan upload files.

6. Setelah file html ter upload, tunggu sejenak dan lihat hasilnya.

Kunjungi alamat <usernamemu>.github.io pada browser kesayanganmu, hore! Kamu sudah punya website pribadi! Pamerkan karya dan prestasimu, tunjukkan siapa dirimu, dan make yourself worth!.(*)(ruz/wil)

Penulis : Muhammad Noor Fakhruzzaman, S.Kom., M.Sc.

Editor : Muhammad Wildan Suyuti

Sumber: 

• https://www.petanikode.com/github-pages/
• https://pages.github.com/
• https://docs.github.com/en/github/working-with-github-pages/creating-a-github-pages-site
• https://towardsdatascience.com/how-to-create-a-free-github-pages-website-53743d7524e1

Related Posts

Gelar Wokshop Pemrograman Aplikasi Android Berbasis Internet of Things, FTMM Perluas Wawasan Mahasiswa

13/11/2021

FTMM NEWS – Kemajuan teknologi terjadi begitu pesat selama beberapa dekade terakhir. Jika dimanfaatkan dengan benar, hal ini dapat berguna

Melek Data, Tim Pengmas FTMM UNAIR Bantu Kader Desa dan Guru Sekolah di Desa Sentul, Tembelang, Jombang untuk Pengolahan Data

01/09/2022

FTMM NEWS – Data memiliki peran penting dalam pengambilan sebuah kebijakan. Kebijakan akan menjadi tepat sasaran jika didukung dengan ketersediaan

Sabet Juara II KRTMI Wilayah 2, Tim ASTRO UNAIR Maju ke Tingkat Nasional

30/09/2021

FTMM NEWS – Kabar membahagiakan datang dari tim ASTRO UNAIR yang memboyong Juara II Divisi Kontes Robot Tematik Indonesia. Kompetisi

Manfaatkan Machine Learning untuk Efisiensi Konsumsi Energi

21/09/2022

FTMM NEWS – Sistem Manajemen Energi Bangunan (BEMS) telah menjadi topik penting saat ini karena kepentingannya di mengurangi pemborosan energi.