Jak zbudować niesamowicie szybką statyczną witrynę z Hugo

Hugo to statyczny generator witryn (SSG) napisany w Go (aka Golang), wysokowydajnym skompilowanym języku programowania często używanym do tworzenia aplikacji i usług zaplecza.

Dzisiaj Hugo jest w stanie wygenerować większość stron internetowych w ciągu kilku sekund (<1 ms na stronę). To wyjaśnia, dlaczego Hugo reklamuje się jako „najszybszy na świecie framework do tworzenia stron internetowych”.

W tym artykule przyjrzymy się historii Hugo, co sprawia, że ​​jest tak szybki i jak możesz zacząć budować własną statyczną witrynę Hugo.

Co to jest Hugo? I dlaczego jest popularny?

Steve Francia pierwotnie opracował generator stron statycznych Hugo w 2013 roku, a Bjrn Erik Pedersen przejął funkcję głównego programisty projektu w 2015 roku. Hugo jest projektem open source, co oznacza, że ​​jego kod może być przeglądany i ulepszany przez każdego.

Jako generator statycznych witryn, Hugo pobiera pliki treści Markdown, uruchamia je za pomocą szablonów motywów i wypluwa pliki HTML, które możesz łatwo wdrożyć online – i robi to bardzo szybko.

W 2021 roku istnieją dziesiątki, jeśli nie setki generatorów statycznych. Każdy generator stron statycznych ma swój urok. Jekyll jest popularny wśród programistów Ruby i chociaż nie jest tak szybki jak inne opcje, był jednym z pierwszych generatorów statycznych witryn, który został szeroko rozpowszechniony. Gatsby to kolejny popularny SSG, który dobrze nadaje się do tworzenia statycznie wdrażalnych witryn o dynamicznej funkcjonalności.

Więc przy tak wielu SSG, co wyróżnia Hugo?

Hugo jest szybki

Pod względem surowej wydajności Hugo jest najlepszym generatorem statycznych witryn na świecie. W porównaniu z Jekyllem, Hugo okazał się 35 razy szybszy przez Forestry. Podobnie Hugo może wyrenderować witrynę zawierającą 10 000 stron w 10 sekund, co zajęłoby Gatsby'emu ponad pół godziny. Hugo jest nie tylko najszybszym SSG pod względem czasu budowy, ale także jest szybki w instalacji.

Hugo jest dostarczany jako samodzielny plik wykonywalny, w przeciwieństwie do Jekyll, Gatsby i innych SSG wymagających instalowania zależności za pomocą menedżera pakietów. Oznacza to, że możesz natychmiast pobrać i używać Hugo, nie martwiąc się o zależności oprogramowania.

Tworzenie szablonów jest łatwe w Hugo

W żargonie SSG „szablonowanie” odnosi się do procesu dodawania symboli zastępczych do dynamicznego wstawiania treści na stronie HTML. Aby uzyskać dostęp do tytułu strony, możesz użyć zmiennej {{ .Title }} . Dlatego w szablonie Hugo HTML często można zobaczyć {{ .Title }} opakowane w tagi H1, takie jak:

 <h1>{{ .Title }}</h1>

W czasie kompilacji Hugo automatycznie pobierze tytuł z pliku treści i wstawi tytuł między dwa <h1> . Hugo ma wiele wbudowanych zmiennych szablonów, a nawet możesz pisać niestandardowe funkcje do przetwarzania danych w czasie kompilacji. Do tworzenia szablonów Hugo używa wbudowanych w Go bibliotek html/template i text/template . Pomaga to ograniczyć rozrost aplikacji, ponieważ Hugo nie musi instalować bibliotek innych firm do tworzenia szablonów.

Oto przykład szablonu strony głównej index.html z popularnego motywu Ananke. Jak widać, przypomina on standardowy plik HTML z dodatkowym kodem szablonu:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

Jak zainstalować Hugo

Hugo jest dostarczany jako skompilowany plik wykonywalny, co oznacza, że ​​nie musisz pobierać wielu zależności i zarządzać nimi, aby zacząć. Jest dostępny dla systemów macOS, Windows i Linux.

Jak zainstalować Hugo na macOS i Linux

Zalecana metoda instalacji dla macOS i Linux wymaga Homebrew, menedżera pakietów do instalacji i aktualizacji aplikacji. Jeśli nie masz jeszcze zainstalowanego Homebrew, możesz go zainstalować, uruchamiając poniższe polecenie w Terminalu:

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

