Hugon käytön aloittaminen: Kuinka luoda yksinkertainen verkkosivusto

Hugo on staattinen sivuston luontiohjelma, jonka avulla voit luoda verkkosivuston ilman koodauskokemusta. Voit käyttää valmiita teemoja verkkosivustosi suunnittelun perustana. Näin voit keskittyä enemmän täyttämään sivustosi sisällölläsi.

Koska Hugoa käytetään enimmäkseen staattisille verkkosivustoille, se on täydellinen blogien, portfolioiden tai dokumentaatiosivustojen luomiseen.

Voit helposti perustaa ja luoda Hugo-verkkosivuston käyttämällä valmiiksi rakennettua Hugo-teemaa. Muutaman lyhyen vaiheen avulla voit lisätä sisältöä ja sivuja verkkosivustollesi Markdownin avulla.

Kuinka asentaa Hugo

Sinun on asennettava Hugon staattinen sivustogeneraattori luoda, suorittaa ja testata Hugo-verkkosivustoa. Mukaan Hugon dokumentaatio, voit asentaa sen monella tavalla. Alla on joitain vaihtoehtoja.

Mac

Voit asentaa Hugon Homebrew'n avulla.

1. Avaa macOS-pääte.
2. Asenna Homebrew-paketinhallinta.

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

3. Asenna Hugo.

   hautua Asentaa hugo

Windows

Tarvitset vastaavan paketinhallinnan Windowsille. Voit käyttää esimerkiksi Scoop pakettien hallinta.

1. Avaa Windows PowerShell, jonka pitäisi olla jo osa Windows-käyttöjärjestelmääsi.
2. Jos asennat Scoopin ensimmäistä kertaa, sinun on ehkä asetettava suorituskäytäntösi.

   Aseta-ExecutionPolicy RemoteSigned -laajuus Nykyinen käyttäjä

3. Asenna Scoop:

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

4. Asenna Hugo:

   kauha Asentaa hugo

Kuinka luoda Hugo-projekti

Uuden Hugo-projektin luomiseksi sinun on käytettävä sisäänrakennettua hugo uusi sivusto komento.

1. Avaa terminaali tai komentokehote. Siirry kansioon, johon haluat luoda projektin.
2. Suorita hugo uusi sivusto komento:

   hugo Uusi sivusto Uusi-hugo-verkkosivusto

3. Navigoi Hugo-projektisi sijaintiin tiedostojenhallinnassa.
4. Avaa projektikansio. Näet, että uudella Hugo-verkkosivustollasi on tiedosto- ja kansiorakenne, joka tarvitaan verkkosivustosi toimimiseen.

Kuinka lisätä teema

Tällä hetkellä projektisi sisältää vain Hugo-projektin pääkansiot. Web-sivuston käyttäminen paikallisesti tässä vaiheessa näyttäisi vain tyhjän näytön. Koska sinulla ei ole vielä määritetty HTML-, CSS- tai käyttöliittymämalleja verkkosivustollesi, sinun on lisättävä ne.

Hugo tarjoaa jo sisäänrakennetun kirjaston Hugo teemat kehittäjien luomia.

1. Valitse teema, josta pidät. Jokaisella teemalla voi olla hieman erilaiset asennusohjeet, jotka näkyvät niiden esikatselusivulla. Tämä opetusohjelma käyttää Tarinan teema Esimerkiksi.
2. Siirry projektisi juurikansioon päätteellä tai komentorivillä.

   CD Uusi-hugo-verkkosivusto

3. Suorita komento lisätäksesi Tale-teeman. Voit lisätä teeman alimoduuliksi, joka luo uuden kansion nimeltä tarina sisällä teema kansio.

   git init
   git-alimoduuli lisää https://github.com/EmielH/tale-hugo.git themes/tale

   Vaihtoehtoisesti voit kloonata GitHub-tarinavaraston projektisi teemakansioon.

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

4. Siirry projektikansioosi. Klikkaa teemoja kansio avataksesi sen. Riippumatta siitä, mitä komentoa käytit, tulee uusi tarina kansio, joka tallentaa juuri ladatun teeman.
5. Vuonna config.toml tiedosto, lisää tarinateema osaksi määritystä. Tämä käskee Hugoa käyttämään HTML-, CSS- ja muita Tale-teeman sisältämiä tyylejä.

   teema = "tarina"

