GitHub хуудсууд дээр хэрхэн вэбсайт үүсгэх вэ: 12 алхам (зурагтай)

Агуулгын хүснэгт:

GitHub хуудсууд дээр хэрхэн вэбсайт үүсгэх вэ: 12 алхам (зурагтай)
GitHub хуудсууд дээр хэрхэн вэбсайт үүсгэх вэ: 12 алхам (зурагтай)

Видео: GitHub хуудсууд дээр хэрхэн вэбсайт үүсгэх вэ: 12 алхам (зурагтай)

Видео: GitHub хуудсууд дээр хэрхэн вэбсайт үүсгэх вэ: 12 алхам (зурагтай)
Видео: Cami бүр гал2 2024, May
Anonim

GitHub Pages бол өөрийн хувийн сайтыг эхнээс нь хийх гайхалтай арга юм. Энэ нь бүрэн үнэгүй бөгөөд зөвхөн GitHub данс шаарддаг. Гэсэн хэдий ч GitHub Pages нь вэбсайт хийхэд хамгийн тохиромжтой дизайныг санал болгодоггүй (Wix эсвэл Squarespace-ээс ялгаатай) боловч HTML/CSS/JS болон вэбсайтын бүх элементүүдтэй туршлага хуримтлуулах гайхалтай арга юм. Энэ wikiHow танд хэрхэн яаж эхлэхээ харуулах болно.

Алхам

GitHub хуудсууд дээр вэбсайт үүсгэх 1 -р алхам
GitHub хуудсууд дээр вэбсайт үүсгэх 1 -р алхам

Алхам 1. Хэрэв танд хараахан бүртгэл байхгүй бол GitHub дээр данс бүртгүүлнэ үү

GitHub хуудсан дээр өөрийн вэбсайтыг үүсгэхийн өмнө та GitHub дээр данс үүсгэх хэрэгтэй. Хэрэв та GitHub дээр аль хэдийн данстай бол нэвтэрсэн эсэхээ шалгаарай. Аль алинд нь баруун дээд багажны самбараас хандах боломжтой.

GitHub Pages дээр вэбсайт үүсгэх 2 -р алхам
GitHub Pages дээр вэбсайт үүсгэх 2 -р алхам

Алхам 2. GitHub дээр репозитор үүсгэх.

"[Таны GitHub хэрэглэгчийн нэр энд].github.io" репозиторыг нэрлэхээ мартуузай. Энэ нь таны GitHub вэбсайтыг эхлүүлэх болно.

2 -р арга 1: Код засварлагч ашиглах

GitHub хуудсууд дээр вэбсайт үүсгэх 3 -р алхам
GitHub хуудсууд дээр вэбсайт үүсгэх 3 -р алхам

Алхам 1. GitHub ширээний програмыг суулгаагүй бол татаж аваарай

GitHub десктопыг суулгах нь https://desktop.github.com/ хаягаар орж нил ягаан өнгийн "Татаж авах" товчийг дарахтай адил хялбар юм. Дараа нь суулгагчийг ажиллуулна уу. Энэ нь таны репозиторт өөрчлөлт оруулахын тулд шаардлагатай юм.

GitHub Pages дээр вэбсайт үүсгэх 4 -р алхам
GitHub Pages дээр вэбсайт үүсгэх 4 -р алхам

Алхам 2. Код засварлагчийг суулгана уу

GitHub дээр синтаксийг тодруулахын тулд танд нэг хэрэгтэй болно. Алдартай сонголтууд нь Атом, Visual Studio Code, Sublime Text, Notepad ++ зэрэг онцлог шинж чанартай, хязгаарлагдмал мэдрэмжийг агуулдаг. Код засварлагч суулгасны дараа та эхлэхэд бэлэн байна.

GitHub хуудсууд дээр вэбсайт үүсгэх 5 -р алхам
GitHub хуудсууд дээр вэбсайт үүсгэх 5 -р алхам

Алхам 3. "index.html" нэртэй файл үүсгэнэ үү

Та үүнийг код засварлагч эсвэл онлайнаар хийж болно. Та мөн өөрийн хатуу диск дээрх репозиторын байршил руу очиж, дискнийхээ репозиторийн фолдерт "index.html" файл үүсгэж болно.

GitHub хуудсууд дээр вэбсайт үүсгэх 6 -р алхам
GitHub хуудсууд дээр вэбсайт үүсгэх 6 -р алхам

