Cum să creați primul dvs. blog Hugo: un ghid practic

Hugo este un instrument excelent de utilizat dacă doriți să începeți un blog.

Îl folosesc pe Hugo pentru blogul meu, flaviocopes.com, și îl folosesc de mai bine de doi ani. Am câteva motive pentru care îl iubesc pe Hugo.

În primul rând, este simplu, plictisitor, flexibil, și rapid.

Principalul motiv este că este simplu. Nu trebuie să înveți prea multe pentru a începe.

Scrii conținut în Markdown, un format care îmi permite să folosesc editorul meu preferat (Bear) pentru a scrie postări.

Hugo este plictisitor. Nu mă înțelegeți greșit, acesta este un lucru foarte pozitiv. În calitate de dezvoltator, sunt tentat să modific tot timpul lucrurile aici și acolo. Nu există o tehnologie de lux care să stea la baza lui Hugo. Este construit folosind Go, una dintre limbile pe care le iubesc cel mai mult, dar asta nu înseamnă că vreau să mă scufund în interiorul lui Hugo și să schimb modul în care funcționează.

Și nu apare nimic interesant sau de generația următoare, așa cum tind să facă multe cadre JavaScript.

Prin urmare, este plictisitor, ceea ce îmi oferă mult timp să fac ceea ce este cu adevărat util atunci când lucrez la un blog: scrierea de conținut. Mă concentrez pe conținut, nu pe containerul de conținut.

Acestea fiind spuse, Hugo este destul de dracului flexibil. Mi-am început propriul blog cu o temă open source, apoi l-am schimbat complet în timp. Uneori vreau să fac lucruri pe site-ul meu care nu intră în sfera unui blog simplu, iar Hugo îmi permite să creez acele lucruri.

În sfârșit, un alt motiv pentru care îl iubesc pe Hugo este că este rapid. De ce? În primul rând, are Go la bază, despre care se știe că este un limbaj foarte rapid. Și în ecosistemul Go, nu există niciun concept de dependențe de 100 megabytes. Lucrurile sunt făcute să fie cât mai rapide. În plus, Hugo nu trebuie să facă unele dintre lucrurile fanteziste necesare atunci când se utilizează tehnologia fantezie. Acesta este un produs secundar al plictiselii.

Oricum, suficient cu cuvinte.

Hugo este uimitor, mai ales dacă ești dezvoltator și ești dispus să scrii în Markdown. Oamenii non-tehnologici ar putea refuza doar să utilizeze Markdown și este perfect de înțeles.

De asemenea, trebuie să fiți pregătiți pentru un flux de lucru centrat pe Git pentru ca lucrurile să dea clic.

Acesta este procesul de scriere a unui blog:

• scrie o postare folosind Markdown,
• apoi trimiteți modificările la un depozit Git, cel mai frecvent pe GitHub,
• și apoi unele tehnologii de lipire implementează modificările pe serverul care găzduiește site-ul.

Găzduirea unui site web Hugo

Un blog Hugo este complet static. Aceasta înseamnă că nu este nevoie să vă găzduiți propriul server sau să utilizați un serviciu special pentru acesta.

Netlify, Now și GitHub Pages sunt trei locuri grozave în care puteți găzdui gratuit un blog Hugo.

Singurul cost este cel pe care trebuie să îl susțineți pentru numele domeniului. Nu pot sublinia suficient importanța de a avea propriul nume de domeniu. Nu .github.io sau .netlify.com sau .now.sh site-uri, vă rog.

Propriile mele site-uri Hugo sunt găzduite pe Netlify.

Alegeți un domeniu

Puneți-vă blogul în propriul domeniu. Alege una. Folosește-ți propriul nume. Si foloseste .com sau .blog. Nu încercați să fiți inteligent utilizând un domeniu localizat – de exemplu, nu utilizați .io. .com oferă doar o impresie mai bună și este reutilizabil pentru toate proiectele viitoare, nu doar pentru a vă găzdui blogul. L-am ales pe acela.

Oh, și dacă aveți un domeniu vechi, folosiți-l. De ce? Cu cât domeniul dvs. este mai vechi, cu atât mai bine.

Notă privind subdomeniile: fiecare subdomeniu, pentru Google, este un site web diferit. Deci, dacă domeniul dvs. este flaviocopes.comși vă creați blogul în blog.flaviocopes.com, atunci acesta este un site web complet nou pentru Google și va avea propriul său clasament separat de domeniul principal.

Sugestia mea este de a evita complet subdomeniile.

Instalează Hugo

