Jak zbudować bloga React przyjazny dla SEO, przyjazny dla serwera

1. Rozpoczęcie pracy
2. Tworzenie tras
3. Budowanie bloga
4. Elementy głowy
5. Prerendering
6. Wdrażanie do Netlify
7. Zakończyć

Witamy i dziękujemy naszemu gościnnemu autorowi, Rogerowi Jinowi, starszemu inżynierowi oprogramowania w ButterCMS.

Architektury aplikacji bez serwera zyskują na popularności i nie jest tajemnicą, dlaczego. Programiści są w stanie budować i iterować produkty szybciej, gdy mają mniej infrastruktury do utrzymania i nie muszą martwić się o konserwację serwerów, przestoje i wąskie gardła.

W tym samouczku pokażemy Ci, jak zbudować blog bez serwera, przyjazny dla SEO, oparty na CMS, używając React, ButterCMS i Netlify. Gotowy kod tego samouczka to dostępne na GitHub .

ButterCMS to zastrzeżony oparty na API CMS i interfejs API treści, który umożliwia tworzenie aplikacji opartych na CMS dowolny język programowania . Butter pozwala Ci zarządzać treścią za pomocą pulpitu nawigacyjnego i zintegrować ją z wybranym interfejsem za pomocą interfejsu API - możesz myśleć o Butter jako podobnym do Netlify CMS, z wyjątkiem tego, że twoja zawartość jest zarządzana w zewnętrznym API, a nie w Git.

Rozpoczęcie pracy

Użyjemy Utwórz aplikację React zestaw startowy.

Zainstaluj aplikację Utwórz React:

npm install -g utwórz-reaguj-aplikacja

Następnie utwórz szablon dla naszej aplikacji:

create-react-app reaguj-bez-serwera-blog cd reaguj-serwer-bez-blogu npm start

Tworzenie tras

Nasz blog potrzebuje dwóch ekranów: jednego do wyświetlania wszystkich postów i drugiego do wyświetlania poszczególnych postów. Utwórz składniki BlogHome.js i BlogPost.js w katalogu src:

import React, {Component} od „reaguj”; klasa BlogHome rozszerza Component {render () {return (<div> Home </div>); }} eksportuj domyślny BlogHome; import React, {Component} od „reaguj”; klasa BlogPost rozszerza Component {render () {return (<div> Post </div>); }} eksportuj domyślne BlogPost;

Utwórz React App nie oferuje routingu poza pudełkiem, więc dodamy reakcję routera:

npm install [email protected] --save

W folderze źródłowym utwórz nowy plik o nazwie routes.js. Stworzymy trasy do strony głównej bloga z parametrami strony i bez niej, a także indywidualną stronę postu:

import Reaguj z „reaguj”; import {Router, IndexRoute, Route} z 'Reve-router'; importuj aplikację z „./App”; importuj BlogHome z './BlogHome'; importuj BlogPost z „./BlogPost”; const Routes = (props) => (<Router {... props}> <Route path = "/" component = {App}> <IndexRoute component = {BlogHome} /> <Route path = "/ p /: page "component = {BlogHome} /> <Route path =" / post /: slug "component = {BlogPost} /> </Route> </Router>); eksport domyślnych tras;

Następnie zaktualizujemy index.js, aby używał naszych tras podczas inicjowania aplikacji:

import Reaguj z „reaguj”; importuj ReactDOM z „react-dom”; import {browserHistory} z 'react-router'; importuj trasy z „./routes”; ReactDOM.render (<Routes history = {browserHistory} />, document.getElementById ('root'));

I wreszcie zaktualizujemy App.js, aby zagnieździł komponenty potomne określone w naszych trasach:

import React, {Component} od „reaguj”; class App rozszerza Component {render () {return (<div className = "App"> <div className = "App-header"> <h2> Mój blog </h2> </div> <div> {this.props. children} </div> </div>); }} eksportuj domyślną aplikację;

Budowanie bloga

Następnie przejdziemy do ButterCMS, aby ożywić nasz blog. ButterCMS zapewnia interfejs API, który umożliwia łatwe pobieranie wpisów na blogu, kategorii, tagów i autorów.

Najpierw zainstalujemy Klient ButterCMS JS :

npm zainstaluj buttercms --save

Następnie zaktualizujemy „BlogHome”, aby pobrać posty z ButterCMS i je wyrenderować. Użyj tokenu API w poniższym przykładzie lub zdobądź własny zalogowanie się do ButterCMS za pomocą GitHub .

import React, {Component} od „reaguj”; import {Link} z importu 'react-router' Masło z 'buttercms' const butter = Butter ('de55d3f93789d4c5c26fb07445b680e8bca843bd'); klasa BlogHome rozszerza komponent {konstruktor (rekwizyty) {super (rekwizyty); this.state = {loaded: false}; } fetchPosts (strona) {butter.post.list ({page: page, page_size: 10}). następnie ((resp) => {this.setState ({loaded: true, resp: resp.data})}); } componentWillMount () {let page = this.props.params.page || 1; this.fetchPosts (strona)} componentWillReceiveProps (nextProps) {this.setState ({loaded: false}); let page = nextProps.params.page || 1; this.fetchPosts (strona)} render () {if (this.state.loaded) {const {next_page, previous_page} = this.state.resp.meta; return (<div> {this.state.resp.data.map ((post) => {return (<div key = {post.slug}> <Link do = {`/ post / $ {post.slug}` }> {post.title} </Link> </div>)})} <br /> <div> {poprzednia strona && <Link do = {`/ p / $ {poprzednia_strona}`}> Poprzednia </Link> } {next_page && <Link do = {`/ p / $ {next_page}`}> Dalej </Link>} </div> </div>); } else {return (<div> Ładowanie ... </div>)}}} eksport domyślnego BlogHome;