Sivujen lisääminen verkkosivustollesi

Voit kirjoittaa sisältösi missä tahansa Hugon hyväksymässä muodossa. Hugo muuntaa sitten tiedostosi automaattisesti HTML-tiedostoiksi palvellessaan niitä käyttäjälle. Tämä tekee siitä nopean sekä rakentamisen että käyttöönoton. Tämä esimerkki käyttää Markdown, yksinkertainen tekstikieli, sisältösi muotona.

Voit kirjoittaa Markdownin enimmäkseen tavallisella englanniksi muutamilla lisätyillä symboleilla määrittääksesi minkä tahansa muotoilun. Tämä sisältää symbolien lisäämisen edustamaan otsikoita, mitkä sanat ovat lihavoitu, tai mitä tahansa muuta perusmuotoilua, jota saatat tarvita.

Jos haluat lisätä uuden alasivun tai viestin verkkosivustollesi, sinun on lisättävä uusi Markdown-tiedosto sisältö kansio. Jokaiseen viestiin tai sivuun liittyy oma Markdown-tiedosto.

1. Avaa sisältö kansio Hugo-projektisi sisällä. Luo uusi Markdown-tiedosto nimeltä myFirstPost.md.
2. Avaa tiedosto missä tahansa tekstieditorissa, kuten Notepad++ tai Visual Studio Code.
3. Lisää metatietoja tiedoston yläosaan. Tämä sisältää tärkeitä tietoja postauksesta. Käyttämäsi teema muotoilee nämä tiedot tietyllä tavalla sivulla.

   
   kirjoittaja: "Sinun nimesi"
   otsikko: "Ensimmäinen viestini"
   Päivämäärä: "2022-05-17"
   

4. Kun olet lisännyt metatiedot, voit aloittaa sisällön lisäämisen Markdownin avulla.

   Tämä On ensimmäinen postaukseni Hugo-verkkosivuillani!
   Hugo-teema käytössä vartenTämä sivuston nimi on Tale.
   Se On erittäin helppo asentaa ja konfiguroida.
   # Alaotsikko
   Tämä On jotain sisältöä.
   # Toinen alaotsikko
   Tämä On lisää sisältöä.

5. Voit vapaasti lisätä lisää merkintätiedostoja lisätäksesi sivuja verkkosivustollesi.

Kuinka käyttää ja testata Hugo-verkkosivustoasi paikallisesti

Käytä verkkosivustoasi ylläpitämiseen hugo palvella komento.

1. Avaa pääte tai komentorivi.
2. Siirry Hugo-projektisi juurikansioon.
3. Suorita hugo palvella komento:

   hugo palvella

4. Odota, että verkkosivusto suorittaa käynnistysprosessin loppuun. Kun tämä on valmis, pääte tulostaa viestin, mistä paikallisesta osoitteesta voit käyttää verkkosivustoa. Yleensä tämä on http://localhost: 1313/.
5. Avaa verkkoselain ja kirjoita http://localhost: 1313/, tai mikä osoite pääte antoi sinulle. Näet Hugo-verkkosivustosi pääsivun.
6. Sivulla on luettelo viesteistä jokaiselle sinulla olevalle markdown-tiedostolle. Tässä tapauksessa sisällöllä on kaksi merkintätiedostoa. Tämä sisältää myFirstPost.md-sivun, jonka teit aiemmin. Se sisältää myös uuden viestin nimeltä bananaCakeRecipe.md.
7. Napsauta jonkin esikatselun otsikkolinkkiä. Se vie sinut kyseisen viestin koko sivulle.

Hugo-verkkosivustosi ylläpito

Staattisen verkkosivuston käynnistäminen on helppoa ja nopeaa Hugon avulla. Voit käyttää ja määrittää valmiita teemoja ja käyttää Hugo-verkkosivustoasi paikallisesti testausta varten. Voit myös lisätä sisältösivuja verkkosivustollesi Markdownin avulla.

Kun olet luonut Hugo-verkkosivustosi, voit alkaa oppia lisää sen isännöimisestä. Valittavanasi on monia ilmaisia ​​verkkosivustojen isännöintivaihtoehtoja, kuten Dropbox, Google Drive tai OneDrive.

Kuinka saada ilmainen Web-sivuston isännöinti Dropboxin, Google Driven tai OneDriven avulla

Lue Seuraava