Pentru a instala Hugo pe macOS, rulați de pe terminal

brew install hugo

brew comanda nu există pe Mac? Verifică Ghid pentru prepararea caselor.

Pentru Windows și Linux, verificați ghid oficial de instalare.

Creați un site Hugo

Odată ce Hugo este instalat, puteți crea un site Hugo rulând

hugo new site myblog

Vă sugerez să faceți asta într-un www din directorul dvs. Home, deoarece comanda va crea un nou myblog folderul în care îl rulați.

Alegeți o temă

Acum, înainte de a începe, trebuie să alegeți o temă. Mi-aș dori ca Hugo să includă o temă implicită pentru a face lucrurile mai simple, dar nu.

Există o mulțime de opțiuni https://themes.gohugo.io. Recomandarea mea personală este să încep cu https://themes.gohugo.io/ghostwriter/ și modifică-l mai târziu.

De asemenea, vă recomand să evitați git clone fluxul de lucru pe care îl sugerează pe pagina respectivă. Cu siguranță veți schimba tema în viitor și consider că este mai bine să aveți un singur depozit atât pentru conținut, cât și pentru temă. Simplifică implementarea.

Deci, du-te la https://github.com/jbub/ghostwriter/archive/master.zip pentru a descărca versiunea curentă a temei.

Apoi despachetați-l în themes/ghostwriter dosar pe site-ul Hugo nou creat:

Observați că există un exampleSite dosar din themes/ghostwriter. Deschideți-l și deschideți-l content subfolder. Acolo, puteți vedea page, post și project subfoldere.

Copie page și post în content folderul site-ului:

Configurația

Datele eșantionului oferă și un eșantion config.toml înregistrați în themes/ghostwriter/exampleSite/config.toml. Acesta este fișierul de configurare Hugo, care îi spune lui Hugo câteva detalii despre configurație fără a fi nevoie să codificați informații din temă.

Vă recomand să nu copiați acest lucru, deoarece are prea multe lucruri și să folosiți în schimb acest lucru:

baseurl = "/"
title = "My blog"
theme = "ghostwriter"

[Params]
    mainSections = ["post"]
    intro = true
    headline = "My headline"
    description = "My description"
    github = "https://github.com/XXX"
    twitter = "https://twitter.com/XXX"
    email = "XXX@example.com"
    opengraph = true
    shareTwitter = true
    dateFormat = "Mon, Jan 2, 2006"

[Permalinks]
    post = "/:filename/"

Puteți personaliza în mod liber informațiile din acest fișier mai târziu.

Acum, din linia de comandă, executați:

hugo serve

Deschis http://localhost:1313 în browserul dvs. și ar trebui să puteți vedea site-ul live!

Aceasta este pagina principală a site-ului.

Există o listă de postări preluate din content/post dosarul site-ului dvs. web:

Faceți clic pe primul, numit „Crearea unei teme noi”:

Puteți deschide fișierul content/post/creating-a-new-theme.md pentru a schimba orice în postare.

Dacă salvați, site-ul web se va actualiza automat cu noul conținut.

Este destul de minunat, nu?

Puteți crea o nouă postare creând o nouă .md fișier, prefixându-l cu orice doriți. Puteți utiliza numere incrementale, dacă preferați. Sau folosește o întâlnire.

Dacă ceva nu arată așa cum doriți, puteți deschide fișierul themes/ghostwriter/layouts dosar și reglați-l.

Șablonul „post” este definit în themes/ghostwriter/layouts/post/single.html:

Hugo folosește șabloanele Go. Sintaxa poate fi destul de necunoscută, dar site-ul Hugo face o treabă foarte bună explicându-le în acest sens Introducere șabloane Go.

Cu toate acestea, încercați să nu vă uitați la personalizarea șablonului dvs. acum.

Dacă doriți să modificați culorile, adăugați un <style> etichetați cu niște CSS în themes/ghostwriter/layouts/partials/header.html.

De exemplu, faceți linkurile negre:

<style>
.site-title a, .button-square {
    background: black;
}
a {
    color: black;
}
</style>

Concentrați-vă pe conținut.

Eliminați fișierele existente și scrieți 2-3 postări pentru a începe.

Este prea ușor să te prinzi în a face lucrurile perfect așa cum vrei, dar important este conținutul.

Și cu cât site-ul dvs. este mai curat, cu atât mai bine pentru cititori.

Permiteți-mi acum să scriu puțin despre implementare.

Implementați site-ul Hugo pe Netlify