Po zainstalowaniu Homebrew uruchom poniższe polecenie, aby zainstalować Hugo:

 brew install hugo

Jak zainstalować Hugo w systemie Windows

W przypadku użytkowników systemu Windows Hugo można zainstalować za pomocą menedżerów pakietów Chocolatey lub Scoop. Ponieważ instrukcje instalacji Chocolatey and Scoop są nieco bardziej złożone niż Homebrew, zalecamy zapoznanie się z ich oficjalnymi stronami dokumentacji tutaj i tutaj.

Po zainstalowaniu Chocolatey lub Scoop możesz zainstalować Hugo za pomocą jednego z następujących poleceń (w zależności od menedżera pakietów):

 choco install hugo-extended -confirm

 scoop install hugo-extended

Jak sprawdzić, czy Hugo jest poprawnie zainstalowany?

Aby sprawdzić, czy Hugo został poprawnie zainstalowany, uruchom następujące polecenie:

 hugo version

To polecenie terminala powinno wyświetlać informacje dotyczące aktualnie zainstalowanej wersji Hugo w następujący sposób:

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Polecenia i konfiguracja Hugo

Zanim zagłębimy się w tworzenie statycznej witryny za pomocą Hugo, zapoznajmy się z różnymi poleceniami CLI i parametrami pliku konfiguracyjnego.

Komendy CLI Hugo

• hugo check – przeprowadza różne kontrole weryfikacyjne
• hugo config – wyświetla konfigurację dla witryny Hugo
• hugo convert – konwertuje treści do różnych formatów
• hugo deploy – wdroży Twoją witrynę u dostawcy chmury
• hugo env – wyświetla wersję Hugo i informacje o środowisku
• hugo gen – zapewnia dostęp do różnych generatorów
• hugo help – wyświetla informacje o poleceniu
• hugo import – pozwala zaimportować stronę z innej lokalizacji
• hugo list – wyświetla listę różnych typów treści
• hugo mod – zapewnia dostęp do różnych pomocników modułów
• hugo new – pozwala tworzyć nowe treści dla Twojej witryny
• hugo server – uruchamia lokalny serwer deweloperski
• hugo version – wyświetla aktualną wersję Hugo

Hugo CLI ma również wiele flag, które określają dodatkowe opcje dla niektórych poleceń. Aby wyświetlić pełną listę flag Hugo (jest ich dużo), zalecamy użycie polecenia hugo help , aby wyświetlić listę wszystkich dostępnych flag.

Plik konfiguracyjny Hugo

Plik konfiguracyjny Hugo obsługuje trzy formaty: YAML, TOML i JSON. Podobnie plik konfiguracyjny Hugo to config.yml , config.toml lub config.json i można go znaleźć w katalogu głównym projektu Hugo.

Oto jak wygląda typowy plik konfiguracyjny Hugo w formacie YAML:

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

Jeśli wcześniej korzystałeś z WordPressa lub innego systemu CMS, niektóre opcje konfiguracji mogą wydawać Ci się znajome. Na przykład kinsta-static-site to nazwa motywu witryny, Kinsta Static Site to metatytuł SEO, a paginate (liczba postów na stronę) to 5 .

Hugo ma dziesiątki opcji konfiguracyjnych, z których wszystkie możesz zapoznać się z oficjalną dokumentacją Hugo. Jeśli musisz dokonać jakiejkolwiek globalnej zmiany konfiguracji podczas tworzenia witryny Hugo, prawdopodobnie będziesz musiał edytować ten plik konfiguracyjny.

Jak stworzyć witrynę Hugo

Teraz, gdy omówiliśmy już, jak zainstalować i używać Hugo CLI oraz podstawy pliku konfiguracyjnego Hugo, stwórzmy nową witrynę Hugo.

Aby utworzyć witrynę Hugo, użyj poniższego polecenia (możesz zmienić witrynę my-hugo na inną, jeśli chcesz):

 hugo new site my-hugo-site

Następnie przejdź do folderu witryny i powinieneś zobaczyć następujące pliki i foldery: plik config.toml , folder archetypes , folder content , folder layouts , folder motywów , folder danych i folder statyczny . Przyjrzyjmy się szybko, czym jest każdy z tych plików i folderów.

Plik config.toml Hugo

Jak podkreśliliśmy powyżej, podstawowy plik konfiguracyjny Hugo zawiera globalne ustawienia Twojej witryny.

Folder Archetypów Hugo

Folder archetypes to miejsce, w którym przechowujesz szablony treści sformatowane w Markdown. Archetypy są szczególnie przydatne, jeśli witryna ma wiele formatów treści. Dzięki archetypom Hugo możesz utworzyć szablon dla każdego typu treści w swojej witrynie. Pozwala to na wstępne wypełnienie wygenerowanych plików Markdown wszystkimi niezbędnymi ustawieniami konfiguracyjnymi.

Na przykład, jeśli masz typ zawartości podcastu do wyświetlania odcinków podcastów, możesz utworzyć nowy archetyp w archetypes/podcast.md z poniższą zawartością:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

Dzięki temu archetypowi podcastu możesz użyć poniższego polecenia, aby utworzyć nowy post:

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Teraz, jeśli otworzysz nowo utworzony post, powinieneś zobaczyć to:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

Bez archetypów musiałbyś ręcznie określać parametry sprawy frontu dla każdego nowego tworzonego posta. Chociaż archetypy mogą początkowo wydawać się skomplikowane i niepotrzebne, na dłuższą metę mogą zaoszczędzić dużo czasu.

Folder zawartości Hugo

Folder treści to miejsce, do którego trafia rzeczywista treść posta. Hugo obsługuje zarówno formaty Markdown, jak i HTML, przy czym Markdown jest bardziej popularną opcją ze względu na łatwość użycia. Oprócz tego, że jest ogólnym miejscem do przechowywania postów, możesz użyć folderu treści do dalszego porządkowania treści postów.

Hugo traktuje każdy katalog najwyższego poziomu w folderze zawartości jako sekcję zawartości. Sekcje treści w Hugo są podobne do niestandardowych typów postów w WordPress. Jeśli na przykład Twoja witryna zawiera posty, strony i podcasty, w folderze treści będą znajdować się katalogi postów , pages i podcastów , w których będą znajdować się pliki treści dla tych różnych typów postów.

Folder układów Hugo

Folder layouts zawiera pliki HTML, które definiują strukturę witryny. W niektórych przypadkach możesz zobaczyć witrynę Hugo bez folderu układów , ponieważ nie musi ona znajdować się w katalogu głównym projektu i zamiast tego może znajdować się w folderze motywów.

Podobnie jak motywy WordPress, które wykorzystują PHP do tworzenia szablonów, szablony Hugo składają się z podstawowego kodu HTML z dodatkowym dynamicznym szablonowaniem zasilanym przez wbudowane biblioteki html/template i text/template Golanga. Różne pliki szablonów HTML wymagane do generowania znaczników HTML witryny znajdują się w folderze układów .

Folder motywów Hugo

W przypadku witryn, które preferują bardziej samodzielny sposób przechowywania plików szablonów i zasobów, Hugo obsługuje folder motywów . Motywy Hugo są podobne do motywów WordPress, ponieważ są przechowywane w katalogu motywów i zawierają wszystkie szablony niezbędne do działania motywu.

Podczas gdy niektórzy użytkownicy Hugo wolą przechowywać pliki związane z motywami w katalogu głównym projektu, przechowywanie tych plików w folderze motywów pozwala na łatwiejsze zarządzanie i udostępnianie.

Folder danych Hugo

Folder danych Hugo to miejsce, w którym możesz przechowywać dodatkowe dane (w formacie JSON, YAML lub TOML), które są potrzebne do wygenerowania stron Twojej witryny. Pliki danych są korzystne w przypadku większych zestawów danych, których przechowywanie bezpośrednio w pliku treści lub szablonu może być kłopotliwe.

Na przykład, jeśli chcesz utworzyć listę stóp inflacji w USD od 1960 do 2020 r., Reprezentowanie danych zajmie około 80 linii (jedna linia na każdy rok). Zamiast umieszczać te dane bezpośrednio w pliku treści lub pliku szablonu, możesz utworzyć je w folderze danych i wypełnić go niezbędnymi informacjami.

Folder statyczny Hugo

