Nowe, potężne narzędzia do tworzenia stron internetowych pojawiają się niemal codziennie. My w zespole postanowiliśmy jednak cofnąć się o krok i postawić na to co proste, ale użyteczne. Efekt? Korzyści dla zespołu i dla klienta. Podczas prezentacji opowiem o tym​, ​​​co ​zyskaliśmy oraz wprowadzę słuchaczy w świat Hugo – nowoczesnego generatora stron statycznych.

1. HUGOMAKE WEBDEV FUN AGAIN
Marcin Gajda
The Software House

2. TREND

4. http://example.com http://m.example.com

6. HISTORIA

9. Szukamy czegoś nowego
- Łatwy deploy
- Łatwy upgrade
- Treść rzadko aktualizowana
- Lekki
- Szybkie
- Może tańsze w utrzymaniu?

10. Szukamy czegoś nowego

12. A FAST & MODERN
STATIC WEBSITE
ENGINE

18. Instalacja

19. Instalacja
Ubuntu> sudo apt install hugo

20. Instalacja
Ubuntu> sudo apt install hugo
MacOS> brew install hugo

21. Instalacja
Ubuntu> sudo apt install hugo
MacOS> brew install hugo
Windows:
- ściągnij odpowiednie archiwum z
https://github.com/gohugoio/hugo/releases
- rozpakuj plik do folderu na dysku
- zmień nazwę pliku wykonywalnego na hugo.exe
- dodaj hugo.exe do PATH w zmiennych środowiskowych

22. NOWY PROJEKT

23. Zakładanie nowego projektu
> hugo new site uszanowanko
Congratulations! Your new Hugo site
is created in /projects/uszanowanko.
[more]

24. Zakładanie nowego projektu
> tree

25. Zakładanie nowego projektu
> tree
.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

26. Zakładanie nowego projektu
> tree
.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes Nasz CSS, JavaScript, obrazki
Pliki JSON, YAML, TOML
Dodatkowe szablony
Pobrane motywy
Wzorce postów
Strony, post, etc

27. TREŚĆ

28. Tworzenie nowych stron
> hugo new localization.md

29. Tworzenie nowych stron
> hugo new localization.md
/projects/uszanowanko/content/localization.md created

30. Tworzenie nowych stron
> hugo new lecture/hugo.md

31. Tworzenie nowych stron
> hugo new lecture/hugo.md
typ wpisu nazwa pliku

32. Tworzenie nowych stron
> hugo new lecture/hugo.md
/projects/uszanowanko/content/lecture/hugo.md created

33. Tworzenie nowych stron
> tree content

34. Tworzenie nowych stron
> tree content
content
├── lecture
│ └── hugo.md
└── localization.md

35. Tworzenie nowych stron
> tree content
content
├── lecture
│ └── hugo.md
└── localization.md

36. FRONT MATTER

37. lectures/hugo.md
+++
date = "2017-06-19T14:06:54+02:00"
title = "hugo"
draft = true
+++

38. lectures/hugo.md
+++
date = "2017-06-19T14:06:54+02:00"
title = "hugo"
draft = true
+++
front matter
treść w
markdown

39. lectures/hugo.md
+++
date = "2017-06-19T14:06:54+02:00"
title = "hugo"
draft = true
+++
front matter
# Abstrakt
Nowe *potężne* narzędzia do
tworzenia _stron internetowych_
pojawiają się codziennie. My
jednak postanowiliśmy _cofnąć się
o krok_ i postawić na to co
proste. Efekt?
+ korzyści dla zespołu
+ korzyści dla klienta
treść w
markdown

40. Front matter w TOML
+++
date = "2017-06-19T14:06:54+02:00"
title = "hugo"
draft = true
+++

41. Front matter w JSON
{
date: "2017-06-19T14:06:54+02:00"
title: "hugo"
draft: true
}

42. Front matter w YAML
---
date: "2017-06-19T14:06:54+02:00"
title: hugo
draft: true
---

43. Front matter w YAML
---
date: "2017-06-19T14:06:54+02:00"
title: Hugo - make webdev fun again!
draft: true
slug: hugo-static-website-engine
aliases:
- /2017/06/hugo-make-webdev-fun-again
speaker: Marcin Gajda
time: 60min
---

44. Front matter w YAML
---
date: "2017-06-19T14:06:54+02:00"
title: Hugo - make webdev fun again!
draft: true
slug: hugo-static-website-engine
aliases:
- /2017/06/hugo-make-webdev-fun-again
speaker: Marcin Gajda
time: 60min
---
http://uszanowanko.pl/lectures/hugo-static-website-engine

45. ARCHETYPY

46. archetypes/lecture.md
---
speaker: Speaker name
time: time in minutes
---

47. Wpisu z archetypu
> hugo new lecture/grid.md

48. Wpisu z archetypu
> hugo new lecture/grid.md
/projects/uszanowanko/content/lecture/grid.md created

49. Wpisu z archetypu
> hugo new lecture/grid.md
/projects/uszanowanko/content/lecture/grid.md created
> cat content/lecture/grid.md

