Trecerea de la WordPress la Hugo

Când a fost lansat WordPress 5, am fost încântat să folosesc editorul Gutenberg pentru a crea blocuri personalizate, deoarece postările de pe blogul meu personal aveau câteva funcții pe care le puteam transforma într-un bloc, facilitând configurarea conținutului meu. A fost cu siguranță un lucru grozav, dar încă se simțea destul de umflat.

Cam în același timp, am început să citesc din ce în ce mai multe despre generatoarele statice de site și despre JAMstack (acest articol al lui Chris Ferdinandi m-a convins). Cu proiectele secundare personale, puteți să înlăturați o mare varietate de probleme, dar, ca profesionist, trebuie să vă asigurați că obțineți cea mai bună calitate posibilă. Performanța, securitatea și accesibilitatea devin primele lucruri la care să te gândești. Cu siguranță poți optimiza WordPress pentru a fi destul de rapid, dar mai rapid decât un site static pe un CDN care nu trebuie să interogheze baza de date și nici să-ți genereze pagina de fiecare dată? Nu asa de usor.

M-am gândit că aș putea pune acest lucru în practică cu un proiect personal de-al meu să învăț și apoi să pot folosi asta pentru proiecte profesionale și poate unii dintre voi ar dori să știe și cum. În acest articol, voi trece peste modul în care am făcut tranziția de la WordPress la un anumit generator de site-uri static numit Hugo.

Hugo este construit în Go, care este un limbaj destul de rapid și ușor de folosit odată ce te obișnuiești cu sintaxa, pe care o voi explica. Totul este compilat local, astfel încât să vă puteți previzualiza site-ul chiar pe computer. Proiectul va fi apoi salvat într-un depozit privat. În plus, vă voi explica cum să-l găzduiți pe Netlify și să vă salvați imaginile pe un Git LFS (Large File Storage). În cele din urmă, vom arunca o privire asupra modului în care putem configura un sistem de gestionare a conținutului pentru a adăuga postări și imagini (similar cu backend-ul WordPress) cu Netlify CMS.

Rețineți că toate acestea sunt absolut gratuite, ceea ce este destul de uimitor dacă mă întrebați pe mine (deși va trebui să plătiți suplimentar dacă vă folosiți toată spațiul de stocare LFS sau dacă traficul pe site este intens). De asemenea, scriu acest lucru din punctul de vedere al utilizatorului Bitbucket, rulând pe un Mac. Unii pași ar putea fi ușor diferiți, dar ar trebui să puteți urmați, indiferent de configurația pe care o utilizați.

Va trebui să vă simțiți oarecum confortabil cu HTML, CSS, JS, Git și terminalul de comandă. A avea câteva noțiuni cu limbaje de șabloane, cum ar fi Liquid, ar putea fi, de asemenea, util, dar vom revizui șabloanele lui Hugo pentru a începe. Cu toate acestea, voi oferi cât mai multe detalii!

Știu că sună mult și înainte să încep să mă uit la asta, a fost și pentru mine. Voi încerca să fac această tranziție cât mai lină posibil pentru tine, defalcând pașii. Nu este foarte greu să găsesc toate resursele, dar a fost un pic de presupuneri din partea mea, mergând de la o documentare la alta.

1. Exportarea conținutului din WordPress
2. Pregătirea designului blogului dvs
3. Configurarea unui nou depozit
4. Activarea Git LFS (Opțional)
5. Crearea site-ului pe Netlify
6. Pregătirea pentru Netlify Large Media (Opțional)
7. Configurarea Hugo pe computer
8. Crearea temei personalizate
9. Note despre sintaxa Hugo
10. Conținut și date
11. Implementarea pe Netlify
12. Configurarea unui domeniu personalizat
13. Editarea conținutului pe Netlify CMS

Notă : Dacă aveți probleme cu unele dintre acestea, vă rugăm să-mi spuneți în comentarii și voi încerca să vă ajut, dar vă rugăm să rețineți că acest lucru este destinat să fie aplicat unui blog simplu, static, care nu are o duzină de widget-uri sau comentarii (puteți seta asta mai târziu), și nu un site de companie sau un portofoliu personal. Fără îndoială ai putea, totuși, dar de dragul simplității, voi rămâne la un blog simplu, static.

Cerințe preliminare

Înainte de a face ceva, haideți să creăm un folder de proiect în care totul, de la instrumentele noastre până la depozitul nostru local, va locui. Îi voi numi „WP2Hugo” (simțiți-vă liber să-i spuneți cum doriți).

Acest tutorial va folosi câteva instrumente de linie de comandă, cum ar fi npm și Git. Dacă nu le aveți deja, instalați-le pe mașina dvs.:

• Instalați Git
• Instalați Node.js și npm (Node.js include npm)
• Instalați Homebrew (recomandat pentru utilizatorii macOS/Linux)

Cu acestea instalate, să începem!

1. Exportarea conținutului din WordPress

În primul rând, va trebui să vă exportăm conținutul din WordPress: postări, pagini și încărcări. Există câteva instrumente disponibile pe care le menționează Hugo, dar personal, doar unul dintre ele a funcționat: blog2md. Acesta funcționează prin rularea unui fișier JavaScript cu Node.js în terminalul de comandă. Preia fișierele XML exportate de WordPress și scoate fișiere Markdown cu structura corectă, conversia HTML în Markdown și adăugând ceea ce se numește Front Matter, care este o modalitate de a formata metadate la începutul fiecărui fișier.

Accesați administratorul WordPress și deschideți meniul Instrumente, submeniul Export. Puteți exporta ceea ce doriți de acolo. Mă voi referi la fișierul exportat ca YOUR-WP-EXPORT.xml .

Puteți selecta exact ce date doriți să exportați de pe blogul dvs. WordPress.

În interiorul folderului nostru WP2Hugo, vă recomand să creați un nou folder numit blog2md în care veți plasa fișierele din instrumentul blog2md, precum și exportul dvs. XML din WordPress ( YOUR-WP-EXPORT.xml ). De asemenea, creați un dosar nou numit out unde vor merge postările dvs. Markdown. Apoi, deschideți terminalul de comandă și navigați cu comanda cd în folderul „blog2md” nou creat (sau tastați cd cu un spațiu și trageți folderul în terminal).

Acum puteți rula următoarele comenzi pentru a obține postările dvs.:

 npm install node index.js w YOUR-WP-EXPORT.xml out

