Jak zbudować miejsce blogowania z GatSBY

Ramy, takie jak Reactve Wyślij tylko JavaScript Down do Klientów, który jest następnie używany do tworzenia elementów Onscreen. HTML, który ładuje się na stronie, jest minimalna, ponieważ wszystkie treści są generowane po stronie klienta po czym załadowano wszystko.

W projektach, które mają dane dynamiczne, takie jak blog lub sklep, JavaScript musi najpierw zejść, zanim każde inne dane mogą być pobrane. Nawet przy użyciu technik szybkiego zwiększania, takich jak podział kodu, jeśli pakiet nie może pobrać, całą witrynę przestanie działać.

• Narzędzia do projektowania stron internetowych, aby pomóc Ci pracować mądrzej

Generatory statyczne podejmują dynamiczną zawartość i tworzą wstępnie zbudowane strony gotowe do podania. Jeśli dane się zmienią, projekt może zostać odbudowany, a nowa treść była podawana. Efekt końcowy jest lepsza prędkość, skalowalność i - bez ciągłych połączeń z bazą danych - bezpieczeństwo. Podczas gdy podejście nie jest idealne do ciągłego zmieniającego się danych, takich jak walcowa strona, wiele projektów może korzystać.

Gatsby. jest generatorem statystycznym, który jest zbudowany na reakcji. Dzięki zastosowaniu Graphql i wtyczek może przyjmować dane z różnych źródeł i przekazać je do komponentów. Po zakończeniu, analizuje projekt i generuje pliki HTML, aby służyć klientom, podczas reagowania, a logika aplikacji pobiera w tle.

Aby uzyskać więcej opcji budowlanej witryny, zobacz nasz szczyt Kreator strony internetowej wybór. Potrzebujesz właściwego wsparcia? To są hosting Usługi, których potrzebujesz.

Pobierz pliki. Dla tego samouczka.

• 10 najlepszych statycznych generatorów witryn

Zaczynaj

Aby rozpocząć, możemy mieć dla nas podstawowy projekt Gatsby. Zapewnia serwer rozwoju, którego możemy użyć wraz z kilkoma przydatnymi narzędziami programistami. Upewnij się, że węzeł i NPM są aktualne i uruchomione NPX Gatsby Nowa strona Gatsby W wierszu poleceń, z folderem "Site-witryna Gatsby".

W tym folderze Gatsby zapewnia kilka poleceń w ramach procesu inicjału. Uruchamianie ich ułatwi budowanie witryny. Biegać NPM Run Develope. Aby uruchomić serwer programistyczny i automatycznie aktualizuj zmiany w przeglądarce.

Wszystkie zawartość mieszka w folderze / SRC i dowolne pliki konfiguracji są poprzedzone "Gatsby-" w korzeniu projektu. Wszystko działa przez komponenty, które nie muszą mieć żadnej dodatkowej struktury lub zachowania, aby być wstępnie zbudowanym z GatSBY.

Zawartość folderu / src / stron jest wyjątkowa. Gatsby odbiera dowolny komponent w tym folderze, aby utworzyć stronę. Otwórz index.js i usuń zawartość komponentu. Zauważ, że aktualizacje strony w przeglądarce, gdy zapisujemy.

 ConstEdpage = () = & GT; (
  & LT; Layout & GT;
    {/ * Pusty * /}
  & LT; / Layout & GT;
) 

Zbuduj stronę

Każdy wpis na blogu potrzebuje własnej strony. Możliwe jest utworzenie komponentu strony dla każdego nowego stanowiska, ale tworzy to barierę dla osób, które nie były używane do reagowania i będzie również wymagać większej konserwacji w przyszłości, ponieważ zmienia się projekty.

Gatsby ma bibliotekę pełną wtyczek gotowych do zmiany sposobu, w jaki generuje strony, które można znaleźć w Gatsbyjs.org/plugins. Tam możemy znaleźć dwa typy wtyczki - "źródło" i "transformator".

Wtyczka źródłowa przyjmie dane ze źródła i konwertować je w "węzły", w jaki sposób Gatsby zajmuje się informacjami w ramach witryny. Dane mogą być pobierane lokalnie dla plików takich jak obrazy lub zdalnie dla danych zewnętrznych, takich jak baza danych.

Wtyczka transformatora może następnie wziąć te węzły i tworzyć nowe, aby ułatwić sprawę, aby Gatsby współpracować. Na przykład, pliki YAML nie mogą być analizowane domyślnie, ale wtyczka transformatora może włączyć zagnieżdżoną składnię w obrębie obiektów, aby odczytać wewnętrzne komponenty.

Markdown to wspólny format używany do tekstu, ponieważ jest wszechstronny, łatwy do odczytania i można go przekonwertować na HTML. Wtyczka źródłowa "Gatsby-Source-SourceSystem" może wykonać pliki lokalnie i konwertować je do węzłów, podczas gdy wtyczka transformacji "Gatsby-Transformer-Remark" używa uwagi, aby przekonwertować markdown w coś, co możemy odebrać i zapytać z Graphql.

Projekt rozrusznika jest już wyposażony w wtyczkę źródłową. Zainstaluj drugą, biegając NPM Zainstaluj Uwaga GatSBY-Transformer . Należy pamiętać, że serwer rozwoju może wymagać ponownego uruchomienia, aby go odebrać.

Ustaw wtyczki

Dzięki zainstalowanej wtyczce Gatsby musi być opowiedziany, jak go używać. Cała ta logika jest przechowywana w pliku "Gatsby-config.js" generowany na początku. Jest wyposażony w kilka wtyczek już zbiorczych z pudełka, ale musimy dodać nasz do miksu, aby móc odebrać i użyć Markdown.

Proste wtyczki, które nie mają procedury konfiguracji, mogą być dodawane jako łańcuchy. Ponieważ wtyczka transformacji ma tylko jedną pracę, nie wymaga konfiguracji. Jednak wtyczka źródłowa musi zostać przekazana, gdzie znaleźć posty. Dodaj je do dołu tablicy wtyczek.

 Wtyczki: [
  [...]
  "Gatsby-Transformer-Remark",
  {
    Zdoluj: `Gatsby-source-system`,
    Opcje: {
      Nazwa: `Strony`,
      Ścieżka: `$ {__ Dirname} / SRC / Pages`
    }
  }
] 

Ponieważ każdy post stanie się własną stroną, ma sens, aby dodać je do folderu SRC / stron. Te opcje ustawień mówią Gatsby, aby spojrzeć w ten folder i wyciągnąć wszystkie pliki.

Utwórz post na blogu

Z wtyczkami na miejscu możemy stworzyć nasz pierwszy post. Utwórz folder o nazwie "My-First-Post" i dodaj plik "my-first-post.md" w nim. Ta konwencja umożliwia nam dodawanie wszystkich powiązanych plików - takich jak obrazy - obok siebie samego.

Musimy dodać trochę znaku do tego posta, więc wiemy, że działa zgodnie z oczekiwaniami.

 ---
Ścieżka: / Post / My-First-Post
Data: 2018-12-01.
Summary: Post Podsumowanie
Tagi: [mój, pierwszy, post]
Tytuł: mój pierwszy post
---
To mój pierwszy post! 

Zawartość między myślnikami w górnej części pliku nazywana jest "materią przednia". Spowoduje to zawarcie metadanych wokół postu, który jest napisany, taki jak data i tytuł. Wszystkie te dane zostaną odebrane przez uwagę i można je zapytać w Graphql.

Kluczowy kawałek czwytywnej materii w tym przypadku jest ścieżka wartość. Właśnie tam będzie żyć i będzie musiał być wyjątkowy. Gatsby przeczyta ścieżkę i zrób nową stronę tam.