Алхам 4. HTML -ээ нэмнэ үү

Үндсэн вэб хуудсыг кодлохын тулд та HTML сурах хэрэгтэй болно. CSS болон JavaScript -ийг сурах нь танд ашигтай байх болно, ингэснээр та вэб хуудсандаа загвар, функцийг нэмж болно.

Файлыг хадгалахаа мартуузай

GitHub хуудсууд дээр вэбсайт үүсгэх 7 -р алхам
GitHub хуудсууд дээр вэбсайт үүсгэх 7 -р алхам

Алхам 5. Өөрчлөлтийг хийх

GitHub -ийн ширээний компьютер руу буцаж очоод цэнхэр Commit to master товчлуур дээр дарна уу. Дараа нь Push Origin дээр дарна уу. Энэ нь өөрчлөлтүүдийг GitHub -д байршуулах болно.

Хэрэв та илүү их өөрчлөлт хийхээр төлөвлөж байгаа бол гарал үүслийг нь ч бас татахыг хүсэх болно. GitHub -ийн ширээний "Pull source" товчлуур дээр дарж машиндаа хамгийн сүүлд хийсэн даалгаврыг татаж аваарай

GitHub Pages дээр вэбсайт үүсгэх 8 -р алхам
GitHub Pages дээр вэбсайт үүсгэх 8 -р алхам

Алхам 6. Вэб хуудсаа үзэх

Вэб хөтөч дээр "[таны GitHub хэрэглэгчийн нэр энд].github.io" руу очно уу. Шинэ вэб хуудсыг үзэхийн тулд шинэчлэх товчлуур дээр дарж байхдаа Ctrl эсвэл and командыг дарж хөтчийнхөө кэшийг тойрч гарах шаардлагатай болж магадгүй юм.

2 -ийн 2 -р арга: GitHub -ийг онлайнаар ашиглах

GitHub Pages дээр вэбсайт үүсгэх Алхам 9
GitHub Pages дээр вэбсайт үүсгэх Алхам 9

Алхам 1. "index.html" нэртэй файл үүсгэнэ үү

Файл нэмэх дээр дараад Шинэ файл үүсгэх дээр дарна уу. Энэ нь файл засварлагчийг нээх болно. "Файлдаа нэр өгөх" талбарт "index.html" нэмнэ үү.

GitHub Pages дээр вэбсайт үүсгэх 10 -р алхам
GitHub Pages дээр вэбсайт үүсгэх 10 -р алхам

Алхам 2. HTML -ээ нэмнэ үү

Үндсэн вэб хуудсыг кодлохын тулд та HTML сурах хэрэгтэй болно. CSS болон JavaScript -ийг сурах нь танд ашигтай байх болно, ингэснээр та вэб хуудсандаа загвар, функцийг нэмж болно.

Файлыг хадгалахаа мартуузай

GitHub Pages дээр вэбсайт үүсгэх Алхам 11
GitHub Pages дээр вэбсайт үүсгэх Алхам 11

Алхам 3. Өөрчлөлтийг хийх

Ногоон Commit new file товчлуур дээр дарж файлыг GitHub -д хадгална уу.

GitHub Pages дээр вэбсайт үүсгэх 12 -р алхам
GitHub Pages дээр вэбсайт үүсгэх 12 -р алхам

Алхам 4. Өөрийн вэб хуудсыг үзэх

Вэб хөтөч дээр "[таны GitHub хэрэглэгчийн нэр энд].github.io" руу очно уу. Шинэ вэб хуудсыг үзэхийн тулд шинэчлэх товчийг дарж байхдаа Ctrl эсвэл and командыг дарж хөтчийнхөө кэшийг тойрч гарах шаардлагатай болж магадгүй юм.

Зөвлөмж

  • Дэд хуудсуудыг нэмэхийн тулд GitHub дээр шинэ хавтас үүсгээд "index.html" файлыг тэр хавтсанд нэмээрэй.
  • Хэрэв та домэйн нэрийг бүртгүүлсэн бол GitHub Pages нь тухайн домэйны нэрийг анхдагчаар ашиглахыг зөвшөөрөх боломжтой.
  • GitHub хуудасны репозиторууд нь дээд зэрэглэлийн данстай бол бусад тохиолдолд нийтэд нээлттэй байх ёстой.

Зөвлөмж болгож буй: