Як побудувати серверний, SEO-дружний блог

  1. Починаємо
  2. Створення маршрутів
  3. Створення блогу
  4. Головні елементи
  5. Попереднє зображення
  6. Розгортання до Netlify
  7. Завершення

Ласкаво просимо і дякуємо нашому автору, Роджеру Цзіну, старшому інженеру програмного забезпечення ButterCMS.

Серверні архітектури додатків набувають все більшої популярності, і це не таємниця чому. Розробники можуть створювати та переглядати продукти швидше, коли вони мають меншу інфраструктуру для підтримки, і не потрібно турбуватися про обслуговування сервера, відключення та вузькі місця у масштабі.

У цьому підручнику ми покажемо вам, як побудувати безсерверний, дружній до SEO, CMS-блог, використовуючи React, ButterCMS і Netlify. Готовий код для цього підручника доступні на GitHub .

ButterCMS є власною CMS-інтерфейсом на основі API та вмістним API, який дозволяє створювати додатки, керовані CMS будь-якої мови програмування . Масло дає змогу керувати вмістом за допомогою своєї інформаційної панелі та інтегрувати її в інтерфейс вибору з їхнім API - ви можете вважати Butter схожим на CMS Netlify, за винятком того, що ваш вміст керується зовнішнім API, а не зберігається в Git.

Починаємо

Ми скористаємося Створити програму React App стартовий комплект.

Установити додаток "Створити реакцію":

npm install -g create-react-app

Потім створіть шаблон для нашої програми:

create-react-app реагує-серверне-блог cd реакція-serverless-блог npm старт

Створення маршрутів

Нашому блогу потрібні два екрани: один для перерахування всіх повідомлень, а інший - для показу окремих повідомлень. Створіть компоненти BlogHome.js і BlogPost.js у каталозі src:

import React, {Компонент} з 'реагувати'; class BlogHome розширює компонент {render () {return (<div> Home </div>); }} Експорт за замовчуванням BlogHome; import React, {Компонент} з 'реагувати'; class BlogPost розширює компонент {render () {return (<div> Post </div>); }} Експорт за замовчуванням BlogPost;

Створити додаток React не пропонує маршрутизацію, тому ми додамо маршрутизатор:

npm install [email protected] --зберегти

У вихідній папці створіть новий файл з назвою routes.js. Ми створимо маршрути для домашньої сторінки блогу з і без параметрів сторінки, а також окрему сторінку публікації:

імпортувати Реагувати з "реагувати"; імпортувати {маршрутизатор, IndexRoute, Route} з 'реактора-маршрутизатора'; імпортувати додаток з "./App"; імпортувати BlogHome з "./BlogHome"; імпортувати BlogPost з "./BlogPost"; const Routes = (props) => (<Маршрутизатор {... реквізити}> <Route path = "/" component = {App}> <IndexRoute component = {BlogHome} /> <Маршрут маршруту = "/ p /: сторінка "component = {BlogHome} /> <Route path =" / post /: slug "компонент = {BlogPost} /> </Route> </Router>); експортувати маршрути за замовчуванням;

Далі ми оновимо index.js, щоб він використовував наші маршрути при ініціалізації програми:

імпортувати Реагувати з "реагувати"; імпортувати ReactDOM з "react-dom"; імпортувати {browserHistory} з 'react-router'; імпортувати маршрути з "./routes"; ReactDOM.render (<Маршрути історії = {browserHistory} />, document.getElementById ('root'));

І, нарешті, ми оновлюємо App.js, щоб він розміщував дочірні компоненти, вказані в наших маршрутах:

import React, {Компонент} з 'реагувати'; class App розширює Component {render () {return (<div className = "App"> <div className = "App-header"> <h2> Мій блог </h2> </div> <div> {this.props. діти} </div> </div>); }} експортувати стандартну програму;

Створення блогу

Далі ми перейдемо до ButterCMS, щоб привести наш блог до життя. ButterCMS надає API, який дозволяє легко отримувати публікації в блогах, категорії, теги та авторів.

Спочатку ми встановимо Клієнт ButterCMS JS :

npm install buttercms --save

Потім ми оновимо "BlogHome", щоб отримати повідомлення з ButterCMS і зробити їх. Використовуйте маркер API у наведеному нижче прикладі або отримайте власний користувач вхід до ButterCMS з GitHub .

