Priekšvārds
Pēc vietnes izveides ar AI rīkiem, piemēram, ChatGPT, Canva, Gemini Canvas, Claude Artifacts vai Sider Web Creator, nākamais lielais jautājums ir kā rīkoties ar tīmekļa mitināšanu GitHub Pages, lai jūs varētu apmeklēt vietni, izmantojot savu domēnu. Šī rokasgrāmata soli pa solim palīdzēs jums iziet cauri visam procesam — no projekta eksportēšanas no Sider Web Creator līdz pilnvērtīgai vietnei ar jūsu personīgo domēnu —, vienlaikus atklājot gan tīmekļa mitināšanas, gan GitHub Pages konfigurācijas noslēpumus.
🎯 Ko jūs iemācīsities
Kā pareizi lejupielādēt un saprast AI ģenerētos projekta failus, pirms izvēlaties GitHub Pages tīmekļa mitināšanas darbplūsmu.
Detalizētas instrukcijas, kā bez maksas izvietot vietni GitHub Pages.
Kā iegādāties un piesaistīt savu pielāgoto domēnu GitHub Pages iestatījumos un savienot to ar labākās prakses DNS ierakstiem.
Profesionāli padomi, kā padarīt vietni pilnīgi profesionālu un uzticamu, kad GitHub Pages iestatīšana ir pabeigta.
📥 1. solis: Lejupielādējiet savu vietni no Sider Web Creator
Lielākā daļa statiskās mitināšanas platformu, tostarp GitHub Pages, sagaida tīru būvējuma mapi, tāpēc vispirms jums ir jāsavāc savi faili.
1.1. Lejupielādējiet projekta failus
Kad Web Creator pabeidz vietnes ģenerēšanu, noklikšķiniet uz pogas Lejupielādēt augšējā labajā stūrī.
Pagaidiet, kamēr sistēma iepako jūsu projektu.
Jūs saņemsiet .zip failu, kas ir gatavs augšupielādei GitHub Pages.
Izpakojiet zip failu jebkurā vietā savā datorā.
1.2. Izprotiet failu struktūru (svarīgi!)
my‑website/
├── dist/ ⭐ Produkcijas būvējums priekš **GitHub Pages**
│ ├── index.html → Sākumlapa
│ ├── assets/ → Stili un skripti
│ └── …
├── src/ 📝 Avota koda mape
├── package.json 📦 Projekta konfigurācija
└── …citi faili
Svarīgs atgādinājums: Tikai saturs mapē dist/ tiek publicēts GitHub Pages.
1.3. Lokālās priekšskatījuma pārbaude
Ieejiet mapē dist/.
Veiciet dubultklikšķi uz index.html.
Vietne atveras jūsu pārlūkprogrammā.
Pirms nosūtīšanas uz GitHub Pages pārbaudiet, vai viss darbojas.
🚀 2. solis: Izvēlieties izvietošanas platformu
Lai gan GitHub Pages ir šīs rokasgrāmatas galvenais varonis, šeit ir ātrs salīdzinājums:
| |
|---|
🌟 GitHub Pages (šīs rokasgrāmatas galvenais fokuss) | Pilnīgi bez maksas • Velciet un nometiet vai git push izvietošana • Bezmaksas HTTPS • Globāls CDN • Pielāgoti domēni • Vietējā CI ar GitHub Actions |
| Globāls edge tīkls • 100% bez maksas • Zibenīgi ātrs |
| Pulēts lietotāja interfeiss • Funkcijām bagāts |
📤 3. solis: Izvietošana GitHub Pages (detalizēta rokasgrāmata)
Lai gan GitHub Pages atrodas izstrādātāju platformā, domājiet par to kā par ultramodernu tīmekļa mitināšanu ar ērtu pogas nospiešanu.
3.1. Reģistrējieties un izveidojiet repozitoriju
Apmeklējiet github.com un pierakstieties.
Noklikšķiniet uz + New repository.
Nosauciet to par my‑website un izvēlieties Public (vai Private, ja jums ir apmaksāts plāns; GitHub Pages tagad atbalsta privātus repozitorijus).
Atstājiet Initialize with README neatzīmētu, ja plānojat vēlāk veikt push.
3.2. Pievienojiet savus vietnes failus
A metode: Velciet un nometiet augšupielādi (labākais iesācējiem)
Repo Code cilnē noklikšķiniet uz Add file → Upload files.
Nometiet visu iekš dist/.
Ritiniet uz leju un noklikšķiniet uz Commit changes.
B metode: Git CLI (labākais izstrādātājiem)
# Klonējiet tukšu repozitoriju
git clone https://github.com/<user>/my‑website.git
cd my‑website
# Kopējiet būvējuma izvadi
cp -r /path/to/dist/* .
# Commit & push
git add .
git commit -m "Initial **GitHub Pages** deploy"
git push origin main
Abas metodes atstāj jūs ar statiskiem failiem repo saknē — lieliski piemērots GitHub Pages.
3.3. Iespējojiet GitHub Pages
Dodieties uz Settings → Pages.
Sadaļā Source izvēlieties Deploy from a branch → main (/root).
Noklikšķiniet uz Save. GitHub Pages izveido aptuveni 30 sekundēs un atgriež URL, piemēram, https://<user>.github.io/my‑website/.
3.4. Iegūstiet savu noklusējuma URL
Apmeklējiet saiti, lai pārliecinātos, ka viss ielādējas. GitHub Pages automātiski nodrošina saturu, izmantojot globālu CDN.
🌐 4. solis: Pērciet un piesaistiet savu domēnu
4.1. Iegādājieties domēnu
Ieteicamie reģistratori (visi labi sader ar GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Izvēlieties īsu .com, ja iespējams.
4.2. Pievienojiet domēnu GitHub Pages
Joprojām atrodoties Settings → Pages, atrodiet Custom domain.
Ievadiet mywebsite.com vai www.mywebsite.com.
Noklikšķiniet uz Save. GitHub Pages automātiski ieraksta CNAME failu.
4.3. Konfigurējiet DNS ierakstus
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Pagaidiet 10 min–24 h, līdz izplatīsies. Šīs IP adreses ir nemainīgas GitHub Pages. |
4.4. Ieviesiet HTTPS
Pēc DNS izplatīšanās atsvaidziniet Pages iestatījumus un pārslēdziet Enforce HTTPS. Let’s Encrypt sertifikāti tiek izsniegti automātiski.
✨ 5. solis: Padariet vietni profesionālu
5.1. Pievienojiet pielāgotu Favicon
Sagatavojiet 32 × 32 px ikonu ar nosaukumu favicon.ico.
Ievietojiet to repo saknē.
Veiciet commit un push; GitHub Pages to apkalpo nekavējoties.
5.2. Ievietojiet pielāgotu meta informāciju
Rediģējiet index.html repo saknē:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3. Analītika (pēc izvēles)
Ielīmējiet GA / Plausible fragmentus iekš <head>; GitHub Pages ievēro kešatmiņas galvenes.
🔧 Traucējummeklēšana
Tukša lapa? Pārliecinieties, vai index.html atrodas repo saknē un aktīvu ceļi ir relatīvi.
Domēns cilpo uz .github.io? Vēlreiz pārbaudiet A/CNAME ierakstus un pagaidiet pilnu TTL.
HTTPS pārslēgs ir atspējots? DNS vēl nav pareizs; pārbaudiet ar dig.
🎉 Kopsavilkums
Apsveicam! Jūs tagad esat:
✅ Veiksmīgi lejupielādējāt savu AI ģenerēto vietni, kas ir gatava mitināšanai GitHub Pages.
✅ Bez maksas izvietojāt to GitHub Pages.
✅ Nodrošinājāt savu pielāgoto domēnu.
✅ Nospodrinājāt GitHub Pages vidi, lai tā izskatītos pilnībā profesionāli.
Jūsu vietne tagad ir:
🌐 Tiešsaistē 24/7, ko nodrošina GitHub Pages CDN.
🏷️ Tiek apkalpota ar profesionālu domēnu.
🔒 Aizsargāta ar HTTPS šifrēšanu.
⚡ Globāli ātra, pateicoties GitHub Pages edge mezgliem.
🗝️ Pilnībā pieder jums un tiek kontrolēta no jūsu puses.
💡 Nākamie soļi
SEO optimizācija: pievienojiet mērķtiecīgus atslēgvārdus un meta aprakstus, lai palielinātu meklēšanas reitingus savam GitHub Pages iestatījumam.
Koplietošana sociālajos tīklos: integrējiet koplietošanas pogas galvenajām platformām.
Nepārtraukti atjauninājumi: regulāri veiciet commit izmaiņas; GitHub Pages automātiski veic atkārtotu izvietošanu.
Dublējumkopijas: iespējojiet GitHub repozitorija aizsardzību vai spoguļojiet repozitoriju.
Jūs tagad esat īsts vietnes īpašnieks — kopīgojiet savu GitHub Pages saiti un parādiet savu darbu pasaulei!
