Jak zbudować prosty blog z generatorem witryn hexo statycznych
Ten samouczek pokaże, w jaki sposób możesz skonfigurować prosty blog za pomocą statycznego generatora witryn, który jest bardzo szybki i łatwy w użyciu.
Co to jest SSG?
SSG lub statyczny generator witryn to aplikacja internetowa, która przekształca dynamiczną treść na stronie internetowej na treść statyczną zwykle przechowywaną lokalnie. Statyczne generatory witryn nie wymagają baz danych i backendów, eliminując w ten sposób potrzebę nauki kodowania. Koncentruje się głównie na pisaniu i prezentacji treści.
SSG vs. CMS
Najpopularniejszym sposobem tworzenia stron internetowych i zarządzania treściami jest korzystanie z CMS lub systemów zarządzania treścią, takimi jak WordPress, Drupal, Joomla itp.
Systemy CMS działają poprzez bezpośrednio tworzenie i zarządzanie treścią za pomocą interaktywnego interfejsu. Ponieważ dane w CMS są pobierane z bazy danych, CMS są bardzo powolne, ponieważ treść jest pobierana i służyła jako treść dynamiczna. Systemy CMS są również podatne na luki w zabezpieczeniach, ponieważ opierają się na zewnętrznych wtyczkach napisanych przez innych programistów w celu zwiększenia funkcjonalności.
Z drugiej strony, statyczne generatory witryn działają, tworząc media offline treści, takie jak redaktorzy tekstu i renderuje ostateczny widok strony po publikacji. Ponieważ treść jest renderowana lokalnie, bez potrzeby bazy danych, strona jest szybsza, a prędkości obciążenia są niezwykle szybkie.
Statyczne generatory witryn są wykonane z skompilowanego kodu, który działa jako silnik do renderowania opublikowanej treści.
Jak zbudować statyczny blog z Hexo
Jednym z popularnych wyborów do budowy statycznej strony jest Hexo.
Hexo to prosta, szybka i potężna aplikacja SSG napisana w NodeJS. Chociaż istnieją inne opcje budowania strony statycznej, Hexo umożliwia dostosowanie witryny i zintegrowanie różnych narzędzi.
Spójrzmy na to, jak możemy ustawić prostą stronę statyczną z Hexo.
Instalowanie Hexo
Zanim będziemy mogli zbudować witrynę, musimy skonfigurować wymagania hexo i zainstalować. W tym celu potrzebujemy nodejs i git.
Zacznij od aktualizacji systemu:
Sudo apt-get Aktualizacja
Sudo apt-get Aktualizacja
Po zaktualizowaniu systemu zainstaluj git
sudo apt-get instaluj git
Następnie zainstaluj NodeJS z węzłów za pomocą polecenia:
curl -sl https: // deb.węzłów.com/setup_14.x | sudo -e bash -
apt -get instal -y nodeJs
Po zainstalowaniu NodeJS możemy przystąpić do instalacji Hexo za pomocą polecenia:
NPM instaluj -g hexo -cli
Praca z Hexo
Po zainstalowaniu Hexo możesz utworzyć witrynę i opublikować treść. Spójrzmy na to, jak pracować z Hexo. Pamiętaj, że jest to szybki, prosty przewodnik. Zapoznaj się z dokumentacją, aby dowiedzieć się więcej.
Tworzenie witryny
Aby utworzyć nową witrynę Hexo, użyj poniższego polecenia:
Hexo Init Hexosit
CD sześciokąt
Instalacja NPM
Zrozumienie struktury katalogu sześciokątnego
Po zainicjowaniu nowej witryny Hexo otrzymasz strukturę katalogu, taką jak ta poniżej:
-rw-r-r-- 1 cs cs 0 lutego 8 20:51 _Config.krajobraz.yml
-RW-R-R-1 CS CS 2439 8 lutego 20:51 _Config.YML DRWXR-XR-X 1 CS CS 4096 8 lutego 20:51 Node_modules
-RW-R-R-- 1 CS CS 615 8 lutego 20:51 Pakiet.JSON
-RW-R-R-1 CS CS 56716 8 lutego 20:51 Pakiet Pakiet.JSON DRWXR-XR-X 1 CS CS 4096 lutego 8 20:51 rusztowania drwxr-xr-x 1 CS CS 4096 lutego 8 20:51 Źródło DRWXR-XR-X 1 CS CS 4096 lutego 8 20:51 Tematy
Pierwszy plik to _Config.YML zawiera wszystkie ustawienia Twojej witryny. Upewnij się, aby zmodyfikować go przed wdrożeniem witryny, ponieważ będzie ona zawierała wartości domyślne.
Następny plik to pakiet.plik JSON, który zawiera dane i konfiguracje aplikacji Nodejs. Tutaj znajdziesz zainstalowane pakiety i ich wersje.
Możesz dowiedzieć się więcej o pakiecie.JSON ze strony zasobów poniżej:
https: // dokumenty.NPMJS.com/cli/v6/konfigurowanie-npm/pakiet-json
Tworzenie bloga
Aby utworzyć prosty blog w Hexo, użyj polecenia:
Hexo nowy blog „Hello World Blog”
Po utworzeniu możesz złożyć plik Markdown w katalogu /źródło /_posts. Będziesz musiał użyć języka znaczników markow.
Tworzenie nowej strony
Tworzenie strony w Hexo jest proste; Użyj polecenia:
Hexo Nowa strona „Strona-2”
Źródło strony znajduje się pod/źródłem/strona-2/indeks.MD
Generowanie i obsługa treści
Po opublikowaniu treści na Hexo musisz uruchomić aplikację, aby wygenerować treść statyczną.
Użyj poniższych poleceń:
$ hexo generuje
Informacje sprawdzania poprawności konfiguracji
Informacje o rozpoczęciu przetwarzania
Pliki informacyjne załadowane w 966 ms
Informacje wygenerowane: archiwa/indeks.html
Informacje wygenerowane: strona-2/indeks.html
Informacje wygenerowane: archiwa/2021/indeks.html
Informacje wygenerowane: indeks.html
Informacje wygenerowane: archiwa/2021/02/indeks.html
Informacje wygenerowane: js/skrypt.JS
Informacje wygenerowane: FancyBox/JQuery.fantazyjne pudełko.min.CSS
Informacje wygenerowane: 2021/02/08/hello-world-post/indeks.html
Informacje wygenerowane: CSS/styl.CSS
Wygenerowane informacje: 2021/02/08/hello-world/indeks.html
Informacje wygenerowane: CSS/czcionki/fontawesome.OTF
Informacje wygenerowane: CSS/FONTS/FONTAWESSHE-WEBFONT.Woff
Informacje wygenerowane: CSS/FONTS/FONTAWESSHE-WEBFONT.EOT
Informacje wygenerowane: FancyBox/JQuery.fantazyjne pudełko.min.JS
Informacje wygenerowane: CSS/FONTS/FONTAWESSHE-WEBFONT.Woff2
Informacje wygenerowane: JS/jQuery-3.4.1.min.JS
Informacje wygenerowane: CSS/FONTS/FONTAWESSHE-WEBFONT.TTF
Informacje wygenerowane: CSS/Images/Banner.jpg
Informacje wygenerowane: CSS/FONTS/FONTAWESSHE-WEBFONT.svg
Info 19 plików wygenerowanych w 2.08 s
Aby służyć aplikacji, uruchom polecenie:
Informacje o serwerze $ Hexo Walidacja konfiguracji Informacje o rozpoczęciu przetwarzania Informacje HEXO jest uruchomione pod adresem http: // localhost: 4000 . Naciśnij Ctrl+C, aby zatrzymać.
Wniosek
To szybkie i proste wprowadzenie pokazało, jak korzystać z witryny statycznej sześciokątnej. Jeśli potrzebujesz więcej informacji na temat pracy z Hexo, zapoznaj się z główną dokumentacją podaną poniżej:
https: // hexo.IO/DOC