Căutați în directorul /WP2Hugo/blog2md/out pentru a verifica dacă toate postările dvs. (și paginile potențiale) sunt acolo. Dacă da, s-ar putea să observați că există ceva despre comentarii în documentație: aveam un blog fără comentarii, așa că nu aveam nevoie să fie efectuate, dar Hugo oferă mai multe opțiuni pentru comentarii. Dacă ați avut comentarii despre WordPress, le puteți exporta pentru reimplementare ulterioară cu un serviciu specializat precum Disqus.

Dacă sunteți suficient de familiarizat cu JS, puteți modifica fișierul index.js pentru a modifica modul în care vor apărea fișierele postări prin editarea funcției wordpressImport . Poate doriți să capturați imaginea prezentată, să eliminați permalinkul, să schimbați formatul datei sau să setați tipul (dacă aveți postări și pagini). Va trebui să-l adaptați nevoilor dvs., dar să știți că bucla ( posts.forEach(function(post){ ... }) ) parcurge toate postările de la export, astfel încât să puteți verifica conținutul XML al fiecare postare din acea buclă și personalizați-vă Front Matter.

În plus, dacă trebuie să actualizați adresele URL conținute în postările dvs. (în cazul meu, am vrut să fac linkurile de imagini relative în loc de absolute) sau formatarea datei, acesta este un moment bun pentru a face acest lucru, dar nu vă pierdeți somnul. . Multe editoare de text oferă editare în bloc, astfel încât să puteți conecta o expresie obișnuită și să efectuați modificările dorite în fișierele dvs. De asemenea, puteți rula scriptul blog2md de câte ori este necesar, deoarece va suprascrie orice fișiere existente anterior în folderul de ieșire.

După ce ați exportat fișierele Markdown, conținutul dvs. este gata. Următorul pas este să pregătiți tema WordPress pentru a funcționa în Hugo.

2. Pregătirea designului blogului

Blogul meu avea un aspect tipic cu un antet, o bară de navigare, conținut și bară laterală și un subsol - destul de simplu de configurat. În loc să copiez bucăți din tema mea WordPress, am reconstruit totul de la zero pentru a mă asigura că nu există stiluri de prisos sau marcaje inutile. Acesta este un moment bun pentru a implementa noi tehnici CSS ( pssst… Grid este destul de grozav! ) și pentru a configura o strategie de denumire mai consistentă (ceva ca regulile CSS Wizardry). Puteți face ceea ce doriți, dar amintiți-vă că încercăm să ne optimizăm blogul, așa că este bine să revizuiți ceea ce ați avut și să decideți dacă mai merită păstrat.

Începeți prin a vă împărți blogul în părți, astfel încât să puteți vedea clar ce merge unde. Acest lucru vă va ajuta să vă structurați marcajul și stilurile. Apropo, Hugo are capacitatea încorporată de a compila Sass în CSS, așa că nu ezitați să împărțiți aceste stiluri în fișiere mai mici cât de mult doriți!

Când spun simplu, vreau să spun foarte simplu.

Alternativ, puteți să ocoliți complet acest pas pentru moment și să vă stilați blogul pe măsură ce mergeți când site-ul dvs. Hugo este configurat. Am avut marcajul de bază și am preferat o abordare iterativă a stilurilor. Este, de asemenea, o modalitate bună de a vedea ce funcționează și ce nu.

3. Configurarea unui nou depozit

Acum, că acest lucru este în afara drumului, trebuie să înființăm un depozit. Voi presupune că veți dori să creați un nou depozit pentru aceasta, ceea ce va fi o oportunitate grozavă de a utiliza Git LFS (Large File System). Motivul pentru care vă sfătuiesc să faceți acest lucru acum este că implementarea Git LFS atunci când aveți deja sute de imagini nu este la fel de simplă. Am făcut-o, dar a fost o durere de cap pe care probabil că veți dori să o evitați. Acest lucru va oferi și alte beneficii pe viitor cu Netlify.

În timp ce voi face toate acestea prin Bitbucket și GUI-ul lor proprietar Git, Sourcetree, puteți face acest lucru cu GitHub și GitLab și propriile lor instrumente desktop. O poți face și direct în terminalul de comandă, dar îmi place să automatizez și să simplific procesul cât de mult pot, reducând riscul de a face greșeli prostești.

Când ați creat noul depozit pe platforma Git la alegere, creați un folder gol în dosarul local al proiectului (WP2Hugo), de exemplu hugorepo , apoi deschideți terminalul de comandă sau instrumentul GUI Git și inițializați depozitul local Git; apoi, conectați-l la depozitul de la distanță (de obicei puteți găsi comanda exactă pe care să o utilizați în depozitul de la distanță nou creat).

Aș recomanda să creați o dev de dezvoltare (sau stage ), astfel încât ramura dvs. principală să fie folosită strict pentru implementările de producție. De asemenea, va limita generarea de noi versiuni numai atunci când ați terminat cu o serie potențială de modificări. Crearea unei ramuri se poate face local sau pe pagina web de la distanță a depozitului.

GitHub facilitează crearea unei ramuri făcând clic pe comutatorul de ramuri și tastând un nou nume. Pe GitLab, trebuie să deschideți meniul derulant „Plus” pentru a accesa opțiunea. Bitbucket vă solicită să deschideți meniul „Plus” din stânga pentru a deschide meniul glisant și să faceți clic pe „Creați o ramură” în secțiunea „La treaba”.

4. Activarea Git LFS (Opțional)

Git Large File System este o caracteristică Git care vă permite să salvați fișiere mari într-un mod mai eficient, cum ar fi documente Photoshop, arhive ZIP și, în cazul nostru, imagini. Deoarece imaginile pot necesita versiunea, dar nu sunt exact cod, este logic să le stocați diferit de fișierele text obișnuite. Modul în care funcționează este prin stocarea imaginii pe un server la distanță, iar fișierul din depozitul dvs. va fi un fișier text care conține un pointer către acea resursă la distanță.

Din păcate, nu este o opțiune pe care faceți clic doar pentru a o activa. Trebuie să vă configurați depozitul pentru a activa LFS și acest lucru necesită ceva lucru la nivel local. Cu Git instalat, trebuie să instalați o extensie Git-LFS:

 git lfs install

Dacă, la fel ca mine, această comandă nu a funcționat pentru dvs., încercați alternativa Homebrew (pentru macOS sau Linux):

 brew install git-lfs