Folder statyczny Hugo to miejsce, w którym przechowujesz statyczne zasoby, które nie wymagają dodatkowego przetwarzania. W folderze statycznym użytkownicy Hugo zwykle przechowują obrazy, czcionki, pliki weryfikacyjne DNS i nie tylko. Gdy witryna Hugo jest generowana i zapisywana w folderze w celu łatwego wdrożenia, wszystkie pliki w folderze statycznym są kopiowane bez zmian.

Jeśli zastanawiasz się, dlaczego nie wspomnieliśmy o plikach JavaScript lub CSS, to dlatego, że często są one dynamicznie przetwarzane za pomocą potoków podczas tworzenia witryny. W Hugo pliki JavaScript i CSS są zwykle przechowywane w folderze motywu , ponieważ wymagają dodatkowego przetwarzania.

Jak dodać motyw do witryny Hugo

Pobranie i zainstalowanie gotowego motywu to świetny sposób na rozpoczęcie pracy z Hugo. Motywy Hugo są dostępne we wszystkich kształtach i rozmiarach, a wiele z nich jest dostępnych bezpłatnie w oficjalnym repozytorium motywów Hugo. Przejdźmy dalej i zainstalujmy popularny motyw Hyde na naszej stronie Hugo.

Najpierw przejdź do folderu motywu projektu w Terminalu:

 cd <hugo-project-directory>/themes/

Następnie użyj Git, aby sklonować motyw Hyde do katalogu motywów projektu.

 git clone https://github.com/spf13/hyde.git

Następnie dodaj następujący wiersz do pliku config.toml , aby aktywować motyw Hyde:

 theme = "hyde"

W tym momencie motyw Hyde jest instalowany i konfigurowany. Następnym krokiem jest uruchomienie wbudowanego serwera programistycznego Hugo, aby wyświetlić witrynę w przeglądarce internetowej.

Jak wyświetlić podgląd witryny Hugo

Hugo jest dostarczany ze zintegrowanym serwerem WWW do celów programistycznych, co oznacza, że ​​nie musisz instalować serwera WWW innej firmy, takiego jak Nginx lub Apache, tylko po to, aby wyświetlić swoją witrynę lokalnie.

Aby uruchomić serwer sieciowy Hugo, uruchom poniższe polecenie w katalogu głównym swojego projektu:

 hugo server -D

Hugo utworzy wtedy strony Twojej witryny i udostępni je pod http://localhost:1313/ :

Jeśli odwiedzasz adres URL w przeglądarce internetowej, powinieneś zobaczyć swoją witrynę Hugo z motywem Hyde:

Domyślnie lokalny serwer programistyczny Hugo będzie obserwował zmiany i automatycznie odbudował witrynę. Ponieważ szybkość tworzenia Hugo jest tak duża, aktualizacje Twojej witryny można zobaczyć w czasie zbliżonym do rzeczywistego – coś, co jest rzadko spotykane w świecie generatorów statycznych witryn. Aby to zademonstrować, stwórzmy nasz pierwszy post w Hugo.

Jak dodawać treści do witryny Hugo

Dodawanie treści do witryny Hugo bardzo różni się od pełnoprawnego systemu CMS, takiego jak WordPress czy Ghost. W Hugo nie ma wbudowanej warstwy CMS do zarządzania treścią. Zamiast tego oczekuje się, że będziesz zarządzać rzeczami i organizować je według własnego uznania.

Innymi słowy, nie ma wyraźnie „poprawnego” sposobu zarządzania treścią w Hugo. W tej sekcji podzielimy się jedną metodą dodawania zawartości i zarządzania nią, ale możesz to zmienić, gdy lepiej poznasz Hugo.

Sekcje treści w Hugo

W Hugo pierwszym narzędziem do organizacji treści, które masz do dyspozycji, jest sekcja treści . Sekcja treści w Hugo jest podobna do typu posta w WordPress – nie tylko możesz użyć jej jako filtru treści, ale możesz również użyć jej jako identyfikatora podczas tworzenia niestandardowych motywów.

Na przykład, jeśli masz folder sekcji treści bloga , możesz go użyć do przechowywania wszystkich swoich postów na blogu i renderowania określonego szablonu strony, który ma zastosowanie tylko do postów na blogu.

Jak dodawać posty w Hugo

Mając to na uwadze, stwórzmy sekcję treści dla postów na blogu i dodajmy kilka fragmentów treści. Utwórz nowy folder o nazwie posty w folderze zawartości projektu — to jest sekcja zawartości.

