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.
Conţinut
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!
#Cum #să #creați #primul #dvs #blog #Hugo #ghid #practic
Cum să creați primul dvs. blog Hugo: un ghid practic