Dina pituduh ieu, anjeun bakal diajar kumaha cara ngadamel halaman wéb saderhana pikeun Halaman Github nganggo HTML, CSS, sareng Javascript. Nepi ka tungtun taun anjeun bakal geus nyieun ramatloka anjeun sorangan nu bisa babagi kalawan babaturan anjeun.

• Tingali conto: https://cplmakerlab.github.io/simple-website-template/
• Citakan Starter: https://github.com/cplmakerlab/simple-website-template

Dina pituduh ieu kami bakal ngagunakeun Github Pages pikeun nyiptakeun halaman wéb anu saderhana. Tapi ke heula, kumaha situs wéb tiasa dianggo? Lamun anjeun ngasupkeun alamat ramatloka dina browser komputer anjeun, browser nu nyieun pamundut ka komputer server jauh. Lamun sukses, server mulih HTML, CSS, sarta JS pikeun kaca dipénta nu browser anjeun lajeng renders kana layar Anjeun. Dina kasus urang, Github Pages bakal janten server jauh.

Lengkah 1: Jieun akun Github

Dina panyungsi anjeun, buka github.com sareng jieun akun gratis. Github mangrupikeun situs wéb anu ngamungkinkeun anjeun unggah sareng ngabagi kode versi sareng anu sanés. Éta ogé ngadukung hosting halaman wéb sederhana (anu bakal kami anggo ayeuna).

Lengkah 2: Milarian template halaman wéb Maker Lab

Asup sareng arahkeun ka Citakan Website Maker Lab dina Github.

Lengkah 3: Garpu (nyalin) témplat

Klik tombol garpu di katuhu luhur layar. Ieu bakal nyiptakeun salinan pribadi anjeun tina gudang proyék anu teras anjeun tiasa modifikasi.

Lengkah 4: Édit URL situs wéb

Sakali anjeun tos garpu proyek, klik tombol Édit pikeun nulis “URL Wéb” sareng ngapdet URL pikeun cocog sareng nami pangguna github anjeun. Pastikeun nulis ieu handap! Ieu kumaha anjeun bakal tiasa ningali sareng ngabagi halaman wéb anjeun ka batur. Conto URL (ganti nami pangguna anjeun sareng nami pangguna github anjeun): https://yourusername.github.io/simple-website-template

Lengkah 5: Coba pikeun muka URL ramatloka anjeun

Upami anjeun nyobian napigasi ka URL anjeun ayeuna, anjeun bakal nampi Kasalahan 404: Teu Kapanggih. Urang kedah nyorong sababaraha parobihan heula kana cabang gh-kaca sateuacan Github bakal ngawangun halaman wéb urang.

Lengkah 6: Edit index.html

Klik index.html teras klik ikon pensil pikeun ngédit file dina editor browser.

Lengkah 7: Robah judul halaman sareng judul

Dina editor HTML néangan tag judul: <title>Your title here</title>Robah téks dina tag judul, tanpa ngarobah tag sorangan. Nya kitu, panggihan tag judul h2 sareng sacara saksama robih téks dina jero tag h2: <h2>Simple Website</h2> Pikeun langkung seueur conto tag, tingali tabel “Tag HTML Umum” dina tungtung pituduh ieu.

Lengkah 8: Komitmen parobahan anjeun

Gulung ka handap teras klik Komit parobahan . Ieu bakal ngahemat sareng nyorong parobihan anu anjeun lakukeun ka cabang gh-pages. Git nganggo cabang sareng komitmen pikeun ngatur vérsi file anjeun anu béda.

Lengkah 9: Tungguan situs anjeun ngawangun!

Saatos komitmen éta bakal nyandak ngeunaan 3-4 menit pikeun nyebarkeun situs anjeun. Anjeun tiasa ngawas status wangunan anjeun ku ngaklik tab “Lingkungan”. Saatos sababaraha menit, buka URL halaman wéb anjeun pikeun ningali situs énggal anjeun.

Lengkah 10: Unggah gambar latar anyar

Ayeuna hayu urang unggah gambar latar anyar. Pilarian gambar anu ageung (lebarna ~ 1024 piksel), unduh ka komputer anjeun, teras ganti nami janten background.jpg. Gambar anjeun kedah dingaranan background.jpg sateuacan unggah supados tiasa nimpa gambar asli. Lamun gambar anjeun .png, make GIMP pikeun ngarobah kana .jpg. Dina Github , klik Unggah file pikeun unggah background.jpg anyar anjeun. Tong hilap ngagulung ka handap teras klik “Komit parobahan” pikeun nyorong parobahan anjeun ka cabang gh-pages. Sakali deui, biasana peryogi 3-4 menit kanggo Github ngawangun sareng nyebarkeun parobihan anjeun.

