Ինչպես սկսել Hugo-ի հետ. Ինչպես ստեղծել պարզ կայք

Hugo-ն արագ, հայտնի և բաց կոդով ստատիկ կայքերի գեներատոր է: Իմացեք, թե ինչպես ստեղծել ձեր առաջին Hugo կայքը ընդամենը մի քանի կարճ քայլով:

Hugo-ն ստատիկ կայքի գեներատոր է, որը թույլ է տալիս ստեղծել վեբ կայք՝ առանց կոդավորման փորձի: Դուք կարող եք օգտագործել նախապես կառուցված թեմաները որպես ձեր կայքի դիզայնի հիմք: Սա թույլ է տալիս ավելի շատ կենտրոնանալ կայքը ձեր բովանդակությամբ համալրելու վրա:

Քանի որ Hugo-ն հիմնականում օգտագործվում է ստատիկ կայքերի համար, այն կատարյալ է բլոգեր, պորտֆելներ կամ փաստաթղթերի կայքեր ստեղծելու համար:

Դուք կարող եք հեշտությամբ ստեղծել և ստեղծել Hugo կայք՝ օգտագործելով նախապես կառուցված Hugo թեման: Ընդամենը մի քանի կարճ քայլով դուք կարող եք այնուհետև ավելացնել բովանդակություն և էջեր ձեր կայքում՝ օգտագործելով Markdown-ը:

Ինչպես տեղադրել Hugo-ն

Դուք պետք է տեղադրեք Hugo ստատիկ կայքի գեներատորը Hugo կայք ստեղծելու, գործարկելու և փորձարկելու համար: Համաձայն Hugo-ի փաստաթղթերի, կան բազմաթիվ եղանակներ, որոնցով դուք կարող եք տեղադրել այն: Ստորև ներկայացված են տարբերակներից մի քանիսը:

Mac

Դուք կարող եք տեղադրել Hugo-ն՝ օգտագործելով Homebrew:

1. Բացեք ձեր macOS տերմինալը:

2. Տեղադրեք Homebrew փաթեթի կառավարիչը:

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Տեղադրեք Hugo-ն:

   brew install hugo

Windows

Ձեզ անհրաժեշտ կլինի Windows-ի համար համարժեք փաթեթի կառավարիչ: Օրինակ, կարող եք օգտագործել Scoop փաթեթի կառավարիչը:

1. Բացեք Windows PowerShell-ը, որն արդեն պետք է լինի ձեր Windows օպերացիոն համակարգի մի մասը:

2. Եթե դուք առաջին անգամ եք տեղադրում Scoop-ը, գուցե անհրաժեշտ լինի սահմանել ձեր կատարման քաղաքականությունը:

   Set-ExecutionPolicy RemoteSigned -scope CurrentUser

3. Տեղադրեք Scoop:

   iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Տեղադրեք Hugo:

   scoop install hugo

Ինչպես ստեղծել Hugo նախագիծ

Նոր Hugo նախագիծ ստեղծելու համար դուք պետք է օգտագործեք ներկառուցվածhugo new site հրամանը:

1. Բացեք ձեր տերմինալը կամ հրամանի տողը: Նավարկեք այն թղթապանակը, որտեղ ցանկանում եք ստեղծել ձեր նախագիծը:

2. Կատարեք hugo նոր կայքհրամանը.

   hugo new site new-hugo-website

3. Նավարկեք ձեր Hugo նախագծի գտնվելու վայրը ձեր ֆայլերի հետախույզում:

4. Բացեք նախագծի թղթապանակը: Դուք կտեսնեք, որ ձեր նոր Hugo վեբկայքն ունի ֆայլի և թղթապանակի կառուցվածք, որն անհրաժեշտ է ձեր կայքի աշխատանքի համար:

   

Ինչպես ավելացնել թեմա

Այս պահին ձեր նախագիծը պարունակում է միայն Hugo նախագծի հիմնական հիմնական թղթապանակները: Այս պահին ձեր վեբկայքի լոկալ գործարկումը ցույց կտա միայն դատարկ էկրան: Քանի որ դուք դեռ չունեք HTML, CSS կամ UI դիզայն ձեր կայքի համար, դուք պետք է դրանք ավելացնեք:

Hugo-ն արդեն տրամադրում է մշակողների կողմից ստեղծված Hugo թեմաների գրադարան:

1. Ընտրեք ձեզ դուր եկած թեման: Յուրաքանչյուր թեմա կարող է ունենալ մի փոքր այլ կարգաբերման հրահանգներ, որոնք ցուցադրվում են իրենց համապատասխան նախադիտման էջում: Այս ձեռնարկը որպես օրինակ կօգտագործի Tale թեման:

   

2. Նավարկեք ձեր նախագծի արմատային թղթապանակը տերմինալում կամ հրամանի տողում:

   cd new-hugo-website

3. Գործարկեք հրամանը՝ Tale թեման ավելացնելու համար: Դուք կարող եք ավելացնել թեման որպես ենթամոդուլ, որը կստեղծի նոր թղթապանակ, որը կոչվում է tale theme թղթապանակի ներսում:

   git init
   git submodule add https://github.com/EmielH/tale-hugo.git themes/tale

   git clone https://github.com/EmielH/tale-hugo.git themes/tale

4. Նավարկեք ձեր նախագծի թղթապանակ: Սեղմեք թեմաներ թղթապանակը՝ այն բացելու համար: Անկախ նրանից, թե որ հրամանն եք օգտագործել, կլինի նոր tale թղթապանակ, որը կպահի նոր ներբեռնված թեման:

   