Utwórzmy kolejną warstwę organizacyjną w folderze postów , tworząc folder 2021 . W tym momencie twój katalog treści powinien wyglądać tak:

Teraz stwórzmy nasz pierwszy post. Jak wspomnieliśmy wcześniej, Hugo obsługuje zarówno pliki Markdown, jak i HTML dla treści. Ogólnie rzecz biorąc, lepiej trzymać się plików Markdown, ponieważ łatwiej je pisać, formatować i czytać.

W folderze content/posts/2021 utwórz nowy plik z rozszerzeniem .md (rozszerzenie pliku Markdown). Możesz nazwać plik, jak chcesz, ale zalecaną składnią nazywania pliku treści Hugo jest RRRR-MM-DD-a-sample-post.md .

Oprócz ręcznego tworzenia pliku treści, możesz również użyć Hugo CLI, aby utworzyć nowy post za pomocą poniższego polecenia (upewnij się, że uruchomiłeś polecenie z katalogu projektu):

 hugo new posts/2021/2021-08-30-a-sample-post.md

Zwróć uwagę, że w powyższej ścieżce brakuje folderu zawartości . Dzieje się tak, ponieważ Hugo zakłada, że ​​wszystkie pliki zawartości zostaną domyślnie umieszczone w folderze zawartości .

Jeśli otworzysz nowo utworzony plik treści, powinieneś zobaczyć kilka wierszy metadanych u góry dokumentu, które wyglądają mniej więcej tak:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

Te metadane, sformatowane w YAML, nazywane są „przedmiotem”. Automatycznie generowana przednia materia to jedna z istotnych zalet korzystania z Hugo CLI. Pierwsza sprawa to miejsce, w którym przechowywane są unikalne dane dla postu (nazwa posta, dane, status wersji roboczej, tagi, kategorie itp.). Domyślny format dla sprawy frontowej można skonfigurować na podstawie sekcji przy użyciu archetypów.

Dodajmy teraz trochę tekstu do posta. Pisząc post, zawsze upewnij się, że treść jest poniżej pierwszej części, tak jak:

Po zapisaniu pliku treści powinieneś zobaczyć, jak Hugo odbudowuje twoją witrynę w Terminalu. Na poniższym zrzucie ekranu możesz zobaczyć, jak Hugo przebudował całą witrynę w 22 ms!

Jeśli odwiedzasz swoją witrynę Hugo w przeglądarce internetowej, powinieneś zobaczyć nowy post.

Jak dodać stronę w Hugo

Teraz, gdy dodaliśmy post do naszej witryny Hugo, dodajmy stronę. Większość systemów zarządzania treścią, w tym WordPress, rozróżnia posty i strony. Zazwyczaj post jest treścią opatrzoną datą, podczas gdy strona składa się z treści wiecznie zielonych lub statycznych.

Aby stworzyć stronę, potrzebujemy najpierw sekcji treści strony . Aby to zrobić, utwórz folder o nazwie pages w folderze zawartości Hugo. Następnie użyj poniższego polecenia, aby dodać nową stronę „Informacje” do swojej witryny:

 hugo new pages/about.md

Zwróć uwagę, jak konwencja nazewnictwa stron różni się od postów. W przeciwieństwie do postów, strony nie są powiązane z konkretną datą, więc nie ma potrzeby umieszczania daty utworzenia w nazwie pliku.

Dodajmy teraz trochę tekstu na stronie „Informacje”:

W tym momencie powinieneś zobaczyć stronę Informacje w swojej przeglądarce internetowej:

Teraz, gdy mamy dwie sekcje treści — posty i strony — przejdźmy przez kilka dostosowań witryny, takich jak edytowanie tytułu i opisu, dodawanie strony Informacje do menu paska bocznego, zmiana formatu permalinków i usuwanie strony z kanału postów.

Jak zmienić tytuł i opis witryny?

Dokładna metoda zmiany tytułu i opisu witryny zależy od konfiguracji witryny i/lub aktywnego motywu. W przypadku motywu Hyde tytuł i opis strony można zmienić w pliku konfiguracyjnym Hugo ( config.toml ).

Wiemy to dzięki następującemu kodowi motywu, który renderuje pasek boczny:

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

Dwie części, na których należy się skoncentrować, to:

 {{ .Site.Title }}