import React, {Компонент} з 'реагувати'; імпортувати {link} з імпорту "реактора-маршрутизатора" Масло з 'buttercms' const butter = Масло ('de55d3f93789d4c5c26fb07445b680e8bca843bd'); клас BlogHome розширює компонент {конструктор (реквізит) {супер (реквізит); this.state = {loaded: false}; } fetchPosts (page) {butter.post.list ({page: page, page_size: 10}), потім ((resp) => {this.setState ({loaded: true, resp :.data})}); } componentWillMount () {let page = this.props.params.page || 1; this.fetchPosts (page)} компонентWillReceiveProps (nextProps) {this.setState ({loaded: false}); let = nextProps.params.page || 1; this.fetchPosts (page)} 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}> <Посилання на = {`/ post / $ {post.slug} ' }> {post.title} </Link> </div>)})} <br /> <div> {previous_page && <Посилання на = {`/ p / $ {previous_page}`}> Попередня </Link> } {next_page && <Посилання на = {`/ p / $ {next_page}`}} Далі </Link>} </div> </div>); } else {return (<div> Завантаження ... </div>)}}} Експорт за замовчуванням BlogHome;

Далі ми оновлюємо BlogPost.js, щоб отримувати та відображати повідомлення на основі маршруту:

import React, {Компонент} з 'реагувати'; імпорт Масло з 'buttercms' const butter = Масло ('de55d3f93789d4c5c26fb07445b680e8bca843bd'); class BlogPost розширює компонент {конструктор (реквізит) {супер (реквізит); this.state = {loaded: false}; } componentWillMount () {let slug = this.props.params.slug; butter.post.retrieve (slug). потім ((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> Завантаження ... </div>); }}} Експорт за замовчуванням BlogPost;

Головні елементи

Наш блог працює, але наші сторінки дописів не мають належного налаштування назв HTML або мета-тегів. Щоб виправити це, скористаємося Реакція шолома .

Спочатку встановіть пакет:

npm install --save react-шолом

Імпортуйте модуль Helmet в наш BlogPost і використовуйте його в методі render (), щоб встановити теги HTML, які повинні бути в <head>.

<Helmet> <title> {post.seo_title} </title> <meta name = "description" content = {post.meta_description} /> <meta name = "og: зображення" content = {post.featured_image} /> < / Шолом>

Ось як виглядає повний код компонента. Перевірте DOM, щоб переконатися, що теги встановлюються правильно.

import React, {Компонент} з 'реагувати'; імпорт Масло з імпорту 'капелюшок' {Шлем} з "реактивний шолом"; const butter = Масло ('de55d3f93789d4c5c26fb07445b680e8bca843bd'); class BlogPost розширює компонент {конструктор (реквізит) {супер (реквізит); this.state = {loaded: false}; } componentWillMount () {let slug = this.props.params.slug; butter.post.retrieve (slug). потім ((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> Завантаження ... </div>); }}} Експорт за замовчуванням BlogPost;

Попереднє зображення

Наш блог створений, але сканери з пошукових систем і соціальних мереж не завжди виконують JavaScript, тому наш блог страшний SEO.

Існує декілька способів вирішення цієї проблеми, включаючи налаштування служб рендеринга на сервері та попередньої рендерингу, наприклад Prerender.io. Але ці параметри вимагають налаштування та підтримки сервера Node.js. На щастя, Netlify пропонує вбудовану попередню рендерінг, що дозволяє нам зберігати код без сервера, переконуючись, що наш блог оптимізований для сканерів.

Розгортання до Netlify

Перед розгортанням до Netlify ми створимо виробничу збірку нашої програми:

пряжу встановити пряжу бігти побудувати

Перевірте каталог каталогів, щоб переконатися, що виробничу збірку було успішно створено. Щоб завантажити сайт на Netlify, перетягніть папку збирання на інформаційну панель Netlify.

Передбачення можна ввімкнути з налаштувань програми.

Ваш блог буде працювати, коли його буде завантажено з домашньої сторінки, але якщо ви спробуєте завантажити запис безпосередньо, ви отримаєте 404 сторінки:

Пам'ятайте, що наша програма не має сервера? Щоб виправити помилку 404, нам потрібно створити правило перезапису URL-адрес, яке буде виконувати сервер index.html незалежно від того, яку URL-адресу запитує браузер.

Для цього ми створимо файл _redirects у нашому каталозі збірки з таким рядком:

/ * /index.html 200

Перезавантажте вміст каталогу збирання та завантажте всі сторінки. Перевірте наші живий приклад .

Щоб переконатися, що цей файл буде перенаправлено кожного разу, коли ми будуємо наше додаток, ми можемо оновити наш сценарій збирання в package.json:

"build": "respond-scripts build && echo '/ * /index.html 200'> збірка / _редукти"

Завершення

Це воно! Ми створили SEO-дружній блог без використання сервера, використовуючи React, Netlify і ButterCMS. Завдяки нашому безсерверному підходу ми можемо повернутися до розробки програмного забезпечення без будь-яких турбот про обслуговування сервера, відключення або вузькі місця у масштабі.

Сподіваюся, вам сподобався цей підручник. Якщо у вас виникли запитання щодо налаштування програми React на базі ButterCMS, зверніться до мене за адресою [email protected], і я обов'язково відповім!