Wilujeng! Anjeun nyieun ramatloka a!

Hehehehe! Anjeun ngalakukeun eta! Ayeuna anjeun tiasa ngabagi tautan halaman wéb anjeun ka réréncangan anjeun supados aranjeunna ogé tiasa ningali halaman wéb anjeun.

Sababaraha hal deui pikeun dicobian:

• Unggah sareng nimpa logo.jpg (pangalusna pikeun ngajaga logo anjeun leutik, jangkungna kirang ti 100 piksel)
• Robah warna tautan dina style.css, nyaétaa {color:green;}
• Apdet téks dina wewengkon footer di index.html
• Apdet téks di jero Imah, Ngeunaan, jeung wewengkon Kontak dina index.html

Tag HTML umum

unsur	Tag	Conto pamakéan
lulugu	h2	<h2>Title of page</h2>
Tumbu	a	<a href="http://example.com">Check out this link</a>
Gambar	img	<img src="http://www.example.com/image.jpg">
Alinea	p	<p>This is a new paragraph.</p>
Garis putus	br	This is the first line of a poem. <br> This second line will appear below the first.

bacaan salajengna

Dimana abdi tiasa langkung seueur ngeunaan HTML, CSS, JS, sareng pamekaran wéb sacara umum?

Pariksa Mozilla Developers Network (https://developer.mozilla.org). Aranjeunna gaduh seueur sumber anu saé, tip, sareng tutorial pikeun ningkatkeun pangaweruh anjeun.

Naha kuring tiasa ngonpigurasikeun domain khusus pikeun situs kuring, nyaéta johnnymakerportfolio.com?

Sumuhun! Github Pages ngadukung konfigurasi domain khusus. Nanging, anjeun kedah mésér nami domain ti registrar sapertos NameCheap atanapi Gandi – biayana biasana sakitar $10 – $15 sataun.

Dupi abdi tiasa nambihan tracking?

Sumuhun! Anjeun tiasa ngalebetkeun Google Analytics pikeun ningali saha anu ngadatangan situs anjeun.

Dupi abdi tiasa nambihan blog, jsb?

Henteu ogé. Citakan ieu jalan pangalusna pikeun situs basajan. Pikeun blog basajan parios Jekyll, anu mangrupikeun generator situs statik anu ogé tiasa dianggo dina halaman Github sareng Cloudcannon anu nyayogikeun UI backend pikeun situs Jekyll. Pikeun fungsionalitas langkung seueur, anjeun panginten peryogi sistem manajemén eusi (CMS) sapertos WordPress, Drupal, atanapi Django. CMS ngabutuhkeun pangaturan tambahan sareng host wéb, sapertos Dreamhost.

Naha kuring tiasa ngajual produk atanapi nambihan toko?

Henteu gampang, tapi upami anjeun nekad anjeun tiasa nambihan tombol Paypal atanapi sapertos SnipCart. Upami anjeun resep ngajual seueur produk online atanapi peryogi toko lengkep, pariksa Woocommerce, BigCartel, Shopify, atanapi Etsy.

Dupi abdi tiasa ngadamel file HTML misah pikeun tiap halaman?

Leres, anjeun tiasa nganggo Javascript AJAX nelepon pikeun narik eusi éksternal kana halaman index.html anjeun. Tempo script.js pikeun leuwih rinci.

Kuring ngadangu kuring kedah nganggo kerangka XYZ (Bootstrap, React, jsb).

Téknologi wéb robih gancang, sareng gampang leungit dina hype. Diajar dasar HTML, CSS, sareng JS mangrupikeun tempat anu saé pikeun ngamimitian. Ti dinya, anjeun tiasa ngajalajah kerangka sareng perpustakaan anu béda pikeun ningali naon anu dipikaresep ku anjeun.

Abdi henteu hoyong nyerat kode atanapi ngurus situs wéb. Naha aya tukang situs wéb anu anjeun nyarankeun?

• Situs Google (gratis)
• Spasi pasagi
• Wix
• Strikingly (tingkat bébas kaasup toko produk tunggal)
• Big Cartel, Shopify, Etsy (e-commerce)

github HTML CSS JS GIT Coding GitHub Pages, alat anu disayogikeun ku GitHub, ngamungkinkeun anjeun gampang nyiptakeun sareng nyebarkeun situs wéb online. GitHub ngamungkinkeun anjeun pikeun nyimpen sadaya file sareng kode pikeun halaman wéb anjeun dina gudang. Anjeun teras tiasa nganggo GitHub Pages pikeun ngahasilkeun URL pribadi sareng ngabagi situs anjeun ka babaturan, kulawarga, sareng dunya! Pikeun tutorial ieu, anjeun peryogi akun GitHub sareng pangaweruh HTML dasar. Anjeun teu kedah terang Git atanapi garis paréntah. (Tapi upami anjeun hoyong diajar kumaha ngagunakeun alat-alat ieu, pariksa kami Diajar Git & GitHub sareng Diajar kursus Command Line.)

GitHub vs. GitHub Kaca

Dina GitHub, kode disimpen dina gudang , atanapi repo. Anjeun tiasa nganggap éta salaku polder khusus anu hirup online. GitHub ngagaduhan folder éta supados tiasa diaksés ku anjeun sareng réréncangan anjeun ti mana waé di dunya. Dina kasus urang, gudang urang bakal ngandung kode HTML jeung CSS nu ngahartikeun ramatloka a. Tapi anjeun teu tiasa NINGALI halaman wéb dimana waé. GitHub ngan nampilkeun kodeu sapertos téks anu sanés. Halaman GitHub dasarna nyambungkeun gudang anjeun ka URL anu unik sahingga, nalika anjeun angkat ka URL éta – sebutkeun username.github.io– dina panyungsi anjeun, anjeun bakal mendakan halaman wéb anjeun ditampilkeun.

Jieun Repository a

Hayu urang ngamimitian! Jieun gudang anyar ngaranna username.github.io, dimana usernamengaran pamaké GitHub anjeun. Anjeun gaduh pilihan di dieu pikeun ngagunakeun citakan, nambihan pedaran, ngajantenkeun gudang anjeun pribadi, sareng ngamimitian sababaraha file tambahan. Barang-barang ieu ngagampangkeun pamekar séjén pikeun diajar ngeunaan gudang anjeun: ngeunaan naon éta, saha anu tiasa ngaksés éta, saha anu tiasa nganggo kodeu, sareng sajabana. situs anjeun bakal dianggo tanpa aranjeunna. Klik “Jieun Repository”.

Nyiptakeun Halaman Mimiti anjeun

Anjeun kedah dialihkeun ka halaman gudang, anu nunjukkeun gudang kosong. Ieu waktuna pikeun nambahkeun file! Dina halaman éta, klik tautan “nyieun file énggal”. Ngaran file anjeun index.html . Ayeuna nyalin sareng nempelkeun kodeu di handap ieu kana file. <html> <awak> <h2>Ngaran anjeun</h2> <p>Wilujeng sumping di ramatloka abdi!</p> <img src=»https://content.codecademy.com/articles/github-pages-via-web-app/happy-ice-cream.gif» /> </awak> </html>

Anjeun tiasa ngaluyukeun téks nu nyebutkeun YOUR NAMEna Welcome to my website!. Parobahan kana gudang anjeun disebut commits . Anjeun tiasa ngabayangkeun unggal komitmen salaku snapshot tina gudang anjeun dina waktos anu béda. Waktosna ngadamel komitmen munggaran urang! Dina kotak téks kahiji, namikeun komitmen anjeun “Jieun index.html”. Commits biasana dimimitian ku kecap pagawéan ngajéntrékeun parobahan dijieun pikeun Repository nu. Pencét tombol “Komit file anyar”.

Nempo Website anjeun

Situs wéb anjeun ayeuna tiasa diaksés di https://username.github.io! (Inget ngagantikeun usernameku ngaran pamaké GitHub anjeun.) Upami anjeun hoyong, anjeun tiasa ngembangkeun halaman wéb anjeun ku nambihan langkung seueur HTML sareng CSS! Situs anjeun kedah ngamutahirkeun sababaraha menit saatos unggal komitmen.

Pamérésan masalah

Upami situs anjeun henteu muncul saatos 10 menit, cobian léngkah-léngkah tambahan ieu:

1. Dina username.github.iorepo anjeun, angkat ka Setélan sareng gulung ka handap ka Halaman GitHub. Dina Sumber, pastikeun yén repo anjeun numbu ka kaca web Anjeun. Upami anjeun ningali None, teras pilih maincabangna.
2. Dina bagian Halaman GitHub anu sami, angkat ka Pamilih Téma sareng pilih téma naon waé.

• Kumaha senar pikeun gitaris leungeun kénca
• Kumaha disinfect alat berkebun
• Kumaha carana ngalereskeun keuneung sapatu
• Kumaha jadi diri
• Kumaha usum pan orgreenic