Następnie zaktualizujemy BlogPost.js do pobierania i wyświetlania postów na podstawie trasy:

import React, {Component} od „reaguj”; import Masło z „buttercms” const butter = masło („de55d3f93789d4c5c26fb07445b680e8bca843bd”); klasa BlogPost rozszerza komponent {konstruktor (rekwizyty) {super (rekwizyty); this.state = {loaded: false}; } componentWillMount () {niech slug = this.props.params.slug; butter.post.retrieve (slug) .then ((resp) => {this.setState ({loaded: true, post: resp.data.data})}); } render () {if (this.state.loaded) {const post = this.state.post; return (<div> <h1> {post.title} </h1> <div dangerouslySetInnerHTML = {{__ html: post.body}} /> </div>); } else {return (<div> Ładowanie ... </div>); }}} eksportuj domyślne BlogPost;

Elementy głowy

Nasz blog działa, ale nasze strony postów nie mają poprawnie ustawionych tytułów HTML ani metatagów. Aby to naprawić, użyjemy React Helmet .

Najpierw zainstaluj pakiet:

npm install --save react-helmet

Zaimportuj moduł Kask w naszym BlogPost i użyj go w naszej metodzie render (), aby ustawić znaczniki HTML, które powinny znajdować się w <head>.

<Helmet> <title> {post.seo_title} </title> <meta name = "description" content = {post.meta_description} /> <meta name = "og: image" content = {post.featured_image} /> < / Helmet>

Oto jak wygląda pełny kod komponentu. Sprawdź DOM, aby sprawdzić, czy tagi są poprawnie ustawione.

import React, {Component} od „reaguj”; import Butter from 'buttercms' import {Helmet} z „react-helmet”; const butter = Butter ('de55d3f93789d4c5c26fb07445b680e8bca843bd'); klasa BlogPost rozszerza komponent {konstruktor (rekwizyty) {super (rekwizyty); this.state = {loaded: false}; } componentWillMount () {niech slug = this.props.params.slug; butter.post.retrieve (slug) .then ((resp) => {this.setState ({loaded: true, post: resp.data.data})}); } render () {if (this.state.loaded) {const post = this.state.post; return (<div> <Helmet> <title> {post.seo_title} </title> <meta name = "description" content = {post.meta_description} /> <meta name = "og: image" content = {post. featured_image} /> </Helmet> <h1> {post.title} </h1> <div dangerouslySetInnerHTML = {{__ html: post.body}} /> </div>); } else {return (<div> Ładowanie ... </div>); }}} eksportuj domyślne BlogPost;

Prerendering

Nasz blog jest skonfigurowany, ale roboty z wyszukiwarek i sieci społecznościowych nie zawsze wykonują JavaScript, więc nasz blog ma fatalny SEO.

Istnieje wiele sposobów rozwiązania tego problemu, w tym skonfigurowanie renderowania po stronie serwera i usług renderowania wstępnego, takich jak Prerender.io. Wszystkie te opcje wymagają jednak skonfigurowania i utrzymania serwera Node.js. Na szczęście Netlify oferuje wbudowane prerenderowanie, które pozwala nam zachować nasz kod „bez serwera”, jednocześnie upewniając się, że nasz blog jest zoptymalizowany dla robotów indeksujących.

Wdrażanie do Netlify

Przed wdrożeniem w Netlify stworzymy kompilację produkcyjną naszej aplikacji:

przędza do montażu przędzy run build

Sprawdź katalog kompilacji, aby sprawdzić, czy kompilacja produkcyjna została pomyślnie utworzona. Aby załadować witrynę na Netlify, przeciągnij folder budowania na pulpit Netlify.

Prerendering można włączyć w ustawieniach aplikacji.

Twój blog będzie działać, gdy zostanie załadowany ze strony głównej, ale jeśli spróbujesz załadować post bezpośrednio, otrzymasz stronę 404:

Pamiętaj, że nasza aplikacja jest bez serwera? Aby naprawić błąd 404, musimy utworzyć regułę przepisywania adresów URL, która będzie serwować index.html bez względu na adres URL żądany przez przeglądarkę.

W tym celu stworzymy plik _redirects w naszym katalogu kompilacji z następującą linią:

/ * /index.html 200

Prześlij ponownie zawartość swojego katalogu kompilacji i załaduj wszystkie strony. Sprawdź nasze przykład na żywo .

Aby upewnić się, że ten plik zostanie przekierowany za każdym razem, gdy budujemy naszą aplikację, możemy zaktualizować nasz skrypt kompilacji w pakiecie.json:

„build”: „reaguj-skrypty buduj && echo” / * /index.html 200 '> build / _redirects ”

Zakończyć

To jest to! Zbudowaliśmy przyjazny dla SEO blog bez serwera, używając React, Netlify i ButterCMS. Dzięki naszemu bezserwerowemu podejściu możemy teraz powrócić do budowania oprogramowania bez konieczności martwienia się o konserwację serwera, przestoje czy wąskie gardła.

Mam nadzieję, że podoba Ci się ten tutorial. Jeśli masz jakiekolwiek pytania dotyczące konfiguracji aplikacji React obsługiwanej przez ButterCMS, wyślij mi wiadomość na adres [email protected], a na pewno odpowiem!