Odată ce ați terminat, va trebui să specificați ce fișiere să urmăriți în depozitul dvs. Voi găzdui toate imaginile pe care le-am încărcat în folderul /upload al WordPress într-un folder cu nume identic din configurația mea Hugo, cu excepția faptului că acest folder va fi într-un folder /static (care se va rezolva la rădăcină odată compilat). Decideți asupra structurii folderelor și urmăriți fișierele din interior:

 git lfs track "static/uploads/*"

Aceasta va urmări orice fișier din folderul /static/uploads . De asemenea, puteți utiliza următoarele:

 git lfs track "*.jpg"

Aceasta va urmări toate fișierele JPG din depozitul dvs. Puteți combina și potrivi numai pentru a urmări fișierele JPG într-un anumit folder, de exemplu.

Cu acest lucru, puteți trimite fișierele de configurare LFS în magazia dvs. și le puteți trimite în depozitul dvs. de la distanță. Data viitoare când comiteți local un fișier care se potrivește cu configurația de urmărire LFS, acesta va fi „convertit” într-o resursă LFS. Dacă lucrați la o ramură de dezvoltare, îmbinați acest commit în ramura dvs. principală.

Să aruncăm o privire acum la Netlify.

5. Crearea site-ului pe Netlify

În acest moment, depozitul dvs. este configurat, astfel încât să puteți continua și să creați un cont pe Netlify. Vă puteți conecta chiar și cu contul GitHub, GitLab sau Bitbucket, dacă doriți. Odată ajuns pe tabloul de bord, faceți clic pe butonul „Site nou din Git” din colțul din dreapta sus și creați-vă noul site Netly.

Notă : Puteți lăsa toate opțiunile la valorile implicite pentru moment.

Selectați furnizorul dvs. Git: aceasta va deschide o fereastră pop-up pentru a vă autentifica. Când se face acest lucru, fereastra se va închide și veți vedea o listă de depozite de pe furnizorul Git la care aveți acces. Selectați depozitul proaspăt creat și continuați. Vi se vor întreba câteva lucruri, dintre care majoritatea le puteți lăsa în mod implicit, deoarece toate opțiunile pot fi editate mai târziu.

Deocamdată, în Setările site-ului, faceți clic pe „Schimbați numele site-ului” și denumiți-vă site-ul cum doriți — voi merge cu chris-smashing-hugo-blog . Acum vom putea accesa site-ul prin chris-smashing-hugo-blog.netlify.com : o frumoasă pagină 404!

6. Pregătirea pentru Netlify Large Media (Opțional)

Dacă configurați Git LFS și plănuiți să utilizați Netlify, veți dori să urmați acești pași. Este puțin mai complicat, dar merită cu siguranță: vă va permite să setați șiruri de interogare pe adresele URL de imagini care vor fi transformate automat.

Să presupunem că aveți un link către portrait.jpg , care este o imagine de 900×1600 pixeli. Cu Netlify Large Media, puteți apela fișierul portrait.jpg?nf_resize=fit&w=420 , care îl va scala proporțional. Dacă definiți atât w , cât și h și setați nf_resize=smartcrop , se va redimensiona prin trunchiere pentru a se concentra asupra punctului de interes al imaginii (așa cum este determinat de un algoritm fantezist, alias magia creierului robot! ). Găsesc că aceasta este o modalitate excelentă de a avea miniaturi precum cele pe care le generează WordPress, fără a avea nevoie de mai multe fișiere pentru o imagine din depozitul meu.

Dacă acest lucru vă sună atrăgător, să-l configuram!

Primul pas este instalarea interfeței de linie de comandă (CLI) a Netlify prin npm:

 npm install netlify-cli -g

Dacă a funcționat, rularea comenzii netlify ar trebui să aibă ca rezultat informații despre instrument.

Apoi, va trebui să vă asigurați că vă aflați în folderul de depozit local (pe care l-am numit „hugorepo” mai devreme) și să executați:

 netlify login

Autorizați jetonul. În continuare, va trebui să instalăm pluginul Netlify Large Media. Alerga:

 netlify plugins:install netlify-lm-plugin netlify lm:install

Ar trebui să fie afișată o linie de comandă la sfârșitul mesajului rezultat pe care trebuie să o copiați (care ar trebui să arate ca /Users/YOURNAME/.netlify/helper/path.bash.inc pe Mac) - rulați-o. Rețineți că Keychain vă poate cere parola de administrator a mașinii dvs. pe macOS.

Următorul pas este să conectați Netlify:

 netlify link

Puteți furniza numele site-ului dvs. aici (am furnizat numele chris-smashing-hugo-blog pe care l-am dat mai devreme). Cu acest lucru, trebuie doar să configurați funcția Large Media executând următoarele:

 netlify lm:setup

Trimiteți aceste noi modificări în depozitul dvs. local și trimiteți-le în ramura de dezvoltare la distanță. Am avut câteva erori cu Sourcetree și Keychain de-a lungul liniilor git "credential-netlify" is not a git command . Dacă acesta este cazul dvs., încercați să apăsați manual cu aceste comenzi:

 git add -A git commit -m "Set up Netlify Large media" git push

Dacă acest lucru nu a funcționat, ar putea fi necesar să instalați Netlify credential Helper. Iată cum să o faci cu Homebrew:

 brew tap netlify/git-credential-netlify brew install git-credential-netlify

Încercați să vă împingeți până acum (fie cu GUI, fie cu terminalul de comandă): ar trebui să funcționeze!

Notă : Dacă vă schimbați parola Netlify, rulați netlify logout și netlify login din nou.

Ați putea întreba: „Toate acestea și încă nu am inițializat construcția noastră Hugo?” Da, știu, a durat ceva timp, dar toate pregătirile pentru tranziție sunt făcute. Acum ne putem configura blogul Hugo!

7. Configurarea Hugo pe computer

Mai întâi va trebui să instalați Hugo pe computer cu oricare dintre opțiunile oferite. Voi folosi Homebrew, dar utilizatorii de Windows pot folosi Scoop sau Chocolatey sau pot descărca direct un pachet.

 brew install hugo

Apoi, va trebui să creați un nou site Hugo, dar nu-i va plăcea să îl setați într-un dosar care nu este gol. Prima opțiune: îl puteți crea într-un folder nou și puteți muta conținutul acestuia în folderul de depozit local:

 hugo new site your_temporary_folder

A doua opțiune: îl puteți forța să se instaleze în depozitul dvs. local cu un steag, asigurați-vă doar că îl rulați în folderul potrivit:

 hugo new site . --force