I…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Kierownice {{ }} są częścią silnika szablonów Hugo i pozwalają na dynamicznie generowane dane na renderowanych stronach. Na przykład {{ .Site.Title }} instruuje Hugo, aby sprawdził plik config.toml i pobrał wartość zamapowaną na klucz tytułu .

Ponieważ domyślna konfiguracja Hugo używa My New Hugo Site jako tytułu witryny, właśnie to pokazuje pasek boczny. Jeśli zmienimy tytuł strony w config.toml na inny, zmiana będzie również odzwierciedlać frontend.

Przejdźmy dalej i zmieńmy parametr title w pliku config.toml z My New Hugo Site na Kinsta's Hugo Site .

Przechodząc do opisu strony, widać, że silnik szablonów Hugo obsługuje logikę warunkową. Przetłumaczony na zwykły angielski, poniższy kod instruuje Hugo, aby sprawdził, czy wartość Params jest przypisana do klucza opisu w pliku config.toml . Jeśli nie, oto domyślny ciąg do użycia.

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Ponieważ nie mamy opisu skonfigurowanego w pliku config.toml , Hugo domyślnie renderuje „Elegancki motyw open source i mobile-first dla Hugo stworzony przez @mdo. Pierwotnie stworzony dla Jekylla.

Teraz zaktualizujmy nasz plik config.toml z:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

W celu:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

Zgodnie z oczekiwaniami zmiany są teraz widoczne również na interfejsie:

Jak usunąć strony z kanału postów?

W większości blogów kanał postów na stronie głównej często wyświetla tylko posty. Domyślnie motyw Hyde zawiera wszystkie pliki treści w kanale postów. Aby zmienić to zachowanie, musisz edytować funkcję range w szablonie index.html , który generuje stronę główną.

Funkcja range Hugo iteruje po zdefiniowanym zestawie elementów, a następnie robi coś z danymi. Domyślnie szablon index.html motywu Hyde obejmuje .Site.RegularPages i odfiltrowuje dane, takie jak permalink, tytuł posta i podsumowanie posta przed wyrenderowaniem kodu HTML.

Ponieważ .Site.RegularPages zawiera wszystkie zwykłe strony Hugo, w tym zarówno posty, jak i strony, renderowana jest strona „O”. Zmieniając elementy range na .Site.RegularPages "Section" "posts" , możemy poinstruować Hugo, aby filtrował tylko zwykłe strony w sekcji postów – pliki treści w utworzonym wcześniej folderze posts .

Wprowadźmy teraz tę zmianę, edytując szablon z tego:

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

Do tego:

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

Po wprowadzeniu tej zmiany na stronie głównej będą wyświetlane tylko takie posty:

Jak korzystać z części w Hugo

Jedną z najpotężniejszych funkcji szablonów Hugo są podszablony — szablony HTML osadzone w innym szablonie HTML. Częściowe pozwalają na ponowne użycie kodu w różnych plikach szablonów bez zarządzania kodem w każdym pliku.

Na przykład często można zobaczyć różne sekcje strony (nagłówek, stopka itp.) w osobnych plikach częściowych, które są następnie wywoływane w pliku szablonu baseof.html motywu.

W pliku baseof.html w motywie Ananke możesz zobaczyć przykład podszablonu w wierszu 18 – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

W tym przypadku {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} instruuje Hugo, aby zastąpił zawartość wiersza 18 plikiem site-style.html w folderze /layouts/partials . Jeśli przejdziemy do /partials/site-style.html , zobaczymy następujący kod:

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

Przenosząc ten kod do osobnego pliku, plik szablonu baseof.html może pozostać uporządkowany i łatwy do odczytania. Chociaż części nie są konieczne, szczególnie w przypadku podstawowych projektów, przydają się w przypadku większych projektów o bardziej złożonej funkcjonalności.

Jak korzystać ze skrótów w Hugo

Skróty Hugo są podobne do części, ponieważ pozwalają na ponowne użycie kodu na różnych stronach. Shortcodes to pliki HTML znajdujące się w folderze /layouts/shortcodes . Główna różnica polega na tym, że podszablony mają zastosowanie do szablonów HTML, a skrócone do stron z treścią Markdown.

W Hugo skróty umożliwiają tworzenie modułów funkcjonalności, których można używać na stronach w witrynie bez zarządzania zmianami kodu dla każdej strony.