Zanim będziemy mogli pokazać posty, potrzebujemy komponentu strony, aby wyświetlić post. Musi być w stanie podjąć wartości jako rekwizyty i wyświetlić treść jako blok HTML.

Utwórz nowy komponent w "SRC / blogpost.js". Informacje o każdym pościemu przyjdą jako dane rekwizyt z Graphql.

 Import reaguje z "reagowania"
Importuj {graphql} z "gatsby"
Importuj kask z "reagowania hełmu"
Układ importu z "../components/layout"
Eksportuj Konski blog = ({dane: {markdownRemark}}) = & gt; {
  Const {frontmatter, HTML} = MarkdownRemark
  powrót (
    & LT; Layout & GT;
      & lt; helmet title = {frontmatter.title} / & gt;
      & lt; div DangerlySetinnerHtml = {{__HTML: HTML}} / & GT;
    & LT; / Layout & GT;
  )
} 

Pakiet "React-hełm" włączony z Gatsby umożliwia nam aktualizację wartości, które zazwyczaj mieszkają w & lt; Head & GT; strony HTML. Tutaj ustawia tytuł postu, który ma być & lt; title & gt; samej strony. Istnieje wiele innych opcji, które akceptuje, które można dowiedzieć się więcej o github.com/nfl/reaget-helmet. .

Zapytanie o dane

W tym momencie Gatsby nie ma danych zasilania tej strony. Musimy pobrać dane z plików Markdown, aby wypełnić te informacje. Aby to zrobić, możemy użyć GraphQL - żądany język stworzony przez Facebooka, który ciągnie w odpowiednich danych do reagujących elementów. Krótko mówiąc, GraphQL definiuje strukturę Dane zostaną zwrócone przez zastosowanie zagnieżdżonych obiektów. W ten sposób zapytamy tylko o dane, które rzeczywiście będziemy korzystać.

Gatsby zapewnia literalną funkcję szablonu, która może interpretować zapytania. Wykryje go użycie i przekazuje wyniki jako rekwizyty w składniku. Oznacza to, że możemy dodać zapytanie w tym samym pliku i wspólnie zachować powiązaną logikę.

Export Const Pluquery = Graphql`
  Query ($ Path: String!) {
    Markdownremark (frontmatter: {Ścieżka: {EQ: $ path}}) {
      html.
      frontmatter {
        Data (formatString: "D mmmm yyyy")
        tytuł
      }
    }
  } `

W tym zapytaniu pytamy Gatsby dla wszystkich węzłów Markdown ze ścieżką pasującą do strony, w której jesteśmy włączona. Jeśli znajdzie jeden, przejdzie następnie renderowaną HTML, datę i tytuł postu do komponentu.

Piszące zapytania w ten sposób jest ograniczony tylko do komponentów strony. Wszelkie inne składniki, które wymagają zapytań do węzłów, muszą użyć & LT; Staticquery & GT; i załaduj go z przodu. W tym momencie serwer rozwoju może ostrzec o tym dla Post na blogu Komponent, ale to dlatego, że nie jest to świadome, stanie się jeszcze komponentem strony. Zmieńmy to.

Generuj strony.

Domyślnie Gatsby sprawia, że ​​strony dla komponentów / src / strony , co oznacza, że ​​musimy tworzyć strony w inny sposób.

Gatsby ujawnia kilka metod z procesu budowania, aby pomóc uzyskać dostęp do węzłów danych. Mogą być dostępne za pośrednictwem "Gatsby-Node.js" w korzeniu projektu. W takim przypadku użyjemy GraphQL do pobrania wszystkich postów na blogach i pozwól Createpages. Callback generuje stronę dla każdego. Ponieważ jest to działanie asynchroniczne, musimy zwrócić obietnicę, więc Gatsby może kontynuować proces budowy.

 Const Path = wymagać ("ścieżka")
