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.

Install package

After creating the project first, install packages ReactStrap and 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  //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: 

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