5. config.toml ֆայլում ավելացրեք հեքիաթի թեման որպես կազմաձևման մաս: Սա Հյուգոյին կհուշի օգտագործել HTML, CSS և այլ ոճեր, որոնք ներառում է Tale թեման:

   theme = "tale"

Ինչպես ավելացնել էջեր ձեր կայքում

Դուք կարող եք գրել ձեր բովանդակությունը ցանկացած ձևաչափով, որն ընդունում է Hugo-ն: Hugo-ն այնուհետև ավտոմատ կերպով կվերափոխի ձեր ֆայլերը HTML ֆայլերի՝ դրանք օգտատիրոջը մատուցելիս: Սա արագացնում է ինչպես կառուցելը, այնպես էլ տեղակայելը: Այս օրինակը կօգտագործի Markdown-ը՝ պարզ տեքստային լեզու, որպես ձեր բովանդակության ձևաչափ:

Դուք կարող եք Markdown գրել հիմնականում պարզ անգլերենով՝ մի քանի ավելացված խորհրդանիշներով՝ ցանկացած ձևաչափում նշելու համար: Սա ներառում է սիմվոլների ավելացում՝ վերնագրերը ներկայացնելու համար, որոնց բառերը թավ են, կամ որևէ այլ հիմնական ձևաչափ, որը ձեզ կարող է անհրաժեշտ լինել:

Ձեր կայքէջում նոր ենթաէջ կամ գրառում ավելացնելու համար դուք պետք է նոր Markdown ֆայլ ավելացնեք բովանդակությունթղթապանակում: Յուրաքանչյուր գրառում կամ էջ կունենա իր հետ կապված Markdown ֆայլը:

1. Բացեք բովանդակությանթղթապանակը ձեր Hugo նախագծի ներսում: Ստեղծեք նոր Markdown ֆայլ, որը կոչվում է myFirstPost.md:

   

2. Բացեք ֆայլը ցանկացած տեքստային խմբագրիչում, ինչպիսիք են Notepad++ կամ Visual Studio Code-ը:

3. Ֆայլի վերևում ավելացրեք որոշ մետատվյալներ: Սա կներառի գրառման մասին կարևոր տեղեկություններ: Ձեր օգտագործած թեման այս տեղեկատվությունը որոշակի ձևաչափով կձևավորի էջում:

   ---
   author: "Your Name"
   title: "My First Post"
   date: "2022-05-17"
   ---

4. Մետատվյալներն ավելացնելուց հետո կարող եք սկսել ավելացնել ձեր բովանդակությունը՝ օգտագործելով Markdown:

   This is my very first post on my Hugo website!
   The Hugo theme being used for this site is called Tale.
   It is very simple to install and configure.
   # Subheading
   This is some content.
   # Another Subheading
   This is more content.

5. Ազատորեն ավելացրեք ավելի շատ նշագրման ֆայլեր՝ ձեր կայքէջում ավելի շատ էջեր ավելացնելու համար:

Ինչպես գործարկել և փորձարկել ձեր Hugo կայքը տեղում

Ձեր կայքը գործարկելու համար օգտագործեք hugo serve հրամանը:

1. Բացեք տերմինալ կամ հրամանի տող:
2. Նավարկեք ձեր Hugo նախագծի արմատային թղթապանակը:

3. Գործարկեք hugo serveհրամանը.

   hugo serve

4. Սպասեք, մինչև կայքը ավարտի գործարկման գործընթացը: Դա ավարտվելուց հետո տերմինալը հաղորդագրություն կտպագրի, որտեղ ասվում է, թե որ տեղական հասցեից կարող եք մուտք գործել կայք: Սովորաբար սա http://localhost:1313/. է

   

5. Բացեք վեբ զննարկիչը և մուտքագրեք http://localhost:1313/ կամ այն հասցեն, որը ձեզ տվել է տերմինալը: Դուք կտեսնեք ձեր Hugo կայքի գլխավոր էջը:

6. Էջում կլինի ձեր ունեցած յուրաքանչյուր նշագրման ֆայլի գրառումների ցանկը: Այս դեպքում կան երկու նշագրման ֆայլեր, որոնք լցված են բովանդակությամբ: Սա ներառում է myFirstPost.md էջը, որը դուք պատրաստել եք ավելի վաղ: Այն ներառում է նաև նոր գրառում, որը կոչվում է bananaCakeRecipe.md:

   

7. Կտտացրեք նախադիտումներից մեկի վերնագրի հղմանը: Այն ձեզ կտանի դեպի այդ կոնկրետ գրառման ամբողջական էջ:

   

Հոսթինգ Ձեր Hugo վեբ կայքը

Hugo-ի հետ ստատիկ կայք ստեղծելն ու գործարկելը պարզ և արագ է: Դուք կարող եք օգտագործել և կարգավորել նախապես կառուցված թեմաները, ինչպես նաև գործարկել ձեր Hugo վեբ կայքը տեղական փորձարկման համար: Դուք կարող եք նաև ավելացնել բովանդակության էջեր ձեր վեբկայքում՝ օգտագործելով Markdown-ը:

Երբ ստեղծեք ձեր Hugo կայքը, կարող եք սկսել ավելին իմանալ, թե ինչպես այն հյուրընկալել: Կան բազմաթիվ անվճար վեբ հոստինգի տարբերակներ, որոնցից կարող եք ընտրել, ինչպիսիք են Dropbox-ը, Google Drive-ը կամ OneDrive-ը: