Blog o programowaniu, nowych technologiach i życiu programisty w wielkim mieście.

Jak zbudować stronę www z Hugo i Netlify

Aby rozpocząć pracę ze statycznym generatorem stron Hugo należy zainstalować Git oraz Go.

Instalacja Hugo przy pomocy Chocolatey na maszynie z systemem Windows

Jeśli nie posiadamy zainstalowanego Chocolatey to wystarczy wpisać w Windows PowerShell:

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Pamiętajmy aby uruchomić PowerShell jako administrator.

Sprawdźmy czy prawidłowo się zainstalował:

PS C:\WINDOWS\system32> choco
Chocolatey v0.10.15
Please run 'choco -?' or 'choco <command> -?' for help menu.

A następnie przechodzimy do instalacji Hugo.

Wpisujemy w wierszu poleceń (cmd.exe - windows) ponownie w trybie administratora:

choco install hugo -confirm

Jeśli instalacja następuje prawidłowo to powinniśmy zobaczyć coś podobnego do poniższego wydruku z wiersza poleceń:

Installing the following packages:
hugo
By installing you accept licenses for the packages.

hugo v0.57.2 [Approved]
hugo package files install completed. Performing other installation steps.
Downloading hugo 64 bit
  from 'https://github.com/gohugoio/hugo/releases/download/v0.57.2/hugo_0.57.2_Windows-64bit.zip'
Progress: 100% - Completed download of C:\Users\jacek\AppData\Local\Temp\chocolatey\hugo\0.57.2\hugo_0.57.2_Windows-64bit.zip (11.48 MB).
Download of hugo_0.57.2_Windows-64bit.zip (11.48 MB) completed.
Hashes match.
Extracting C:\Users\jacek\AppData\Local\Temp\chocolatey\hugo\0.57.2\hugo_0.57.2_Windows-64bit.zip to C:\ProgramData\chocolatey\lib\hugo\tools...
C:\ProgramData\chocolatey\lib\hugo\tools
 ShimGen has successfully created a shim for hugo.exe
 The install of hugo was successful.
  Software installed to 'C:\ProgramData\chocolatey\lib\hugo\tools'

Chocolatey installed 1/1 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

Możemy sprawdzić czy na pewno instalacja przebiegła prawidłowo:

hugo help

Po odpaleniu polecenia powinniśmy zobaczyć wydruk w wieszu poleceń:

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  deploy      Deploy your site to a Cloud provider.
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  mod         Various Hugo Modules helpers.
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Flags:
  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/
  -D, --buildDrafts            include content marked as draft
  -E, --buildExpired           include expired content
  -F, --buildFuture            include content with publishdate in the future
      --cacheDir string        filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
      --cleanDestinationDir    remove files from destination not found in static directories
      --config string          config file (default is path/config.yaml|json|toml)
      --configDir string       config dir (default "config")
  -c, --contentDir string      filesystem path to content directory
      --debug                  debug output
  -d, --destination string     filesystem path to write files to
      --disableKinds strings   disable different kind of pages (home, RSS etc.)
      --enableGitInfo          add Git revision, date and author info to the pages
  -e, --environment string     build environment
      --forceSyncStatic        copy all files when static is changed.
      --gc                     enable to run some cleanup tasks (remove unused cache files) after the build
  -h, --help                   help for hugo
      --i18n-warnings          print missing translations
      --ignoreCache            ignores the cache directory
      --ignoreVendor           ignores any _vendor directory
  -l, --layoutDir string       filesystem path to layout directory
      --log                    enable Logging
      --logFile string         log File path (if set, logging enabled automatically)
      --minify                 minify any supported output format (HTML, XML etc.)
      --noChmod                don't sync permission mode of files
      --noTimes                don't sync modification time of files
      --path-warnings          print warnings on duplicate target paths etc.
      --quiet                  build in quiet mode
      --renderToMemory         render to memory (only useful for benchmark testing)
  -s, --source string          filesystem path to read files relative from
      --templateMetrics        display metrics about template executions
      --templateMetricsHints   calculate some improvement hints when combined with --templateMetrics
  -t, --theme strings          themes to use (located in /themes/THEMENAME/)
      --themesDir string       filesystem path to themes directory
      --trace file             write trace to file (not useful in general)
  -v, --verbose                verbose output
      --verboseLog             verbose logging
  -w, --watch                  watch filesystem for changes and recreate as needed

Additional help topics:
  hugo check   Contains some verification checks

Use "hugo [command] --help" for more information about a command.

Jak stworzyć swoją pierwszą stronę w Hugo

Praca w Hugo jest naprawdę bardzo instynktowna. Aby stworzyć swoją pierwszą stronę wystarczy uruchomić polecenie w wierszu poleceń:

hugo new site nazwa_naszej_strony

Po uruchomieniu powinniśmy zobaczyć następujący tekst:

Congratulations! Your new Hugo site is created in C:\[katalog w ktorym stworzylismy projekt].

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Świetnie, stworzyłeś swój pierwszy projekt w Hugo !!!

Przy tworzeniu swojego pierwszego projektu w Hugo, wiekszość korzysta już z ogólnie dostępnych skórek (hugo theme). My będziemy bardziej ambitni i spróbujemy stworzyć własną skórkę!

Stworzenie własnej skórki w Hugo jest banalnie proste, wystarczy wpisać w wierszu poleceń:

hugo new theme nazwa_naszej_skorki

Struktura folderów po stworzeniu nowej skórki:

Struktura folderów po stworzeniu nowej skórki w Hugo

Następnie w config.toml dodajemy:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "nazwa_naszej_skorki"

W pliku layouts\index.html dodajemy:

{{ define "main" }}
  <h1>Witaj swiecie!</h1>
{{ end }}

Sprawdzamy czy w pliku layouts_default\baseof.html znajduje się następujący kod:

<!DOCTYPE html>
<html>
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        <div id="content">
        {{- block "main" . }}{{- end }}
        </div>
        {{- partial "footer.html" . -}}
    </body>
</html>

Jest on tworzony automatycznie przez Hugo.

Jeśli wszystko jest na miejscu to czas na uruchomienie naszej pierwszej strony w Hugo!

W wierszu poleceń wpisujemy:

hugo server

Jeśli wszystko poszlo po naszej myśli to pod adresem: http://localhost:1313/ powinniśmy zobaczyć naszą stronę.

Czas aby nasza strona zawitała na serwerach Netlify :)

Jak umieścić stronę WWW na Netlify

Stworzenie konta na Netlify jest bardzo proste i przede wszystkim darmowe. Możemy to zrobić na cztery różne sposoby: GitHub, GitLab, Bitbucket lub konto Email.

Jak stworzyć konto na Netlify

Następnie dodajemy nowy projekt i wybieramy repozytorium:

Dodawanie nowego projektu do Netlify

Wpisujemy komendę do zbudowania strony i nazwę katalogu:

Ustawienia strony dla Hugo w Netlify

Oraz wpisujemy wersję hugo w Environment variables:

Ustawawiamy wersję Hugo w Netlify

Gotowe! Po paru minutach (a w przypadku statycznego generatora stron Hugo są to sekundy) powinniśmy zobaczyć naszą stronę umieszczoną pod domeną Netlify. Oczywiście możemy ustawić własną domenę w Netlify ale to już zostawiam Wam.

Udostępnij