Asigurați-Crearea de site-uri distractiv din nou cu Hugo

Site-urile statice sunt populare din mai multe motive. Evitarea soluțiilor de overkill și păstrarea unui proiect simplu fără baze de date, prea multe dependențe sau configurații specifice serverului (nu PHP, nici MySQL / MSSQL, .NET, Python, Ruby etc.) fac foarte ușor să se desfășoare și să fie robust împotriva numeroaselor posibile vulnerabilități. În cele din urmă, acestea devin pagini HTML de bază pentru utilizatori.

În acest ghid, vă voi arăta cum să vă configurați mediul de dezvoltare cu Hugo și să construiți primul dvs. site web static Hugo.

O abordare de brand nou pentru site-urile statice

Legendarul acronim de design KISS - Păstrați-l simplu, stupid - poate fi aplicat lui Hugo și cum se apropie de spațiul generator al site-ului static.

Construit în Go, Hugo compilează rapid paginile dvs. statice (necesită fracțiuni de milisecunde pentru a compila un mic site - și poate face mii de pagini în câteva secunde).

De asemenea, Hugo oferă instrumente esențiale pentru fluxul de lucru static al site-ului web (inclusiv instrumente de implementare și migrare), permițând dezvoltatorilor și designerilor să se concentreze asupra părților distractive, cum ar fi exersarea creativității și implementarea creativității respective în construcția site-ului web.

De ce site-uri statice?

Atunci când construim site-uri web bazate pe conținut, putem presupune câteva generalități în toate site-urile, iar Hugo oferă un cadru pentru acest lucru. Mai exact, putem lua tipuri de conținut, cum ar fi postări, categorii, recenzii sau produse, și să organizăm datele. Apoi, putem oferi fiecărui aspect un aspect specific prin șabloane și foi de stil.

Mergând mai departe, putem să o conducem oriunde ne dorim în spațiul web static HTML / CSS / JS. Când vă gândiți la asta pragmatic, acesta este un spațiu mare care permite o mulțime de spațiu pentru creativitate.

jQuery va funcționa bine și nu vă oprește să folosiți serviciile terților pe pagina dvs. statică, dacă aveți nevoie de ele. Deci, nu vă limitați, gândindu-vă că nu puteți integra alte biblioteci sau aplicații în site-urile dvs. statice. Nu este cazul - puteți utiliza oricare dintre bibliotecile JavaScript disponibile.

Deci, pentru câteva pagini de pe site-ul web al unei broșuri de companie, cu un link către o pagină Google Forms for a Contact Us. Și dacă trebuie să afișați alte tipuri de date, puteți utiliza JavaScript pentru acel aspect al site-ului dvs..

Cum poate funcționa pentru afacerea mea și clienții mei?

Luați, de exemplu, un magazin mic sau un agent independent cu câteva produse sau servicii care nu necesită o soluție de eCommerce în întregime. În schimb, ele necesită doar informații despre produs și un link "contact" pe pagină. Hugo o poate face până la sfârșitul unei dimineți. Gazduirea nu este chiar o afacere mare - este o idee ulterioară, într-adevăr, pentru că noi doar servim pagini HTML de bază.

De asemenea, Hugo funcționează bine pentru documentația proiectului privind proiectele GNU. De exemplu, gândiți-vă la start-up-uri sau IMM-uri care au nevoie de o prezență simplă.

Care sunt limitele siturilor statice?

Ceea ce Hugo nu poate face este dinamic conținut, de exemplu, forme bazate pe baze de date, sisteme de căutare sau de utilizatori. Dacă asta este ceea ce căutați, atunci Hugo este cu siguranță nu Ce vrei. Dar, pentru alte ocazii, când te găsești spunând "nu putem să punem o pagină de bază pentru asta?" Generatoarele de site-uri statice reprezintă o opțiune solidă. De asemenea, fiți conștienți de faptul că Hugo nu este singurul generator static al site-ului. Sunt mulți acolo și au fost în jur de mult timp, aici este o listă a acestora.

Pentru a construi bloguri de conținut live precum site-urile de știri, Hugo ar putea fi o soluție excelentă pentru a bate rapid o pagină pentru acoperirea care urmează să fie legată de site-ul dvs. principal, obținându-l online în câteva minute, ceea ce înseamnă că puteți continua să adăugați rapid și să redistribuiți modificările foarte repede. Dar pentru a face un întreg site de știri cu căutare și mulți scriitori, ar fi cu adevărat nepotrivit să folosești Hugo.

De asemenea, Hugo nu dispune de instrumente mai avansate pentru conductele sale de active, cum ar fi ES6 și Sass - dacă doriți să utilizați această tehnologie, va trebui să includeți Gulp sau Grunt pentru a vă face treaba; altfel, CSS și JavaScript de vanilie funcționează cel mai bine.