Acum aveți un site Hugo, pe care îl puteți porni cu această comandă:

 hugo server

Veți obține o previzualizare locală pe localhost . Din păcate, nu aveți conținut și nicio temă proprie. Nu vă faceți griji, o vom configura foarte curând!

Să aruncăm mai întâi o privire la fișierul de configurare ( config.toml în cazul meu): să setăm numele blogului și adresa URL de bază (aceasta trebuie să se potrivească cu adresa URL de pe tabloul de bord Netly):

 title = "Chris' Smashing Hugo Blog" baseURL = "https://chris-smashing-hugo-blog.netlify.com"

Acest link va fi suprascris în timp ce dezvoltați local, așa că nu ar trebui să întâlniți erori 404.

Să-i dăm lui Hugo articolele noastre exportate în format Markdown. Ar trebui să se așeze în folderul /WP2Hugo/blog2md/out de la primul pas. În folderul Hugo (alias directorul de depozit local), accesați folderul de content și creați un subdosar numit posts . Puneți fișierele Markdown acolo și apoi să setăm o temă.

8. Crearea temei personalizate

Pentru acest pas, recomand să descărcați Saito boilerplate, care este o temă cu toate părțile de care veți avea nevoie pentru a începe (și fără stiluri) - un punct de plecare foarte util. Puteți, desigur, să vă uitați la această colecție de teme gata făcute pentru Hugo dacă doriți să săriți peste această parte a procesului. Totul depinde de tine!

Din folderul de depozit local, clonează tema în themes/saito :

 git submodule add https://github.com/hakuoku/saito-boilerplate.git themes/saito

Puteți redenumi acest folder în orice doriți, cum ar fi cool-theme . Va trebui să spuneți configurației dvs. Hugo ce temă doriți să utilizați editând fișierul config.toml/yaml/json . Editați valoarea temei la saito , sau cool-theme , sau oricare ar fi numele folderului temei dvs. Previzualizarea ar trebui să arate acum titlul blogului împreună cu o linie de drepturi de autor. Este un început, nu?

Deschideți fișierul aspect/partials/home.html al temei și editați-l pentru a vă afișa conținutul, limitându-vă la primele cinci elemente care sunt de tip posts (în interiorul content/posts/ dosarului), cu range , first și where :

 <div class="container"> {{ range first 5 (where .Paginator.Pages "Type" "posts") }} <article class="post post--{{ .Params.class }}"> <h2 class="post__title">{{ .Title }}</h2> <section class="post__content"> {{ .Content }} </section> </article> {{ end }} </div>

Conținutul tău este acum vizibil, în cel mai elementar mod. Este timpul să-l faci al tău - haideți să ne scufundăm!

Template cu Hugo

Puteți citi mai întâi Introducerea la șablonul Hugo, dacă doriți, dar voi încerca să trec peste câteva elemente esențiale care vă vor ajuta să înțelegeți elementele de bază.

Toate operațiunile din Hugo sunt definite în interiorul delimitatorilor: acolade duble (de ex. {{ .Title }} ), care ar trebui să vă pară familiare dacă ați mai făcut un pic de șabloane înainte. Dacă nu ați făcut-o, gândiți-vă la aceasta ca la o modalitate de a executa operațiuni sau de a injecta valori într-un anumit punct al marcajului dvs. Pentru blocuri, acestea se termină cu eticheta {{ end }} , pentru toate operațiunile în afară de shortcodes.

Temele au un folder de layout care conține piesele de aspect. Dosarul _default va fi punctul de plecare al lui Hugo, baseof.html fiind ( ai ghicit! ) baza aspectului tău. Va apela fiecare componentă, numită „parțiale” (mai multe despre aceasta pe documentația lui Hugo despre șablon parțial), similar cu modul în care ați folosi include în PHP, pe care este posibil să le fi văzut deja în tema dvs. WordPress. Parțialele pot apela alte părți parțiale - doar nu faceți o buclă infinită.

Puteți apela un parțial cu {{ partial "file.html" . }} {{ partial "file.html" . }} sintaxă. Secțiunea partial este destul de simplă, dar celelalte două ar putea avea nevoie de explicații. S-ar putea să vă așteptați să trebuie să scrieți partials/file.html , dar din moment ce toate părțile trebuie să fie în folderul „partials”, Hugo poate găsi acest folder foarte bine. Desigur, puteți crea subdosare în folderul „parțial” dacă aveți nevoie de mai multă organizare.

Poate că ați observat un punct rătăcit: acesta este contextul pe care îl treceți la parțial. Dacă ai avea un meniu parțial și o listă de link-uri și etichete, ai putea trece acea listă în parțial, astfel încât să poată accesa doar acea listă și nimic altceva. Voi vorbi mai multe despre acest punct evaziv în secțiunea următoare.

Fișierul dvs. baseof.html este un shell care apelează toate diferitele partiale necesare pentru a reda aspectul blogului dvs. Ar trebui să aibă HTML minim și multe partiale:

 <!DOCTYPE html> <html lang="{{ .Site.LanguageCode }}"> <head> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title> {{ partial "head.html" . }} </head> <body> {{ partial "header.html" . }} {{ partial "nav.html" . }} <main> {{ block "main" . }}{{ end }} </main> <aside> {{ partial "sidebar.html" . }} </aside> {{ partial "footer.html" . }} </body> </html>

Blocul {{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }} linia este diferită deoarece este un bloc care este definit cu un șablon bazat pe conținutul paginii curente (pagină de pornire, pagină cu o singură postare etc.) cu {{ define "main" }} .

Foi de stil

