Hugo dla początkujących

psycho | 2020-06-08 18:43:04 UTC | #1

Spis treści:

1. Wstęp
2. Instalacja Hugo
   • Instalacja między-platformowa
   • Instalacja na Windows
   • Instalacja frameworka
   • Ustawienie zmiennej środowiskowej
   • Instalacja na Linux
   • Menadżer pakietów Snap
   • Debian/Ubuntu
   • Arch Linux
   • CentOS, Fedora, Red Hat
   • Solus
   • OpenBSD
   • Instalacja na macOS
   • Instalacja przez Homebrew
   • Weryfikacja instalacji
3. Aktualizacja Hugo
4. Szybki start, czyli stwórz swoją pierwszą stronę przy użyciu Hugo
   + Krok 1: Utworzenie strony
   + Krok 2: Dodanie motywu
   + Krok 3: Dodanie zawartości do naszej strony
   + Krok 4: Zbudowanie strony i uruchomienie serwera
   + Krok 5:
5. Deployment strony, czyli niech zobaczy nas świat
   + Krok 1: Instalacja nginx
   + Krok 2: Konfiguracja vHost (wirtualny host) dla naszej strony
   + Krok 3: Przeładowanie plików konfiguracyjnych nginx
6. Zakończenie

1. Wstęp

Hugo jest statycznym generatorem stron HTML i CSS napisanym w aplikacji Go. Jest on zoptymalizowany pod kątem szybkości, łatwości obsługi i możliwości konfiguracji. Hugo pobiera katalog z treścią i szablonami i przekształca je w pełną stronę HTML.

Hugo polega na plikach Markdown z metadanymi, a Ty możesz uruchomić Hugo z dowolnego katalogu. Działa to dobrze w przypadku hostów współdzielonych i innych systemów, w których nie masz uprzywilejowanego konta.

Hugo w ułamku sekundy tworzy typową stronę internetową o umiarkowanym rozmiarze. Dobrą zasadą jest to, że każdy kawałek zawartości renderuje w około 1 milisekundę.

Hugo jest przeznaczony do pracy dla każdego rodzaju stron internetowych, w tym blogów, książek i dokumentów.

2. Instalacja Hugo

Gdy wstęp mamy za sobą zabierzmy się za to co najważniejsze, czyli instalację i konfigurację naszego Hugo

[details=”Instalacja międzyplatformowa”]

Instalacja między platformowa to ten typ instalacji, który wygląda tak samo dla wszystkich platform.
Aby dokonać takiej instalacji należy wejść na listę wersji projektu na GitHub, a następnie pobrać ją na swój serwer.

Najlepszym miejscem jest instalacja tego w miejscu gdzie kieruje zmienna PATH w Twoim systemie. W systemach linuxopodobnych najczęściej jest to /usr/local/bin.

[/details]

[details=”Instalacja na Windows”]

Aby zainstalować na naszym Windowsie Hugo musimy zacząć od pobrania wybranej przez nas wersji (najlepiej najnowszej) na GitHubie projektu.

Gdy już pobierzemy wybraną przez nas wersję musimy stworzyć dla niej miejsce.
W naszym poradniku miejscem gdzie znajdować się będzie nasze Hugo jest C:\Hugo\bin, a więc zaczynamy od utworzenia tych folderów.

Na samym początku tworzymy folder Hugo na naszym Dysku podpisanym literką C:

Potem przechodzimy do naszego nowo utworzonego folderu i tworzymy w nim folder bin.

Następnie przechodzimy do folderu bin i przenosimy tutaj archiwum, które pobraliśmy przed chwilą.

Teraz wypakowujemy archiwum do aktualnego folderu.

Powinniśmy mieć takie pliki jak na obrazku powyżej. Jeśli tak jest możemy usunąć już nasze archiwum i tak o to zakończyliśmy instalację naszego Hugo w systemie Windows, lecz pozostaje nam jeszcze dodanie informacji o tym gdzie jest nasz framework do ścieżki PATH w naszym systemie.

[details=”Ustawienie zmiennej środowiskowej dla Hugo”]

1. Kliknij prawym przyciskiem myszy na przycisk Start.
2. Kliknąć na System.
3. Kliknąć na Zaawansowane ustawienia systemowe po lewej stronie.
4. Kliknąć na przycisk Zmienne środowiskowe… na dole.
5. W sekcji Zmienne użytkownika znaleźć wiersz, który zaczyna się od PATH (PATH napisany CapsLockiem).
6. Następnie wciskamy przycisk Nowa.
7. W nowo otwartym oknie jako nazwę należy podać PATH, a w oknie wartości wybrać folder gdzie Twój Hugo został wypakowany, czyli według tego poradnika będzie to C:\Hugo\bin. Naciśnij Enter, gdy skończysz pisać.
8. Kliknij OK w każdym oknie, aby wyjść.

