Read in other languages: Π ΡΡΡΠΊΠΈΠΉ, Polski.
ΠΡΠΎΡ ΠΏΡΠΎΠ΅ΠΊΡ Π±ΡΠ» ΡΠΎΠ·Π΄Π°Π½ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Parcel. ΠΠ»Ρ Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²Π° ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΎΠ±ΡΠ°ΡΠΈΡΡ ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
parcel-project-template
Π½Π° ΠΈΠΌΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°.npm install
.npm start
.src/sass
ΠΈ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π²
ΡΠ°ΠΉΠ»Ρ ΡΡΠΈΠ»Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ index.html
ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ
index.scss
.src/images
. Π‘Π±ΠΎΡΡΠΈΠΊ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅Ρ ΠΈΡ
, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ
ΠΏΡΠΈ Π΄Π΅ΠΏΠ»ΠΎΠ΅ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ½ Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡΠ΅ ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Π² ΠΎΠ±Π»Π°ΠΊΠ΅, ΡΡΠΎΠ±Ρ Π½Π΅
Π½Π°Π³ΡΡΠΆΠ°ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π° ΡΠ»Π°Π±ΡΡ
ΠΌΠ°ΡΠΈΠ½Π°Ρ
ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π½ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ
Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.ΠΠ»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄Π΅ΠΏΠ»ΠΎΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ°Π³ΠΎΠ²
ΠΏΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ. ΠΠ°ΠΉΠ΄ΠΈ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡ Settings
ΠΈ Π² ΠΏΠΎΠ΄ΡΠ΅ΠΊΡΠΈΠΈ
Actions
Π²ΡΠ±Π΅ΡΠΈ Π²ΡΠ±Π΅ΡΠΈ ΠΏΡΠ½ΠΊΡ General
.
ΠΡΠΎΠ»ΠΈΡΡΠ°ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΠ΅ΠΊΡΠΈΠΈ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ±Π΅Π΄ΠΈΡΡ ΡΡΠΎ Π²ΡΠ±ΡΠ°Π½Ρ ΠΎΠΏΡΠΈΠΈ ΠΊΠ°ΠΊ
Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΈ Π½Π°ΠΆΠΌΠΈ Save
. ΠΠ΅Π· ΡΡΠΈΡ
Π½Π°ΡΡΡΠΎΠ΅ΠΊ Ρ ΡΠ±ΠΎΡΠΊΠΈ Π±ΡΠ΄Π΅Ρ
Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠ°Π² Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠ° Π΄Π΅ΠΏΠ»ΠΎΡ.
ΠΡΠΎΠ΄Π°ΠΊΡΠ½ Π²Π΅ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π±ΡΠ΄Π΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡΡ ΠΈ Π΄Π΅ΠΏΠ»ΠΎΠΈΡΡΡΡ Π½Π° GitHub
Pages, Π² Π²Π΅ΡΠΊΡ gh-pages
, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ Π²Π΅ΡΠΊΠ° main
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ,
ΠΏΠΎΡΠ»Π΅ ΠΏΡΡΠΌΠΎΠ³ΠΎ ΠΏΡΡΠ° ΠΈΠ»ΠΈ ΠΏΡΠΈΠ½ΡΡΠΎΠ³ΠΎ ΠΏΡΠ»-ΡΠ΅ΠΊΠ²Π΅ΡΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π² ΡΠ°ΠΉΠ»Π΅
package.json
ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»Π΅ homepage
ΠΈ ΡΠΊΡΠΈΠΏΡ build
, Π·Π°ΠΌΠ΅Π½ΠΈΠ²
your_username
ΠΈ your_repo_name
Π½Π° ΡΠ²ΠΎΠΈ, ΠΈ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π½Π° GitHub.
"homepage": "https://your_username.github.io/your_repo_name/",
"scripts": {
"build": "parcel build src/*.html --public-url /your_repo_name/"
},
ΠΠ°Π»Π΅Π΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΉΡΠΈ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ GitHub-ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ (Settings
> Pages
) ΠΈ
Π²ΡΡΡΠ°Π²ΠΈΡΡ ΡΠ°Π·Π΄Π°ΡΡ ΠΏΡΠΎΠ΄Π°ΠΊΡΠ½ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ /root
Π²Π΅ΡΠΊΠΈ gh-pages
, Π΅ΡΠ»ΠΈ
ΡΡΠΎ Π½Π΅Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.
Π‘ΡΠ°ΡΡΡ Π΄Π΅ΠΏΠ»ΠΎΡ ΠΊΡΠ°ΠΉΠ½Π΅Π³ΠΎ ΠΊΠΎΠΌΠΌΠΈΡΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ Π²ΠΎΠ·Π»Π΅ Π΅Π³ΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°.
ΠΠΎΠ»Π΅Π΅ Π΄Π΅ΡΠ°Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΡΠ°ΡΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΊΠ»ΠΈΠΊΠ½ΡΠ² ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅, ΠΈ Π²
Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΌ ΠΎΠΊΠ½Π΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Details
.
Π§Π΅ΡΠ΅Π· ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ Π²ΡΠ΅ΠΌΡ, ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠ°ΡΡ ΠΌΠΈΠ½ΡΡ, ΠΆΠΈΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ
ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ Π² ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ homepage
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΎΡ
ΡΡΡΠ»ΠΊΠ° Π½Π° ΠΆΠΈΠ²ΡΡ Π²Π΅ΡΡΠΈΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ
https://goitacademy.github.io/parcel-project-template.
ΠΡΠ»ΠΈ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°, ΡΠ±Π΅Π΄ΠΈΡΡ ΡΡΠΎ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Console
Π½Π΅Ρ ΠΎΡΠΈΠ±ΠΎΠΊ
ΡΠ²ΡΠ·Π°Π½Π½ΡΡ
Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌΠΈ ΠΏΡΡΡΠΌΠΈ ΠΊ CSS ΠΈ JS ΡΠ°ΠΉΠ»Π°ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ° (404). Π‘ΠΊΠΎΡΠ΅Π΅
Π²ΡΠ΅Π³ΠΎ Ρ ΡΠ΅Π±Ρ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° homepage
ΠΈΠ»ΠΈ ΡΠΊΡΠΈΠΏΡΠ° build
Π²
ΡΠ°ΠΉΠ»Π΅ package.json
.
main
GitHub-ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ, Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ
ΡΠΊΡΠΈΠΏΡ (GitHub Action) ΠΈΠ· ΡΠ°ΠΉΠ»Π° .github/workflows/deploy.yml
.gh-pages
. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π² Π»ΠΎΠ³Π΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
ΡΠΊΡΠΈΠΏΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΠ΅ΠΌ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°.