Phenquestions
Ten samouczek pokaże Ci, jak założyć prostego bloga za pomocą statycznego generatora witryn, który jest bardzo szybki i łatwy w użyciu.
Co to jest SSG?
SSG lub Static Site Generator to aplikacja internetowa, która konwertuje dynamiczną zawartość strony internetowej na zawartość statyczną, zwykle przechowywaną lokalnie. Generatory witryn statycznych nie wymagają baz danych i zaplecza, eliminując w ten sposób potrzebę nauki kodowania. Koncentruje się głównie na pisaniu i prezentowaniu treści.
SSG vs. CMS
Najpopularniejszym sposobem tworzenia stron internetowych i zarządzania treścią jest korzystanie z CMS lub systemów zarządzania treścią, takich jak WordPress, Drupal, Joomla itp.
Systemy CMS działają poprzez tworzenie i zarządzanie treścią bezpośrednio za pomocą interaktywnego interfejsu. Ponieważ dane w systemie CMS są pobierane z bazy danych, systemy CMS działają bardzo wolno, ponieważ zawartość jest pobierana i udostępniana jako zawartość dynamiczna. Systemy CMS są również podatne na luki w zabezpieczeniach, ponieważ polegają na zewnętrznych wtyczkach napisanych przez innych programistów w celu zwiększenia funkcjonalności.
Z drugiej strony, statyczne generatory witryn działają poprzez tworzenie mediów offline, takich jak edytory tekstu, i renderują końcowy widok strony po publikacji. Ponieważ treść jest renderowana lokalnie, bez potrzeby korzystania z bazy danych, strona renderuje się szybciej, a prędkości ładowania są niewiarygodnie szybkie.
Generatory stron statycznych składają się ze wstępnie skompilowanego kodu, który działa jak silnik renderujący publikowane treści.
Jak zbudować statyczny blog z Hexo
Jednym z popularnych wyborów do budowania statycznej witryny jest Hexo.
Hexo to prosta, szybka i wydajna aplikacja SSG napisana w NodeJS. Chociaż istnieją inne możliwości tworzenia witryny statycznej, Hexo pozwala dostosować witrynę i zintegrować różne narzędzia.
Przyjrzyjmy się, jak możemy założyć prostą statyczną witrynę za pomocą Hexo.
Instalowanie Hexo
Zanim będziemy mogli zbudować witrynę, musimy skonfigurować wymagania hexo i zainstalować ją. W tym celu potrzebujemy NodeJS i git.
Zacznij od aktualizacji systemu:
aktualizacja sudo apt-getsudo apt-get upgrade
Po zaktualizowaniu systemu zainstaluj git
sudo apt-get zainstaluj gitNastępnie zainstaluj nodejs z nodesource za pomocą polecenia:
curl -sL https://deb.źródło węzła.com/setup_14.x | sudo -E bash -apt-get install -y nodejs
Po zainstalowaniu Nodejs możemy przystąpić do instalacji hexo za pomocą polecenia:
npm install -g hexo-cliWspółpraca z Hexo
Po zainstalowaniu hexo możesz utworzyć witrynę i publikować treści. Przyjrzyjmy się, jak pracować z Hexo. Pamiętaj, że jest to szybki i 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 HexoSitecd HexoSite
instalacja npm
Zrozumienie struktury Hexo Directory
Po zainicjowaniu nowej witryny Hexo otrzymasz strukturę katalogów, taką jak ta poniżej:
-rw-r--r-- 1 cs cs 0 Lut 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 lut 8 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 blokada pakietu.json drwxr-xr-x 1 cs cs 4096 lut 8 20:51 rusztowania drwxr-xr-x 1 cs cs 4096 lut 8 20:51 source drwxr-xr-x 1 cs cs 4096 lut 8 20:51 tematy
Pierwszy plik to _config.yml zawiera wszystkie ustawienia dla Twojej witryny. Pamiętaj, aby zmodyfikować go przed wdrożeniem witryny, ponieważ będzie zawierał wartości domyślne.
Następny plik to pakiet.plik json zawierający 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/configuring-npm/package-json
Tworzenie bloga
Aby stworzyć prosty blog w hexo, użyj polecenia:
hexo nowy blog „Hello World Blog”Po utworzeniu możesz umieścić plik przecen w katalogu /source/_posts. Do pisania treści będziesz potrzebować języka znaczników Markdown.
Tworzenie nowej strony
Tworzenie strony w Hexo jest proste; użyj polecenia:
hexo nowa strona „Strona-2”Źródło strony znajduje się w /source/Page-2/index.md
Generowanie i udostępnianie treści
Po opublikowaniu treści na hexo, będziesz musiał uruchomić aplikację, aby wygenerować statyczną treść.
Użyj poniższych poleceń:
$ wygeneruj heksoINFO Zatwierdzanie konfiguracji
INFORMACJE Rozpocznij przetwarzanie
INFO Pliki załadowane w czasie 966 ms
INFO Wygenerowano: archiwum/indeks.html
INFO Wygenerowano: Strona-2/indeks.html
INFO Wygenerowano: archiwum/2021/indeks.html
INFO Wygenerowano: indeks.html
INFO Wygenerowano: archiwum/2021/02/indeks.html
INFO Wygenerowano: js/script.js
INFO Wygenerowano: fancybox/jquery.fantazyjne pudełko.min.css
INFO Wygenerowano: 2021/02/08/Hello-World-Post/index.html
INFO Wygenerowano: css/style.css
INFO Wygenerowano: 2021/02/08/hello-world/index.html
INFO Wygenerowano: css/fonts/FontAwesome.otf
INFO Wygenerowano: css/fonts/fontawesome-webfont.woff
INFO Wygenerowano: css/fonts/fontawesome-webfont.eot
INFO Wygenerowano: fancybox/jquery.fantazyjne pudełko.min.js
INFO Wygenerowano: css/fonts/fontawesome-webfont.woff2
INFO Wygenerowano: js/jquery-3.4.1.min.js
INFO Wygenerowano: css/fonts/fontawesome-webfont.ttf
INFO Wygenerowano: css/obrazy/baner.jpg
INFO Wygenerowano: css/fonts/fontawesome-webfont.SVG
INFO 19 plików wygenerowanych w 2.08
Aby obsłużyć aplikację, uruchom polecenie:
$ hexo server INFO Sprawdzanie poprawności konfiguracji INFO Rozpocznij przetwarzanie INFO Hexo działa pod adresem http://localhost:4000 . Naciśnij Ctrl+C, aby zatrzymać.Wniosek
To szybkie i proste wprowadzenie pokazało Ci, jak korzystać ze statycznej strony Hexo. Jeśli potrzebujesz więcej informacji na temat pracy z Hexo, zapoznaj się z główną dokumentacją podaną poniżej:
https://hekso.io/dokumenty