Jeśli prowadzisz bloga, prawdopodobnie będziesz musiał przejrzeć treść swoich postów, aby zaktualizować odniesienia do roku bieżącego. W zależności od tego, ile postów masz na swojej stronie, to zadanie może zająć dużo czasu!

Używając skróconego kodu Hugo w swoich plikach treści, nie musisz się martwić o ponowne aktualizowanie referencji roku!

Zacznijmy od stworzenia shortcode w /layouts/shortcodes/current_year.html o poniższej zawartości:

 {{ now.Format "2006" }}

Skróty można osadzać w postach za pomocą tej składni – {{< shortcode_name >}} . W naszym przypadku możemy wywołać current_year.html za pomocą {{< shortcode_name >}} w następujący sposób:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

Jeśli przeglądasz post w przeglądarce internetowej, powinieneś zobaczyć bieżący rok w pierwszym wierszu posta w następujący sposób:

Jak dodać obrazy do postu w Hugo

W przeciwieństwie do WordPressa i innych pełnoprawnych systemów zarządzania treścią, Hugo nie zawiera systemu „przeciągnij i upuść” do zarządzania obrazami. W ten sposób projektowanie systemu zarządzania obrazami jest odciążane od użytkownika końcowego.

Chociaż Hugo nie ma standardowego sposobu zarządzania obrazami, jedna popularna metoda polega na przechowywaniu obrazów w folderze /static i odwoływaniu się do nich w postach i stronach za pomocą krótkiego kodu. Przyjrzyjmy się, jak wykonać podstawową organizację obrazu w Hugo.

Pierwszą rzeczą, którą musimy zrobić, to stworzyć strukturę organizacyjną dla naszej biblioteki obrazów. Choć brzmi to skomplikowanie, wystarczy utworzyć kilka dodatkowych katalogów w folderze /static .

Zacznijmy od utworzenia folderu uploads w /static . W folderze przesyłania utwórz folder o nazwie 2021 , w którym będą przechowywane wszystkie obrazy przesłane w 2021 r.

Następnie dodajmy dwa obrazy ( blue1.jpg i blue2.jpg ) do folderu 2021 .

W języku HTML obrazy są wyświetlane przy użyciu <img> . Na przykład, aby wyświetlić blue1.jpg , możemy użyć poniższego kodu HTML:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Chociaż możliwe jest dodanie tego kodu HTML bezpośrednio do pliku treści Markdown, lepiej jest utworzyć krótki kod, którego można użyć do wyświetlenia dowolnego obrazu z folderu przesyłania. W ten sposób, jeśli kiedykolwiek będziesz musiał zaktualizować tag img , możesz edytować szablon shortcode bez edytowania każdego wystąpienia tagu img .

Aby utworzyć szablon shortcode, utwórz nowy plik w /layouts/shortcodes/img.html z poniższą treścią:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

Następnie dodaj poniższy krótki kod do posta na blogu:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

W szablonie {{ .Get "src" }} i {{ .Get "alt" }} instruują Hugo, aby podczas wywoływania shortcode pobrał zawartość parametrów src< i alt< .

Teraz, jeśli ponownie załadujesz post na blogu, obraz powinien wyglądać tak:

Jak wdrożyć witrynę Hugo

Do tego postu dowiedziałeś się, jak zainstalować Hugo, utworzyć witrynę, dodać motyw, wprowadzić podstawowe zmiany w plikach konfiguracyjnych i rozszerzyć funkcjonalność witryny o części i skróty. W tym momencie powinieneś mieć działającą witrynę, która jest gotowa do wdrożenia online.

Ponieważ Hugo jest statycznym generatorem witryn, możesz wdrażać wygenerowany kod HTML, CSS i JS w dowolnym miejscu za pomocą serwera WWW. Ponieważ wymagania techniczne dotyczące obsługi witryn statycznych są tak niskie, możesz je hostować za darmo u wielu różnych dostawców, takich jak Netlify, Vercel, Cloudflare Pages i innych.

Wcześniej używaliśmy hugo server -D do uruchomienia lokalnego serwera programistycznego, aby wyświetlić podgląd zmian w naszej witrynie w czasie rzeczywistym. Aby wygenerować stronę w całości, możemy użyć komendy hugo w katalogu głównym naszego projektu. Po zakończeniu generowania witryny w katalogu projektu powinien pojawić się nowy folder publiczny . W tym folderze znajdziesz wszystkie pliki, które należy przesłać na serwer lub usługę przechowywania w chmurze, taką jak Amazon S3.