Mediul de dezvoltare de acasă

Hugo este scris în Go și are suport pentru multe platforme, pentru a vedea toate versiunile pe care le puteți accesa aici

Pentru utilizatorii macOS cu HomeBrew, instalarea se poate face după cum urmează:

brew update & & brew instalați hugo

Mai multe informații despre instalarea pentru Mac OSX și Windows

Odată instalat Hugo, putem testa instalarea prin rulare hugo ajutor în linia de comandă sau versiunea hugo

Efectuarea primului site static cu Hugo

Acum, când l-am instalat pe Hugo, putem începe crearea site-ului. Rulați următoarea comandă care înlocuiește "numele dvs. de site-aici" cu numele proiectului dvs.:

$ hugo noul site-ul dvs.-sitename-aici

Acest lucru va crea o schelă pentru site-ul dvs. puteți să-l vizualizați în căutarea dvs.

sau în terminalul dvs. prin copac comanda

Hugo a creat 5 sub-directoare și 1 fișier, pe care le folosește pentru a crea site-ul final de aici, ceea ce înseamnă toate acestea:

arhetipuri: aici definim conținutul nostru, putem să setăm etichete sau categorii prestabilite și să definim aici tipuri, cum ar fi un post, un tutorial sau un produs
config.toml: configurația principală este aici, putem defini toate titlurile site-ului, limba, url-urile etc. aici
conţinut: paginile de conținut ale site-ului sunt stocate aici, subdirectoarele sunt folosite pentru secțiuni pentru a ajuta la organizarea conținutului, a crea un conținut / produse pentru conținutul produselor dvs., de exemplu
date: Date despre site-uri, cum ar fi configurații de localizare, merg aici
aspecte: machete pentru biblioteca Go / template pe care Hugo o folosește aici
static: Orice fișiere statice vor fi compilate în site-ul final, libertatea totală este permisă, astfel încât să puteți servi orice fișier css, js sau imagine, de exemplu.
teme: Creați teme noi sau clona teme de la github în acest director pentru a le utiliza cu site-ul dvs..

"Hello World" în Hugo

Trebuie să adăugăm o postare pentru a vedea site-ul pe care tocmai l-am creat, fă-o folosind următoarea comandă:

$ hugo post nou / first-post.md

Acum editați fișierul în content / post / first-post.md, acesta va conține în mod implicit ceva similar cu următorul:

+++ data = "2016-09-26T13: 19: 03 + 07: 00" title = "primul post" +++

Materia primă

Conținutul din interior +++ este configurația TOML pentru post. Această configurație este apelată materia frontala. Acesta vă permite să definiți configurația postului împreună cu conținutul acestuia. În mod implicit, fiecare post va avea proprietățile de configurare afișate mai sus.

Adăugați un text după +++ca astfel:

+++ data = "2016-09-26T13: 19: 03 + 07: 00" title = "prima postare" +++ Hello world!

Servirea datelor și reîncărcare live

Așadar, putem vedea funcționalitatea de reîncărcare live care este încorporată cu Hugo, să facem câteva modificări site-ului și să vedem ce se întâmplă.

Mai întâi porniți serverul rulând

$ hugo server

Acum, dacă faceți modificări în fișierul dvs., veți vedea că Hugo se reîncarcă instantaneu.

Site-ul dvs. Web va fi disponibil la http: // localhost: 1313 dar stai asa - veți vedea doar a pagină albă necompletată în acest moment, pentru că nu am definit o temă!

Adăugați o temă

Hugo are o bibliotecă tematică foarte robustă și versatilă pe măsură ce folosește Go's html / șablon bibliotecă. Temele sunt ușor de manevrat, instalarea se face prin simpla clonare a depozitului unei teme în tematică pentru site-ul dvs. Hugo.

Hugo nu vine cu o temă implicită, așa că tu trebuie sa un set.

Există multe teme de tip open source din care să alegeți.

Să adăugăm o mulțime de teme pe site-ul nostru, astfel încât să putem juca cu toți și să vedem ce ne place. Faceți acest lucru executând următoarele în directorul nostru Hugo:

$ git clone - tematice recursive https://github.com/spf13/hugoThemes.git Clonarea în "teme" ... remote: numărarea obiectelor: 880, terminat. telecomandă: Comprimarea obiectelor: 100% (5/5), terminat. la distanță: total 880 (delta 1), refolosit 0 (delta 0), reutilizat în pachet 875 obiecte receptoare: 100% (880/880), 669,20 KiB | 288,00 KiB / s, terminat. Rezolvarea deltaselor: 100% (506/506), terminat. Verificarea conectivității ... terminată.

Acum veți vedea o grămadă de teme care sunt clonate în site-ul dvs. Există o mulțime, astfel încât veți avea timp pentru o pauză în timp ce clone ...

