Po latach budowania oprogramowania i pisania dokumentacji technicznej, postanowiłem stworzyć blog, aby podzielić się swoim doświadczeniem i pomóc innym w podobnych podróżach.
Wybór platformy
Chociaż budowanie własnego skryptu publikacyjnego Markdown-to-HTML jest pomysłem na przyszłość, moim natychmiastowym priorytetem było uzyskanie bloga online szybko.
W dzisiejszych czasach nie sądzę, że istnieje trudność w tworzeniu osobistej strony internetowej. Istnieje wiele różnych opcji, które pomagają w tym wysiłku.
- CMS (np. WordPress, Content Hub, Joomla itp.): Chociaż platformy takie jak WordPress są potężne, czuły się nadmierne dla statycznego bloga treści.
- Jekyll: To oprogramowanie wydaje się być idealne i szeroko stosowane przez innych programistów do hostingu blogów, ale z powodu mojego braku doświadczenia z Ruby, zdecydowałem się nie używać tego.
- Hugo jest napisany w Go i wykorzystuje znajomą syntazę szablonów Go (jeśli zdarzy Ci się dużo kodować w Go), podczas renderowania stron w Markdown (podobnie jak Jekyll).
- 11ty, Astro, Hexo i inne alternatywy oparte na Node.js. Jest to kwestia preferencji, ale osobiście postanowiłem zminimalizować użycie narzędzi Node.js. Podczas gdy istnieje wiele potężnych narzędzi, ekosystem Node.js jest znany z szybkich zmian, co często doprowadziło mnie do tego, że nie mogłem uruchomić starych projektów, które naturalnie miały wiele starych zależności.
Ustawienie Hugo
Po wyprodukowaniu znacznej ilości dokumentacji na temat moich wcześniejszych projektów związanych z oprogramowaniem, czuję się bardzo pewny używania Markdown i terminalu opartego na edytorze tekstu do mojego pisania.
Korzystanie z repozytorium GitHub
Wcześniej już stworzyłem stronę GitHub Pages z plikami miejsca i podłączyłem do niej domenę, więc aby wypełnić pliki w istniejącym repo, musisz wprowadzić następujące polecenie:
hugo new site . --force
To wypełni bieżący katalog repozytorium plikami, które są niezbędne do uruchomienia strony internetowej Hugo. Po tym, konieczne było ustawienie tematu i innych parametrów whugo.tomlPo ustawieniu wszystkiego możliwe jest uruchomienie serwera, wpisując polecenie:hugo server
Uruchamianie serwera w trybie rozwoju
Strona internetowa dostępna jest odlocalhostPonieważ rozwijam na zdalnej chmurze VM, dostęp do lokalnego serwera Hugo przezlocalhostByło konieczne, aby bezpiecznie narazić instancję localhost na świat zewnętrzny - dla takich potrzeb używany jest odwrotny proxy.
Podczas gdy balansery obciążenia i odwrotne proxy, takie jak Nginx, są dość powszechne i popularne, wybrałemCaddyaby obsługiwać moją stronę deweloperską, ponieważ ustawia certyfikaty SSL (za pośrednictwem Let's Encrypt) bez wysiłku.CaddyZrobione jest zCaddyfile, gdzie dla domeny zainteresowania piszeszreverse_proxyoświadczenie z koniecznym portem:
test-blog-domain.com {
reverse_proxy localhost:1313
}
Po uruchomieniu Caddy z powyższą konfiguracją, strona rozwojowa będzie dostępna odhttps://test-blog-domain.com(Z uwagi na to, że jedenARejestracja DNS dlatest-blog-domain.comjest wypełniony publicznym adresem IP VM).
Dodaj temat
Hugo ma kilka darmowych tematów, które są publicznie dostępne na GitHub. Co trzeba zrobić, aby zainstalować jeden, to klonować repozytorium z tematem, a następnie zaktualizowaćthemeparametrów whugo.tomlWybrałem temat o nazwiecactusPo zainstalowaniu dostałem błąd budowy, który narzeka, że szablon asynchroniczny Google Analytics nie został znaleziony:
Error: error building site: render: failed to render pages: render of "/" failed: "/home/user/projects/nexo-tech.github.io/themes/cactus/layouts/_default/baseof.html:3:3": execute of template failed: template: index.html:3:3: executing "index.html" at <partial "head.html" .>: error calling partial: execute of template failed: html/template:partials/head.html:47:16: no such template "_internal/google_analytics_async.html"
make: *** [Makefile:2: up] Error
Odpowiedź na taki problem można znaleźć wgithubSpołeczność Hugo jest aktywna, a wiele problemów – w tym ten błąd Google Analytics – ma istniejące poprawki lub dyskusje na GitHub.
Po naprawieniu innych ostrzeżeń o odrzuceniu, strona zaczęła działać:
Wdrażanie strony internetowej do CDN: Strony GitHub
Istnieje wiele sposobów na wdrożenie statycznej strony internetowej, a w większości przypadków wymaga to posiadania hostingu lub serwera. Zazwyczaj te nie są darmowe lub mają ograniczony plan; istnieją jednak wyjątki, takie jak Strony GitHub. Możliwe jest obsługa treści statycznych z określonej gałęzi repozytorium GitHub lub użycie wstępnie skonstruowanych działań GitHub, które opierają się na tworzeniu artefaktów i wdrażaniu ich w niestandardowy sposób.
Wiedząc, że osobiste konta GitHub są bardzo ograniczone w przestrzeni do przechowywania artefaktów, a zarządzanie tą przestrzenią do przechowywania jest nudne, zdecydowałem się na prostsze rozwiązanie, w którym statyczne zasoby stron internetowych zostaną zaktualizowane w wstępnie zdefiniowanej gałęzi git (gh-pagesNa szczęście, istniejąactionsSpecjalnie dla HUGO, dokładnie w tym celu:
- action-hugo przez Shohei Ueda. prosty sposób na zainstalowanie Hugo w środowisku GitHub Actions
- Akcje-gh-strony Ponadto, przez Shohei Ueda, ta akcja przenosi aktywa statyczne do określonej gałęzi.
Oto kod przepływu pracy GitHub Actions, który wdroży Hugo do stron gh. Należy pamiętać, że jeśli istnieje potrzeba niestandardowej domeny, plik CNAME musi zostać skopiowany dopublicKierownik przed uruchomieniemgh-pagesPonadto uprawnienia przepływu pracy repozytorium muszą być ustawione na „Czytaj i pisz” (można je znaleźć wSettings > Actions > General) w
name: Build and Deploy Hugo
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v3
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
extended: true
- name: Build site
run: hugo --minify
- name: Add CNAME file
run: cp CNAME public/CNAME
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
publish_branch: gh-pages
Po zakończeniu wdrożenia witryna powinna zostać przesłana do GitHub CDN. Upewnij się, że skonfigurujesz strony GitHub dla oddziału zawierającego wbudowane artefakty w przypadku, gdy witryna nie działa.
Dzięki uruchomieniu i wdrożeniu Hugo mogę teraz skupić się na tym, co ma znaczenie – dzielenie się wglądami technicznymi z mojego doświadczenia.
Związane zasoby
- Repository dla tej strony internetowej
- Hugo szybki start
- Konfigurowanie ustawień DNS dla stron GitHub
- Kaktusy dla Hugo
- Google Analytics w Hugo
- Caddy reverse proxy szybkie uruchomienie