[/details]

[/details]

[details=”Instalacja na Linux”]

W przypadku instalacji na Linux mamy do wyboru więcej opcji niż instalacja na Windows, zależnie od naszych upodobań i systemu możemy użyć domyślnego menadżera pakietów, snapa, czy homebrew.
W tej części poradnika zajmiemy się tylko dwoma pierwszymi opcjami.

[details=”Instalacja Hugo przez Snap”]

Jeśli chcemy by nasz Hugo mógł obsłużyć preprocesory CSS takie jak Sass czy SCSS potrzebujemy wersji rozszerzonej, możemy ją zainstalować poleceniem:

snap install hugo --channel=extended

Jeśli jednak nie potrzebujemy takich “bajerów” możemy użyć zwykłego polecenia:

snap install hugo

:warning: UWAGA WAŻNE!

Hugo zainstalowany za pośrednictwem Snapa może pisać tylko w katalogach $HOME i gvfs prowadzonych przez użytkownika, ponieważ Snaps jest zamknięty i zabezpieczony. Więcej informacji na ten temat znajduje się również w powiązanym wydaniu GitHuba.

[/details]

[details=”Debian/Ubuntu”]

Jeśli korzystamy z systemów rodziny Debiana to dzięki uprzejmości użytkowników możemy zainstalować nasz framework jedną prostą komendą przy użyciu apt-get

sudo apt-get install hugo

[/details]

[details=”Arch Linux”]
Jeśli korzystamy z systemu Arch Linux możemy skorzystać z polecenia pacman do instalacji Hugo:

sudo pacman -Syu hugo

[/details]

[details=”CentOS, Fedora, Red Hat”]
Jeśli nasz wybór padł na systemy rodziny Red Hat Linux to Hugo zainstalujemy poleceniem:

sudo dnf install hugo

[/details]

[details=”Solus”]
Solus posiada Hugo w swoich repozytoriach, więc instalacja będzie równie prosta:

sudo eopkg install hugo

[/details]

[details=”OpenBSD”]
System OpenBSD również posiada w swoich repozytoriach Hugo, więc zainstalujemy go komendą:

doas pkg_add hugo

[/details]

[/details]

[details=”Instalacja na MacOS”]

[details=”Instalacja przez Homebrew”]

Naszym pierwszym krokiem będzie instalacja Homebrew jeśli go jeszcze nie mamy. (Jeśli masz już Homebrew możesz spokojnie przejść do następnego kroku)

Homebrew możemy zainstalować poleceniem:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Następnie należy zainstalować Hugo poleceniem:

brew install hugo

[/details]

[/details]

[details=”Weryfikacja instalacji”]

W celu weryfikacji naszej instalacji wpiszmy w naszej konsoli polecenie:

hugo help

Jeśli w odpowiedzi dostaniemy coś w podobnieństwie do tego:

To znaczy, że poprawnie zainstalowaliśmy nasze Hugo!

[/details]

3. Aktualizacja Hugo

brew upgrade hugo

apt-get upgrade hugo

hugo new site nazwa

hugo new site tutorial

//Przejście do katalogu
cd tutorial
//Zainicjowanie i dodanie modułu motywu do naszej strony
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

echo 'theme = "ananke"' >> config.toml

hugo new posts/firstpost.md

---
title: "Firstpost"
date: 2020-05-22T02:31:08+02:00
draft: true
---

hugo

hugo -D

hugo server

hugo server -D

apt install nginx

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                try_files $uri $uri/ =404;
        }
}

sudo nano /etc/nginx/sites-available/przyklad.pl

server {
  listen 80; #Informujemy na jakim porcie ma odpowiadać nasza strona dla interfejsu IPv4
  listen [::]:80; #Informujemy na jakim porcie ma odpowiadać nasza strona dla interfejsu IPv6

  root /var/www/przyklad.pl/public; # Informujemy gdzie zbudowane znajdują się pliki naszej strony

  server_name przyklad.pl; #Informujemy serwer na jakiej domenie ma odpowiadać nasza strona, gdy jej nie mamy i chcemy, aby adres IP odpowiadal naszej stronie uzywamy `_` zamiast domeny

  location / {
                try_files $uri $uri/ =404;
  }
}

nginx -t

systemctl reload nginx