Dlaczego Hugo? Trochę poczytałem, równolegle prowadzę też stronę oparta o silnik WordPress. Jak ktoś jest chętny, to może zajrzeć o tu Piranie. Niemniej jednak WordPress na prowadzenie takiej strony chyba uznałem za armatę na słonia. WordPress jest dobry, jak trzeba komuś przygotować silnik i po krótkim przeszkoleniu wdrożyć w dodawanie nowych treści. Tutaj zamierzam się zajmować tym sam, a że chciałem czegoś nowego spróbować to voilà.

Stan wyjściowy

Dla kogo ten poradnik? Pewnie może mieć szersze zastosowanie, ale w przykładzie jest krok po kroku pokazane to dla Debiana Trixie, bo taki obecnie mamy aktualny.

Debian GNU/Linux 13 (trixie) x86_64

No to jedziemy

W pierwszej kolejności wystarczy pociągnąć, to co będzie nam potrzebne. Git jest trochę opcjonalny, ale polecam od początku, jeśli pracujecie z kodem czy to w programowaniu, czy to nawet w pisaniu strony internetowej wersjonować i trzymać swoje dzieła w repozytorium. Potem to już wchodzi w krew i życie staje się łatwiejsze :)

1

sudo apt install hugo git

Ustawiłem się na katalogu, gdzie trzymam wszystkie gitowe tematy i stworzyłem nową stronę, a następnie przechodzę do katalogu i, jak już wspomniałem, inicjuję też git’a co jest oczywiście opcjonalne.

1
2
3

hugo new site mitr.us
cd mitr.us
git init

Następnie, trzeba załadować jakiś motyw. Zajrzałem na themes.gohugo.io i ja akurat wybrałem https://github.com/vaga/hugo-theme-m10c. Zgodnie z podanym przepisem trzeba sobie dociągnąć motyw klonując go do swojego projektu. Oczywiście jestem w katalogu głównym strony.

1

git clone https://github.com/vaga/hugo-theme-m10c.git themes/hugo-theme-m10c

I na koniec w głównym katalogu projektu, poddałem edycji plik hugo.toml, ustawiając parametry swojej strony oraz wybrany motyw.

baseURL = 'https://mitr.us/'
languageCode = 'pl-pl'
title = 'mitr.us'
theme = "hugo-theme-m10c"

Po tej operacji pozwoliłem sobie już stronę odpalić w wierszu poleceń wpisując:

1

hugo server

Szybka wizyta pod adresem http://localhost:1313 i ujrzałem to co chiałem :)

To jeszcze małe polerowanie

W katalogu motywu podmieniłem avatar.jpg swoim obrazkiem, jaki tu widzicie. Dla łatwości podegrałem plik, zmieniając nazwę, żeby nie szukać, jak wyświetlić inny awatar.

Następnie poddałem edycji sam motyw (w kataogu themes/hugo-theme-m10c edytujemy plik config.toml), żeby w tej belce po lewej coś dodać.

[module]
  [module.hugoVersion]
    extended = true
    min = "0.128.0"

[menu]
  [[menu.main]]
    identifier = "home"
    name = "Główna"
    url = "/"
    weight = 1
  [[menu.main]]
    identifier = "tags"
    name = "Tagi"
    url = "/tags/"
    weight = 2
  [[menu.main]]
    identifier = "about"
    name = "O autorze"
    url = "/about/"
    weight = 3

[params]
  author = "mitr.us"
  description = "mitr.us czyli blog o wszystkim ale najczęściej techniczno-muzyczny"
  menu_item_separator = " - "
  [[params.social]]
    icon = "brand-github"
    name = "Github"
    url = "https://github.com/pmitrus"
  [[params.social]]
    icon = "brand-youtube"
    name = "YouTube"
    url = "https://www.youtube.com/@pmitrus"


 # Red theme
   [params.style]
     darkestColor = "#242930"
     darkColor = "#353b43"
     lightColor = "#afbac4"
     lightestColor = "#ffffff"
     primaryColor = "#d35050"

W katalogu motywu jest też fajny podkatalog z przykładami, stamtąd zabrałem plik about.md i wgrałem do katalogu content oraz uzupełniłem swoim tekstem. Następnie zabrałem się za tworzenie tego wpisu:

1

hugo new content content/posts/moj-pierwszy-post.md

W tle po każdym ctrl+s serwer od razu odświeża sprawę i widzimy, co się dzieje on-line. W poście oczywiście należy zmienić:

draft = false

żeby post sie pojawił.

Tu opcjonalnie można korzystać z funkcjonalności pracy z draftami i budowaniem stron bez zmiany powyższego parametru do tego służą polecenia (chyba zamiennie, nie testowałem):

hugo server --buildDrafts
hugo server -D

Tu do dalszej edycji polecam przeklejać z tych plików w “themes/hugo-theme-m10c/exampleSite/content/posts/” jakieś przykładowe kawałki i oglądać co się dzieje. Tak metodą prób i błędów zbudowałem tego oto posta.

Na koniec jak to przygotować do wgrania na stronę

Te kawałek tyczy się samej funkcjonalności Hugo. Dostęp do ftp’a Waszego serwera. Konfiguracje np. FileZilla zakładam, że macie opanowaną.

Aby wgrać stronę Hugo na prawdziwy serwer, należy ją najpierw zbudować lokalnie, a następnie skopiować wygenerowane pliki statyczne (znajdujące się w katalogu public/) na serwer docelowy.

W katalogu głównym strony wykonujemy polecenie

1

hugo

ja otrzymałem

Start building sites … 
hugo v0.131.0+extended linux/amd64 BuildDate=2024-09-03T01:15:37Z VendorInfo=debian:0.131.0-1


                   | EN  
-------------------+-----
  Pages            | 12  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  2  
  Cleaned          |  0  

Total in 81 ms

I z katalogu public/ skopiowałem FileZillą wszystkie pliki i katalogi tam obecne do katalogu public_html na moim serwerze. I to jest to co obecnie widzicie.

Co przede mną?

Zabieram się za rozkminianie, jak działają tagi, bo żeby ten blog miał jakiś porządek, trzeba będzie te wpisy jakoś poukładać.

Dzięki, że przebrnąłeś/łaś osobo poszukująca (ups miało nie być politycznie :))