În tema dvs., creați un folder numit assets în care vom plasa un folder css . Acesta va conține fișierele noastre SCSS sau un fișier CSS vechi de încredere. Acum, ar trebui să existe un fișier css.html în folderul partials (care este apelat de head.html ). Pentru a converti Sass/SCSS în CSS și pentru a minimiza foaia de stil, am folosi această serie de funcții (folosind sintaxa Hugo Pipes în loc să împachetăm funcțiile una pe cealaltă):

 {{ $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}

Ca bonus – deoarece m-am chinuit să găsesc un răspuns clar – dacă doriți să utilizați Autoprefixer, Hugo implementează și PostCSS. Puteți adăuga o funcție minify conductă suplimentară între toCSS și reducere pe prima linie, astfel:

 {{ $style := resources.Get "css/style.scss" | toCSS | postCSS | minify | fingerprint }}

Creați un fișier „postcss.config.js” la rădăcina blogului dvs. Hugo și transmiteți opțiunile, cum ar fi:

 module.exports = { plugins: { autoprefixer: { browsers: [ "> 1%", "last 2 versions" ] } }, }

Și prest! De la Sass la CSS prefixat, minimizat. Funcția de conductă „amprentă” este de a vă asigura că numele fișierului este unic, cum ar fi style.c66e6096bdc14c2d3a737cff95b85ad89c99b9d1.min.css . Dacă schimbați foaia de stil, amprenta se schimbă, astfel încât numele fișierului este diferit și, astfel, obțineți o soluție eficientă de distrugere a memoriei cache.

9. Note despre sintaxa Hugo

Vreau să mă asigur că înțelegeți „punctul”, care este modul în care Hugo descoperă variabilele (sau, în propriile mele cuvinte, oferă o referință contextuală) pe care le veți folosi în șabloanele dvs.

Punctul și Scoping

Punctul este ca o variabilă de nivel superior pe care o puteți utiliza în orice șablon sau cod scurt, dar valoarea sa este determinată de contextul său. Valoarea punctului într-un șablon de nivel superior precum baseof.html este diferită de valoarea din interiorul blocurilor de buclă sau with blocuri.

Să presupunem că acesta se află în șablonul nostru din partea noastră head.html :

 {{ with .Site.Title }} {{ Sfârșit }}

Chiar dacă rulăm acest lucru în domeniul principal, valoarea Dot se modifică în funcție de context, care este .Site.Title în acest caz. Deci, pentru a imprima valoarea, trebuie doar să scrieți . în loc să tastezi din nou numele variabilei. Acest lucru m-a derutat la început, dar te obișnuiești foarte repede și ajută la reducerea redundanței, deoarece numiți variabila o singură dată. Dacă ceva nu funcționează, de obicei este pentru că încercați să apelați o variabilă de nivel superior în interiorul unui bloc cu scop.

Deci, cum utilizați domeniul de aplicare de nivel superior în interiorul unui bloc cu scop? Ei bine, să presupunem că doriți să verificați o valoare, dar folosiți alta. Puteți folosi $ , care va fi întotdeauna domeniul de aplicare de nivel superior:

 {{ with .Site.Params.InfoEnglish }}{{ $.Site.Params.DescriptionEnglish }}{{ end }}

În starea noastră, domeniul de aplicare este .Site.Params.InfoEnglish , dar putem accesa în continuare valori în afara acestuia cu $ , unde utilizarea intuitivă .Site.Params.DescriptionEnglish nu ar funcționa deoarece ar încerca să rezolvăm .Site.Params.InfoEnglish.Site.Params.DescriptionEnglish , aruncând o eroare.

Variabile personalizate

Puteți aloca variabile utilizând următoarea sintaxă:

 {{ $customvar := "custom value" }}

Numele variabilei trebuie să înceapă cu $ și operatorul de atribuire trebuie să fie := dacă este prima dată când este atribuit, = în caz contrar așa:

 {{ $customvar = "updated value" }}

Problema cu care s-ar putea să întâmpinați este că acest lucru nu va apărea în afara domeniului de aplicare, ceea ce mă duce la următorul punct.

Zgârietură

Funcționalitatea Scratch vă permite să atribuiți valori care sunt disponibile în toate contextele. Să presupunem că aveți o listă de filme într-un fișier movies.json :

 [ { "name": "The Room", "rating": 4 }, { "name": "Back to the Future", "rating": 10 }, { "name": "The Artist", "rating": 7 } ]

Acum, doriți să repetați conținutul fișierului și să îl stocați pe cel preferat pentru a-l folosi mai târziu. Aici intervine Scratch:

 {{ .Scratch.Set "favouriteMovie" "None" }}{{ /* Optional, just to get you to see the difference syntax based on the scope */ }} {{ range .Site.Data.movies }} {{ if ge .rating 10 }} {{ /* We must use .Scratch prefixed with a $, because the scope is .Site.Data.movies, at the current index of the loop */ }} {{ $.Scratch.Set "favouriteMovie" .name }} {{ end }} {{ end }} [...] My favourite movie is {{ .Scratch.Get "favouriteMovie" }} <!-- Expected output => My favourite movie is Back to the Future -->

Cu Scratch, putem extrage o valoare din interiorul buclei și o putem folosi oriunde. Pe măsură ce tema ta devine din ce în ce mai complexă, probabil că te vei trezi că ai ajuns la Scratch.

Notă : Acesta este doar un exemplu, deoarece această buclă poate fi optimizată pentru a scoate acest rezultat fără Scratch, dar acest lucru ar trebui să vă ofere o mai bună înțelegere a modului în care funcționează.

Condiționale

Sintaxa pentru condiționale este puțin diferită de ceea ce v-ați aștepta - din perspectiva JavaScript sau PHP. Există, în esență, funcții care iau două argumente (parantezele opționale dacă apelați direct valorile):

 {{ if eq .Site.LanguageCode "en-us" }}Welcome!{{ end }}

Există mai multe dintre aceste funcții:

• eq verifică egalitatea
• ne verifică inegalitatea
• gt verifica pentru mai mare decât
• ge verifica pentru mare sau egal cu
• lt pentru mai puțin de
• le verifică pentru mai puțin sau egal cu

Notă : Puteți afla totul despre funcțiile oferite de Hugo în Referința rapidă a funcțiilor Hugo.

Spatiu alb

Dacă sunteți la fel de pretențios în ceea ce privește rezultatul ca mine, este posibil să observați câteva linii goale nedorite. Acest lucru se datorează faptului că Hugo vă va analiza marcajul așa cum este, lăsând linii goale în jurul condițiilor care nu au fost îndeplinite, de exemplu.

Să presupunem că avem acest parțial ipotetic:

 {{ if eq .Site.LanguageCode "en-us" }} <p>Welcome to my blog!</p> {{ end }} <img src="/uploads/portrait.jpg" alt="Blog Author">

Dacă codul de limbă al site-ului nu este en-us , aceasta va fi rezultatul HTML (rețineți cele trei linii goale înainte de eticheta de imagine):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

Hugo oferă o sintaxă pentru a aborda acest lucru cu o cratimă lângă acoladele din interiorul delimitatorului. {{- va tăia spațiul alb înaintea acoladelor și -}} va tăia spațiul alb după acolade. Puteți folosi oricare sau ambele în același timp, dar asigurați-vă că există un spațiu între cratimă și operația în interiorul delimitatorului.

Ca atare, dacă șablonul dvs. conține următoarele:

 {{- if eq .Site.LanguageCode "en-us" -}} <p>Welcome to my blog!</p> {{- end -}} <img src="/uploads/portrait.jpg" alt="Blog Author">

… atunci marcajul va avea ca rezultat (fără linii goale):

 <img src="/uploads/portrait.jpg" alt="Blog Author">

Acest lucru poate fi util pentru alte situații, cum ar fi elemente cu display: inline-block care nu ar trebui să aibă spațiu alb între ele. În schimb, dacă doriți să vă asigurați că fiecare element se află pe propria linie în marcaj (de exemplu, într-o buclă {{ range }} ), va trebui să vă plasați cu atenție cratimele pentru a evita tăierea „lacomă” a spațiilor albe.

Exemplul de mai sus va afișa următoarele dacă codul de limbă al site-ului se potrivește cu „ en-us ” (nu mai există întreruperi de linie între etichetele p și img ):

 <p>Welcome to my blog!</p><img src="/uploads/portrait.jpg" alt="Blog Author">

10. Conținut și date

Conținutul dvs. este stocat ca fișiere Markdown, dar puteți utiliza și HTML. Hugo îl va reda corect atunci când vă construiește site-ul.

Pagina de pornire va apela aspectul _default/list.html , care ar putea arăta astfel:

 {{ define "main" }} {{ partial "list.html" . }} {{ end }}

Blocul principal apelează list.html parțial cu contextul . , alias nivelul superior. list.html poate arăta astfel:

 {{ define "main" }} <ol class="articles"> {{ range .Paginator.Pages }} <li> <article> <a href="{{ .URL }}"> <h2>{{ .Title }}</h2> <img src="{{ .Params.featuredimage }}" alt=""> <time datetime="{{ .Date.Format "2006-01-02" }}"> {{ .Date.Format "January 2 2006" }} </time> </a> </article> </li> {{ end }} </ol> {{ partial "pagination.html" . }} {{ end }}

Acum avem o listă de bază a articolelor noastre, pe care le puteți modela după cum doriți! Numărul de articole pe pagină este definit în fișierul de configurare, cu paginate = 5 (în TOML).

S-ar putea să fii complet confuz, așa cum am fost și eu de formatarea datei în Hugo. De fiecare dată când unitatea este mapată la un număr (prima lună, a doua zi, a treia oră etc.) a avut mult mai mult sens pentru mine odată ce am văzut explicația vizuală de mai jos pe care o oferă documentația în limba Go - ceea ce este cam ciudat, dar cam deștept, de asemenea!

 Jan 2 15:04:05 2006 MST => 1 2 3 4 5 6 -7

Acum tot ce mai rămâne de făcut este să-ți afișezi postarea pe o singură pagină. Puteți edita post.html pentru a personaliza aspectul articolului dvs.:

 <article> <header> <h1>{{ .Title }}</h1> <p> Posted on <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006. 1. 2" }}</time> </p> </header> <section> {{ .Content }} </section> </article>

Și așa îți afișezi conținutul!

Dacă doriți să personalizați adresa URL, actualizați fișierul de configurare adăugând o opțiune [permalinks] (TOML), care, în acest caz, va face URL-urile să arate ca my-blog.com/post-slug/ :

 [permalinks] posts = ":filename/"

Dacă doriți să generați un flux RSS al conținutului dvs. (deoarece RSS este minunat), adăugați următoarele în fișierul de configurare a site-ului dvs. (șablonul implicit Saito va afișa etichetele corespunzătoare în head.html dacă sunt detectate aceste opțiuni):

 rssLimit = 10 [outputFormats] [outputFormats.RSS] mediatype = "application/rss" baseName = "feed"

Dar dacă ai avea un fel de conținut în afara unei postări? Aici intervin șabloanele de date: puteți crea fișiere JSON și puteți extrage datele acestora pentru a vă crea meniul sau un element în bara laterală. YAML și TOML sunt, de asemenea, opțiuni, dar mai puțin lizibile cu date complexe (de exemplu, obiecte imbricate). Puteți, desigur, să setați acest lucru în fișierul de configurare al site-ului dvs., dar este — pentru mine — puțin mai ușor de navigat și mai puțin îngăduitor.

Să creăm o listă de „site-uri cool” pe care poate doriți să le afișați în bara laterală - cu un link și o etichetă pentru fiecare site ca o matrice în JSON:

 { "coolsites": [ { "link": "https://smashingmagazine.com", "label": "Smashing Magazine" }, { "link": "https://gohugo.io/", "label": "Hugo" }, { "link": "https://netlify.com", "label": "Netlify" } ] }

Puteți salva acest fișier în rădăcina depozitului sau rădăcina temei, într-un folder de data , cum ar fi /data/coolsites.json . Apoi, în partea parțială sidebar.html , puteți repeta peste el cu range folosind .Site.Data.coolsites :

 <h3>Cool Sites:</h3> <ul> {{ range .Site.Data.coolsites.coolsites }} <li><a href="{{ .link }}">{{ .label }}</a></li> {{ end }} </ul>

Acest lucru este foarte util pentru orice tip de date personalizate pe care doriți să le repetați. L-am folosit pentru a crea o listă de fonturi Google pentru tema mea, în ce categorii pot fi postările, autori (cu biografie, avatar și link pentru pagina de pornire), ce meniuri să afișez și în ce ordine. Puteți face cu adevărat multe cu asta și este destul de simplu.

Un ultim gând despre date și altele: orice ai pus în folderul tău Hugo /static va fi disponibil pe rădăcina ( / ) pe versiunea live. Același lucru este valabil și pentru folderul cu teme.

11. Implementarea pe Netlify

Deci ai terminat, sau poate vrei doar să vezi ce fel de magie operează Netlify? Mi se pare bine, atâta timp cât serverul tău local Hugo nu returnează o eroare.

Confirmați modificările și trimiteți-le în ramura dvs. de dezvoltare la distanță ( dev ). În continuare, accesați Netlify și accesați setările site-ului dvs. Veți vedea o opțiune pentru „Construiți și implementați”. Va trebui să schimbăm câteva lucruri aici.

1. Mai întâi, în secțiunea „Setări de compilare”, asigurați-vă că „Comandă de compilare” este setată la hugo și că „Publicați directorul” este setat la public (valoarea implicită pe care se recomandă să o păstrați în fișierul de configurare Hugo);
2. Apoi, în secțiunea „Deploy contexts”, setați „Ramură de producție” la ramura dvs. principală din depozit. De asemenea, vă sugerez ca „Implementări de sucursală” să fie setat la „Implementați numai ramura de producție”;
3. În cele din urmă, în secțiunea „Variabile de mediu”, editați variabilele și faceți clic pe „Variabilă nouă”. Vom seta mediul Hugo la 0.53 cu următoarea pereche: setați cheia la HUGO_VERSION și valoarea la 0.53 .

Acum mergeți la depozitul dvs. de la distanță și îmbinați ramura de dezvoltare în ramura dvs. principală: acesta va fi cârligul care va implementa blogul dvs. actualizat (acesta poate fi personalizat, dar implicit este rezonabil pentru mine).

Înapoi la tabloul de bord Netlify, „Implementări de producție” a site-ului dvs. ar trebui să aibă o activitate nouă. Dacă totul a mers corect, aceasta ar trebui să proceseze și să se rezolve într-o etichetă „Publicat”. Făcând clic pe elementul de implementare, se va deschide o prezentare generală cu un jurnal al operațiunilor. Sus, veți vedea „Previzualizare implementare”. Continuă, dă clic pe el - o meriți. E viu!

12. Configurarea unui domeniu personalizat

A avea adresa URL ca my-super-site.netlify.com nu este pe gustul tău și deții deja my-super-site.com ? Înțeleg. Să schimbăm asta!

Mergeți la registratorul de domeniu și accesați setările DNS ale domeniului dvs. Aici, va trebui să creați o nouă intrare: puteți fie să setați o înregistrare ALIAS/CNAME care să trimită către my-super-site.netlify.com , fie să setați o înregistrare A care să direcționeze domeniul dvs. către echilibrul de încărcare Netlify, care este 104.198.14.52 la momentul redactării acestui articol.

Puteți găsi cele mai recente informații în documentația Netlify privind domeniile personalizate. IP-ul de echilibrare a încărcăturii va fi în secțiunea de setări DNS, sub „Configurare manuală DNS pentru domenii personalizate root și www”.

Când ați terminat, mergeți la tabloul de bord al site-ului dvs. pe Netlify și faceți clic pe „Setări domeniului”, unde veți vedea „Adăugați un domeniu personalizat”. Introduceți numele de domeniu pentru a-l verifica.

De asemenea, vă puteți gestiona domeniile prin intermediul tabloului de bord din fila Domenii. Interfața pare mai puțin confuză pe această pagină, dar poate vă va ajuta să înțelegeți mai mult setările dvs. DNS așa cum a făcut-o pentru mine.

Notă : Netlify se poate ocupa și de totul pentru tine dacă vrei să cumperi un domeniu prin intermediul lor. Este mai ușor, dar este un cost suplimentar.

După ce v-ați configurat domeniul personalizat, în „Setări domeniului”, derulați în jos la secțiunea „HTTPS” și activați certificatul SSL/TLS. Poate dura câteva minute, dar vă va oferi un certificat gratuit: domeniul dvs. rulează acum pe HTTPS.

13. Editarea conținutului pe Netlify CMS

Dacă doriți să vă editați articolele, să încărcați imagini și să schimbați setările blogului, așa cum ați face pe interfața de back-end a WordPress, puteți utiliza Netlify CMS, care are un tutorial destul de bun disponibil. Este un singur fișier care se va ocupa de totul pentru tine (și este independent de generator: va funcționa cu Jekyll, Eleventy și așa mai departe).

Trebuie doar să încărcați două fișiere într-un folder:

• CMS (un singur fișier HTML);
• un fișier de configurare (un fișier YAML).

Acesta din urmă va deține toate setările site-ului dvs.

Accesați folderul /static al rădăcinii dvs. Hugo și creați un dosar nou pe care îl veți accesa prin my-super-site.com/FOLDER_NAME (voi apela admin meu). În acest folder de admin , creați un fișier index.html prin copierea marcajului furnizat de Netlify CMS:

 <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <!-- Include the script that builds the page and powers Netlify CMS --> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> </body> </html>

Celălalt fișier pe care va trebui să îl creați este fișierul de configurare: config.yml . Vă va permite să definiți setările site-ului dvs. (nume, URL, etc.), astfel încât să puteți configura ceea ce ar trebui să conțină prima pagină a postărilor dvs., precum și modul în care fișierele dvs. de date (dacă există) ar trebui să fie editabile. Este puțin mai complex de configurat, dar asta nu înseamnă că nu este ușor.

Dacă utilizați GitHub sau GitLab, porniți fișierul config.yml cu:

 backend: name: git-gateway branch: dev # Branch to update (optional; defaults to master)

Dacă utilizați Bitbucket, este puțin diferit:

 backend: name: bitbucket repo: your-username/your-hugorepo branch: dev # Branch to update (optional; defaults to master)

Apoi, pentru încărcările noastre, va trebui să spunem CMS-ului unde să le stocheze:

 media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads

Când creați o nouă postare, CMS-ul va genera slug-ul pentru numele fișierului pe care îl puteți personaliza cu trei opțiuni:

slug: encoding: "ascii" # You can also use "unicode" for non-Latin clean_accents: true # Removes diacritics from characters like e or a sanitize_replacement: "-" # Replace unsafe characters with this string

În cele din urmă, va trebui să definiți modul în care sunt structurate datele din postările dvs. De asemenea, voi defini modul în care este structurat fișierul de date coolsites - doar în cazul în care vreau să adaug un alt site la listă. Acestea sunt setate cu obiectul collections , care va fi cu siguranță cel mai pronunțat, împreună cu o mână frumoasă de opțiuni despre care puteți citi mai multe aici.

 collections: - name: "articles" # Used in routes, eg, /admin/collections/blog label: "Articles" # Used in the Netlify CMS user interface folder: "content/posts" # The path to the folder where the posts are stored, usually content/posts for Hugo create: true # Allow users to create new documents in this collection slug: "{{slug}}" # Filename template, eg, post-title.md fields: # The fields for each document, usually in front matter - {label: "Title", name: "title", widget: "string", required: true} - {label: "Draft", name: "draft", widget: "boolean", default: true } - {label: "Type", name: "type", widget: "hidden", default: "post" } - {label: "Publish Date", name: "date", widget: "date", format: "YYYY-MM-DD"} - {label: "Featured Image", name: "featuredimage", widget: "image"} - {label: "Author", name: "author", widget: "string"} - {label: "Body", name: "body", widget: "markdown"} - name: 'coolsites' label: 'Cool Sites' file: 'data/coolsites.json' description: 'Website to check out' fields: - name: coolsites label: Sites label_singular: 'Site' widget: list fields: - { label: 'Site URL', name: 'link', widget: 'string', hint: 'https://…' } - { label: 'Site Name', name: 'label', widget: 'string' }

Notă : Puteți citi mai multe despre cum să configurați câmpurile individuale în documentația Netlify CMS Widgets, care trece peste fiecare tip de widget și cum să le utilizați - util în special pentru formatele de dată.

Autentificare

Ultimul lucru pe care trebuie să-l facem este să ne asigurăm că numai utilizatorii autorizați pot accesa backend-ul! Utilizarea autentificării furnizorului dvs. Git este o modalitate ușoară de a face acest lucru.

Mergeți pe site-ul dvs. Netly și faceți clic pe fila „Setări”. Apoi accesați „Controlul accesului”, care este ultimul link din meniul din partea stângă. Aici, puteți configura OAuth să ruleze prin GitHub, GitLab sau Bitbucket, furnizând o cheie și o valoare secretă definite pentru contul dvs. de utilizator (nu în depozit). Veți dori să utilizați același furnizor Git ca și cel în care este salvat depozitul dvs.

GitHub

Accesați pagina „Setări” de pe GitHub (faceți clic pe avatarul dvs. pentru a dezvălui meniul) și accesați „Setări pentru dezvoltatori”. Faceți clic pe „Înregistrați o nouă aplicație” și furnizați valorile necesare:

• un nume, cum ar fi „Netlify CMS pentru super blogul meu”;
• o adresă URL a paginii de pornire, linkul către site-ul dvs. Netly;
• o descriere, dacă ai chef;
• adresa URL de apel invers al aplicației, care trebuie să fie „ https://api.netlify.com/auth/done ”.

Salvați și veți vedea ID-ul dvs. de client și Secretul clientului. Furnizați-le controlului accesului Netlify.

GitLab

Faceți clic pe avatarul dvs. pentru a accesa pagina Setări și faceți clic pe „Aplicații” în meniul „Setări utilizator” din stânga. Veți vedea un formular pentru a adăuga o nouă aplicație. Furnizati urmatoarele informatii:

• un nume, cum ar fi „Netlify CMS pentru super blogul meu”;
• un URI de redirecționare, care trebuie să fie „ https://api.netlify.com/auth/done ”;
• domeniile care ar trebui verificate sunt:
  • api
  • read_user
  • read_repository
  • write_repository
  • read_registry

Salvarea aplicației vă va oferi ID-ul și Secretul aplicației, pe care acum le puteți introduce în Controlul accesului Netlify.

Bitbucket

Mergeți la setările contului dvs. de utilizator (faceți clic pe avatar, apoi pe „Setări Bitbucket”). Sub „Gestionarea accesului”, faceți clic pe „OAth”. În secțiunea „Consumatori OAuth”, faceți clic pe „Adăugați un consumator”. Puteți lăsa majoritatea lucrurilor la valorile implicite, cu excepția acestora:

• un nume, cum ar fi „Netlify CMS pentru super blogul meu”;
• o adresă URL de apel invers, care trebuie să fie „ https://api.netlify.com/auth/done ”;
• permisiunile care ar trebui verificate sunt:
  • Cont: e-mail, citire, scriere
  • Arhive: Citire, Scriere, Admin
  • Cereri de tragere: Citiți, scrieți
  • Webhooks: Citiți și scrieți

După salvare, vă puteți accesa cheia și secretul, pe care apoi le puteți furniza înapoi în Controlul accesului Netlify.

După ce furnizați jetoanele, accesați Netlify și găsiți Setările site-ului. Mergeți la „Identitate” și activați funcția. Acum puteți adăuga un furnizor extern: selectați furnizorul dvs. Git și faceți clic pe „Activați”.

În cazul în care aveți nevoie de detalii suplimentare, Netlify CMS are un ghid de autentificare pe care îl puteți citi.

Acum puteți accesa backend-ul site-ului dvs. Netlify și puteți edita conținut. Fiecare modificare este un commit pe depozitul dvs., în ramura specificată în fișierul dvs. de configurare. Dacă v-ați păstrat ramura main ca țintă pentru Netlify CMS, de fiecare dată când salvați, va rula o nouă versiune. Mai convenabil, dar nu la fel de curat cu „stări intermediare”.

Salvarea acestuia pe o dev de dezvoltare vă permite să aveți un control mai fin asupra momentului în care doriți să rulați o nouă versiune. Acest lucru este important în special dacă blogul dvs. are mult conținut și necesită un timp mai lung de construire. Oricum va funcționa; este doar o chestiune de cum vrei să-ți conduci blogul .

De asemenea, rețineți că Git LFS este ceva pe care l-ați instalat local, așa că imaginile încărcate prin Netlify CMS vor fi „normale”. Dacă trageți sucursala la distanță local, imaginile ar trebui convertite în LFS, pe care apoi îl puteți trimite și împinge în ramura dvs. la distanță. De asemenea, Netlify CMS nu acceptă în prezent LFS, așa că imaginea nu va fi afișată în CMS, dar vor apărea în versiunea finală.

Lectură recomandată : Generatoare statice de site revizuite: Jekyll, Middleman, Roots, Hugo

Concluzie

Ce plimbare! În acest tutorial, ați învățat cum să exportați postarea WordPress în fișiere Markdown, să creați un nou depozit, să configurați Git LFS, să găzduiți un site pe Netlify, să generați un site Hugo, să vă creați propria temă și să editați conținutul cu Netlify CMS . Nu prea rau!

Ce urmeaza? Ei bine, puteți experimenta configurația dvs. Hugo și puteți citi mai multe despre diferitele instrumente oferite de Hugo - sunt multe pe care nu le-am acoperit de dragul conciziei.

Explora! A se distra! Blog!

Resurse suplimentare

• Documentație Hugo
  • Instalare
  • Pornire rapidă
  • Configurare
  • Modelare
  • Taxonomii
  • Shortcodes
  • Hugo pe Netlify
• Documentația Netlify
  • Domenii personalizate
  • DNS gestionat
  • netlify.toml Deploy Scripts
• Documentația CMS Netlify
  • Widgeturi
• Git LFS