Exports.Createpages = ({Akcje, Graphql}) = & GT; {
  Powrót Graphql (`
    {
      wszystkoMarkdownRemark {
        krawędzie {
          węzeł {
            frontmatter {
              ścieżka
            }
          }
        }
      }
    }
  `)
} 

Pierwszą częścią wywołania zwrotnego jest zapytanie, które pobierają ścieżkę dla każdego posta, ponieważ każda pojedyncza strona zostanie następnie uzyskana własne dane. Wywołanie Graphql zwraca obietnicę, która będzie zawierać wszystkie posty. Możemy użyć danych z tego, aby wygenerować niektóre strony.

 .ten (wynik = & gt; {
  if (exssish.errors) {
    Return Promise.Reject (Ressaged.errors)
  }
  const blogposttemplate = path.resolve ('src / komponenty / blogpost.js')
  wynik.data.allmarkdremark.edges.Foreach (({węzeł}) = & gt; {
    Akcje.CreatePage ({
      PATH: Node.frontmatter.path,
      komponent: blogposttemplate,
    })
  })
}) 

Jeśli zapytanie napotykają błąd, zatrzymaj proces budowania, aby dowiedzieć się, dlaczego. Jeśli wszystko jest w porządku, przynieś komponent i zadzwoń Stwórz stronę Metoda wygenerowania strony na dostarczonej ścieżce.

Dzięki generowaniu stron wszystkie potrzebne jest teraz sposób na ich znalezienie. Możemy użyć zapytania na istniejące komponent strony indeksu, aby to zrobić.

 Eksportuj Pluquery = Graphql`
  zapytanie {
    AllmarkdowndRemark (Sort: {Fields: [Frontmatter___date], Zamówienie: DESC}) {
      krawędzie {
        węzeł {
          frontmatter {
            ścieżka
            tytuł
          }
        }
      }
    }
  }
`; 

W tym zapytaniu interesujemy się tylko tytułami i ścieżką na stanowisko. Przekazujemy również kilka parametrów, aby pamiętać, aby uzyskać najnowsze posty w odwrotnej kolejności. W szczególności wymaga tego zapytania sprawdza datę z czwytywnej materii na każdym poście. Składnia dla każdego zapytania będzie zależała od wtyczki używanej do wygenerowania go.

Wreszcie komponent potrzebuje aktualizacji, aby korzystać z danych. Element "Link" dostarczony przez GatSBY umożliwia wiedzieć, które komponenty muszą renderować ten link i upewnić się, że spełnia odpowiednio właściwe wiązki.

 Const IndexPage = ({Data}) = & GT; {
  powrót (
    & LT; Layout & GT;
      {dane.allmarkdownRemark.edges.map (
        ({węzeł: {frontmatter: {ścieżka, tytuł}}}) = & gt; (
          & lt; link Klawisz = {ścieżka} do = {ścieżka} & gt;
            {tytuł}
          & LICK & GT;
        ))}
    & LT; / Layout & GT;
  )
} 

Z tym, nasz blog jest wykonywany. Wszystko, co pozostaje, jest sadzonkę i mieć Gatsby zbudować stronę internetową gotową do produkcji. Biegiem NPM Run Build. Może rozebrać wszelkie ulepszenia używane do rozwoju i generować pakiety gotowe do wdrożenia. Po zakończeniu, "publiczny" folder można następnie przesłać w dowolnym miejscu, który może obsługiwać strony statyczne. Masz pliki do przechowywania na swoim blogu? Upewnij się, że są bezpieczni magazyn w chmurze .

Ten artykuł został pierwotnie opublikowany w wydaniu 314 netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 314 tutaj lub Subskrybuj tutaj .

Powiązane artykuły:

• 16. Najlepsze darmowe platformy blogów
• Użyj WordPress jako bezgłowych CMS
• Jak kodować szybciej, lżejszy javascript