Folosind o temă

Pentru a folosi o temă, porniți Hugo cu -T sau --temă parametru ca atare

$ hugo -t TemaName

Sau puteți adăuga la dvs. config.toml :

temă: "ThemeName"

THEMENAME trebuie să se potrivească cu numele directorului din interior / teme.

Când ați ales numele unei teme din director, porniți serverul cu serverul hugo - tema = ThemeName și aruncă o privire pe http: // localhost: 1313

Iată câteva exemple din unele dintre temele pe care le-am clonat, am folosit cerși, crocant șicactus au o privire în jur sunt atât de multe de a alege de la!

Deci ați generat acum un site web cu un post de salut la nivel mondial, ce altceva putem face?

Construirea unui blog

Efectuarea unui blog de bază este foarte ușor de făcut cu Hugo. În primul rând, va trebui să definiți un arhetip pentru postarea implicită, astfel încât să creați un nou fișier în arhetipuri / default.md și adăugați următoarele ca materia primă:

+++ tag-uri = ["sudare", "lucrări metalice"] categorii = ["posturi"] +++

Aici vom seta unele etichete implicite, pentru un blog despre sudare, putem fi siguri că vrem aceste etichete în toate postările noastre și facem o categorie numită posturi, așa că avem o valoare prestabilită când creăm o postare.

Acum adăugați prima dvs. postare prin terminal, cum ar fi:

$ hugo post nou / tig-welding-a-bike-frame.md

Acest lucru va crea o postare cu arhetipul pe care l-ați definit anterior, îl puteți deschide acum într-un editor de text și puteți începe să scrieți în format de marcare!

Să adăugăm mai multe postări:

$ hugo post nou / sudare-a-roll-cage.md

Din nou, pentru a adăuga conținut, trebuie doar să deschideți fișierul creat de Hugo și să începeți să adăugați conținut la sfârșitul fișierului după chestiunea frontală.

Construirea unei Galerie foto

Pentru a construi o galerie foto cu Hugo, vom folosi instrumentul excelent hugo-galerie disponibil pe GitHub.

Utilizarea este ca atare:

hugo-galerie [BaseUrl]</code></p><p> <code>hugo-galerie</code> instrumentul va crea un director de mesaje noi care conține un fișier de marcare pentru fiecare imagine din directorul sursă care să permită o prezentare de imagini ordonată. Va citi toate fișierele din <code>Calea sursei</code> și salvați-le în directorul static al site-ului Hugo. <br></p><p>Acesta va crea un nou director în interiorul directorului de conținut bazat pe <code>Titlu</code> cu condiția ca, <code>conținut / sudură</code></p><p>De exemplu: </p><pre>$ hugo-galerie static / imagini / sudura-fotografii sudare "Fotografii de abilitățile mele de suflare sudor"</pre><p>Vizita <code>localhost: 1313 / sudură</code> pentru a vizualiza conținutul.</p><h2>Implementare</h2><p>Hugo are mai multe instrumente pentru implementare, cum ar fi hugomac, care este o aplicație menubar OSX care permite utilizatorului să se publice cu ușurință în găzduirea EC2. Nici o linie de comandă nu este necesară.</p><p>De asemenea, hugodeploy oferă o configurație SFTP care poate fi implementată sau puteți folosi doar implementările automate livrate împreună cu Hugo.</p><h2>Concluzie</h2><p>Generatoare de site-uri statice au fost în jur de ceva timp, iar Hugo se bazează într-adevăr pe setul de unelte, făcând-o rapid și ușor să bată site-uri sau chiar să migreze un site existent de la WordPress la Hugo. Există o mulțime de instrumente pentru Hugo, inclusiv editorii din front-end le verifică.</p><p>Mergând mai departe, va fi frumos să vedem mai multe module pentru Hugo, oferind suport pentru lucruri precum un formular de contact și suport pentru galerii sau posturi similare, de exemplu. </p><p>Foaia de parcurs Hugo are multe idei extinse, cum ar fi redimensionarea imaginii dinamice, suport pentru rsync și importul de imagini de la furnizorii de găzduire și găzduire mai ușoară cu integrarea AWS EC2 și GitHub.</p><p>Dacă nu utilizați Hugo, asigurați-vă că verificați din nou proiectul pe măsură ce acesta se dezvoltă!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Cod</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/crafts/make-cute-origami-bunny-decorations-for-easter.html">Faceți Cute Origami Bunny Decoratiuni pentru Paste</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/make-cute-origami-bunny-decorations-for-easter_41.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/crafts/make-copper-and-pearl-earrings-for-valentines-day.html">Faceți cercei de cupru și perlă pentru Ziua Îndrăgostiților</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_15/make-copper-and-pearl-earrings-for-valentines-day_13.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Căutare..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>