Generowanie witryny lokalnie i ręczne przesyłanie jej do Amazon S3 lub serwera z uruchomionym Nginx to jeden ze sposobów wdrożenia witryny generowanej statycznie. Jednak nie jest to najbardziej wydajne, ponieważ wymaga ręcznego przesyłania nowych plików za każdym razem, gdy wprowadzasz zmianę.

Zamiast tego lepszą opcją jest połączenie folderu projektu Hugo z repozytorium GitHub i połączenie repozytorium GitHub z usługą automatycznego wdrażania, taką jak Netlify. Dzięki tej konfiguracji możesz edytować swoją witrynę, przesyłać zmiany do GitHub i uruchamiać nową kompilację i wdrożenie w Netlify bez ręcznej interwencji. Zobaczmy teraz, jak to wszystko zrobić!

Jak przesłać swój projekt Hugo do GitHub

Najpierw musisz utworzyć repozytorium GitHub dla swojego projektu. Aby to zrobić, utwórz konto GitHub (jeśli jeszcze go nie masz) i pobierz oficjalną aplikację komputerową GitHub. Po zainstalowaniu aplikacji GitHub kliknij Plik na pasku menu i wybierz Nowe repozytorium . Nadaj repozytorium wybraną nazwę, pozostaw na razie pozostałe opcje w ich domyślnych stanach i kliknij Utwórz repozytorium .

Domyślnie (w systemie macOS) aplikacja GitHub tworzy nowe repozytoria w /Users/username/Documents/GitHub . Ponieważ nazwaliśmy nasze repozytorium my-hugo-site , nasze repozytorium można znaleźć pod adresem /Users/brianli/Documents/GitHub/my-hugo-site .

Następnie przenieś wszystkie pliki z oryginalnego folderu projektu do nowego folderu repozytorium GitHub. Pamiętaj, aby usunąć folder publiczny , ponieważ nie musimy przesyłać tego folderu do GitHub.

Jeśli wrócisz do aplikacji GitHub, powinieneś teraz zobaczyć listę zmienionych plików. Aby przesłać repozytorium do GitHub, dodaj podsumowanie, kliknij Zatwierdź w głównym i kliknij Opublikuj repozytorium w prawym górnym rogu.

Domyślnie zaznaczona jest opcja „Zachowaj ten kod jako prywatny”. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Ponieważ Hugo jest tak szybkim generatorem witryn statycznych, wdrożenie podstawowej witryny powinno zająć tylko kilka sekund. Po zakończeniu wdrażania, w panelu Netlify będzie można zobaczyć tymczasowy adres URL. Kliknij adres URL, aby wyświetlić wdrożoną witrynę.

Oto nasza strona Hugo na Netlify. Jak widać, jest identyczna z witryną w naszym lokalnym środowisku:

W tym momencie możesz skonfigurować niestandardową domenę i certyfikat SSL dla swojej witryny hostowanej przez Netlify. W tym celu zalecamy zapoznanie się z oficjalną dokumentacją Netlify.

Ponieważ połączyliśmy Netlify z GitHub, nowe zatwierdzenie projektu Hugo w repozytorium GitHub automatycznie uruchomi nowe wdrożenie w Netlify!

Streszczenie

Hugo jest jednym z najpopularniejszych generatorów stron statycznych na świecie i nie bez powodu. Nie tylko ma super szybkie przetwarzanie kompilacji, ale także jest dostarczany z potężnymi możliwościami tworzenia szablonów, które obsługują częściowe i skrócone kody.

W tym samouczku nauczyłeś się konfigurować Hugo, tworzyć nowy projekt, dodawać pliki treści, edytować pliki motywów i wdrażać gotową witrynę statyczną. Zalecamy przejrzenie oficjalnej dokumentacji Hugo, aby dowiedzieć się więcej o Hugo i jego bardziej zaawansowanych funkcjach, takich jak funkcje niestandardowe, materia przednia i pakiety budowania CSS/JS.

Co sądzisz o Hugo i innych generatorach statycznych witryn? Daj nam znać w komentarzach poniżej!