Vreau să prezint cum să implementez un site Hugo în 2 dintre serviciile care îmi plac cel mai mult: Netlify și Now.

În primul rând, voi crea un depozit GitHub pentru a găzdui site-ul.

Deschid GitHub Desktop, o aplicație pe care o folosesc în fiecare zi și care face parte din fluxul meu de lucru. Este cel mai simplu mod de a folosi Git.

Din meniul Fișier, am apăsat opțiunea „Depozit nou”:

Același ecran poate fi generat prin simpla glisare a myblog în aplicație.

Am dat myblog nume către depozit și a ales calea corectă pentru depozit.

Procesul face automat primul commit:

Acum putem face clic pe butonul „Publicați depozitul” pentru a împinge repo pe GitHub:

Puteți păstra repo-ul privat, desigur.

Odată ce repo este în GitHub:

ne putem muta la Netlify.

Din tabloul meu de bord Netlify am apăsat butonul „Site nou din Git”:

Am apăsat GitHub, am autorizat Netlify să acceseze depozitele mele private, apoi am ales repo-ul pe care tocmai l-am creat:

Netlify l-a identificat automat ca repo Hugo și a introdus automat comanda build:

Dând clic pe „Deploy site” începe procesul de implementare:

Pe un site real, aș configura un domeniu personalizat. Netlify are opțiunea de a cumpăra un domeniu prin intermediul lor și este un proces foarte (FOARTE) simplu. Îl recomand cu drag. Site-ul poate fi difuzat în doar câteva minute după achiziționarea domeniului.

O întâmplare .netlify.com subdomeniul este atașat site-ului, în acest caz pedantic-engelbart-500c9a.netlify.com, iar HTTPS este activat automat.

Prin urmare, putem vedea imediat site-ul în direct:

Acum, dacă încercați să editați ceva în versiunea dvs. locală, trebuie doar să împingeți modificările la GitHub, iar Netlify va actualiza automat site-ul. Îl puteți vedea construind site-ul în panoul „Prezentare generală” al site-ului:

Pentru a afla mai multe despre Netlify, vă recomand să verificați Tutorial Netlify.

Implementați site-ul Hugo pe Zeit Now

O altă platformă minunată pe care o puteți folosi pentru blogul dvs. Hugo este Zeit Now.

Odată ce vă înscrieți, de pe tabloul de bord apăsați pe Proiect nou buton.

Prima dată când implementați GitHub, trebuie să instalați mai întâi aplicația GitHub făcând clic pe „Instalați acum pentru GitHub”:

Acest lucru vă aduce la pagina GitHub pentru aplicație, unde o puteți autoriza pentru toate repos-urile dvs. sau doar pentru unele:

Odată ce ați revenit, faceți clic pe butonul „Proiect nou din GitHub”:

Selectați proiectul și faceți clic pe „Import”:

Între timp, accesați folderul principal al mysite și adăugați un package.json fișier cu acest conținut:

{
  "scripts": {
    "build": "hugo"
  }
}

Acest lucru spune acum cum să implementați site-ul.

Când reveniți la tabloul de bord, noua implementare ar trebui să înceapă în curând și veți vedea site-ul funcționând live:

Rețineți că în Acum aveți trei adrese URL pe care le puteți utiliza pentru a accesa site-ul:

• myblog.flaviocopes.now.sh
• myblog-alpha-swart.now.sh
• myblog-git-master.flaviocopes.now.sh

Puteți alege pe cel pe care îl preferați.

În plus, fiecare implementare are și propria adresă URL. În acest caz am avut myblog-h8xks5jhn.now.sh dar se schimbă cu fiecare implementare.

Și, bineînțeles, puteți adăuga și domeniul dvs. Zeit are un serviciu excelent pentru a achiziționa domeniul dvs. direct de la ei, disponibil la adresa https://zeit.co/domains.

Și dacă preferați să lucrați cu linia de comandă, now comanda vă permite să cumpărați și domenii de acolo.

Vă recomand cu tărie să verificați Tutorial Zeit Now pentru a afla mai multe despre această platformă.

Înfășurându-se

Sper că acest tutorial vă poate oferi puține îndrumări dacă intenționați să începeți un nou blog. Hugo este platforma mea preferată, dar nu este unică, desigur. Ghost (platforma care alimentează Routech) este de asemenea excelent, împreună cu WordPress, desigur, și Gatsby.

Alege-ți preferatul. În opinia mea, platforma nu contează la fel de mult ca și conținutul dvs. Așadar, alegeți una și începeți să scrieți!