50. Wpisu z archetypu
> hugo new lecture/grid.md
/projects/uszanowanko/content/lecture/grid.md created
> cat content/lecture/grid.md
---
date: 2017-06-19T16:48:32+02:00
title: grid
time: time in minutes
speaker: Speaker name
---

52. MOTYW

53. Tworzenie motywu
> hugo new theme doge

54. Tworzenie motywu
themes/doge
├── LICENSE.md
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ └── header.html
├── static
│ ├── css
│ └── js
└── theme.toml

55. Systemy szablonów
- Go templates
- Ace templates
- Amber templates

56. Szablony GO
{{ partial "header.html" . }}
<section>
<h1>{{ .Title }}</h1>
<div>
<article>
{{ .Content }}
</article>
<aside>
Prezenter {{ .Params.speaker }} <br>
Czas trwania {{ .Params.time }}
</aside>
</div>
</section>
{{ partial "footer.html" . }}

58. Co jest wbudowane w HUGO i Szablony GO?
- dziesiątki filtrów i funkcji
- warunki, iteratory, magazyn danych
- bloki i “partiale”
- generowanie linków
- taksonomie
- paginacja
- tworzenie menu nawigacyjnego
- kanał RSS
- komentarze Disqus
- informacje o repozytorium GIT
- generowanie robots.txt
a także…

59. WIELOJĘZYCZNOŚĆ

60. config.yml
defaultContentLanguage: pl
enableMissingTranslationPlaceholders: true
defaultContentLanguageInSubdir: true
languages:
pl:
title: Strona internetowa Uszanowanka!
en:
title: WOW, such programming, very agile!

61. Wielojęzyczne posty
content
├── localization.en.md
├── localization.pl.md
└── lectures
├── grid.en.md
├── grid.pl.md
├── hugo.en.md
└── hugo.pl.md

63. DODATKOWE
ŹRÓDŁA
DANYCH

64. Wczytywanie z JSON, YAML, TOML
data/meetupjs/FrontemDoDeva.json
{{ range $.Site.Data.meetupjs.FrontemDoDeva.participants }}
<li>{{ .fullName }}</li>
{{ end }}

65. JSON lub CSV z zewnątrz
<div>
{{ $data := getJSON "http://weather.tld/gliwice.json" }}
{{ partial “weather.html” (index $data $meetupDay)}}
</div>

66. Listowanie folderu
{{ $files := readDir “/static/slides” }}
{{ range $files }}
<img src=”/slides/{{ .Name | relURL }}” />
{{ end }}

68. WYJŚCIE

69. Wbudowane formaty wyjściowe
- HTML
- AMP
- Calendar
- RSS
- JSON
- CSV
- CSS

70. Własny format wyjściowy
outputFormats:
epubFormat
mediaType text/html
baseName: epub
isPlainText: true
Path: epub

71. Własny format wyjściowy
outputFormats:
epubFormat
mediaType text/html
baseName: epub
isPlainText: true
Path: epub ---
outputs:
- html
- epub
---

73. WYSZUKIWARKA

76. Lunr.js
+ Indeks to zwykła tablica JS z treścią
+ Istnieją generatory indeksów
- Wymaga załadowania całego indeksu do przeglądarki
- Trzeba zaprogramować wyświetlanie wyników w JS

77. hugoidx (Bleve)
+ Szybsze przeszukiwanie
+ Żądanie AJAX będzie zwracać tylko wyniki
- Wymaga backendu do uruchomienia Bleve
- Wymaga znajomości środowiska GO
- Trzeba zaprogramować wyświetlanie wyników w JS

78. GENEROWANIE

79. Generowanie strony
> hugo
> hugo --buildDrafts

80. Wygenerowana strona
public
├── css
├── en
│ ├── index.html
│ ├── index.xml
│ ├── lecture
│ │ ├── grid
│ │ │ └── index.html
│ │ ├── hugo
│ │ │ └── index.html
│ │ ├── index.html
│ │ └── index.xml
│ ├── localization
│ │ └── index.html
│ └── sitemap.xml
├── index.html
├── js
├── pl
...
└── sitemap.xml

81. Tryb developerski
> hugo server
> hugo server --buildDrafts

82. Tryb developerski
> hugo server
> hugo server --buildDrafts
LiveReload

83. WDROŻENIE

84. WDROŻENIE
deploy

85. Jak to wygląda u nas?
- Korzystamy z BitBucket Pipelines
- Generujemy konfigurację z użyciem confd
- Generujemy stronę z HUGO
- Czyścimy bucket na AWS S3
- Wysyłamy nowe pliki na AWS S3
- Gotowe

86. Ewentualnie...
> hugo server --baseURL=http://example.com/
--port=80
--appendPort=false
--disableLiveReload=true
--bind=87.245.198.50

87. Co zyskaliśmy?
- Łatwość modyfikacji

88. Co zyskaliśmy?
- Łatwość modyfikacji
- Oszczędność z powodu możliwości użycia S3

89. Co zyskaliśmy?
- Łatwość modyfikacji
- Oszczędność z powodu możliwości użycia S3
- Szybkość działania

90. Szybkość?

91. Szybkość?
2.61s

92. Szybkość?
2.61s
0.93s

93. https://next.smashingmagazine.com/

94. Pytania?
@marcingajda91