Как создать блог React без сервера, оптимизированный для SEO

  1. Начиная
  2. Создание маршрутов
  3. Создание блога
  4. Головные элементы
  5. Предварительная визуализация
  6. Развертывание в Netlify
  7. Заворачивать

Добро пожаловать и спасибо нашему гостю автору, Роджеру Джину, старшему инженеру-программисту в ButterCMS.

Архитектура безсерверных приложений набирает популярность, и не секрет, почему. Разработчики могут быстрее создавать и использовать продукты, когда им не хватает инфраструктуры для обслуживания, и им не нужно беспокоиться о техническом обслуживании серверов, сбоях и расширении узких мест.

В этом уроке мы покажем вам, как создать безсерверный, дружественный к SEO, блог на базе CMS с использованием React, ButterCMS и Netlify. Готовый код для этого урока доступно на GitHub ,

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

Начиная

Мы будем использовать Создать приложение React стартовый комплект.

Установите приложение Create React:

npm install -g создать-реагировать-приложение

Затем создайте шаблон для нашего приложения:

создать-реагировать-приложение реагировать-серверный-блог

Создание маршрутов

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

импортировать React, {Component} из 'response'; класс BlogHome extends Component {render () {return (<div> Home </ div>); }} экспорт по умолчанию BlogHome; импортировать React, {Component} из 'response'; класс BlogPost extends Component {render () {return (<div> Post </ div>); }} экспорт по умолчанию BlogPost;

Приложение Create React не предлагает готовую маршрутизацию, поэтому мы добавим реагирующий маршрутизатор:

npm [email protected] - сохранить

В папке с исходным кодом создайте новый файл с именем rout.js. Мы создадим маршруты для домашней страницы блога с параметрами страницы и без них, а также для отдельной страницы публикации:

импорт React из 'реакции'; import {Router, IndexRoute, Route} из «реакции-маршрутизатора»; импортировать приложение из «./App»; импортировать BlogHome из ./BlogHome; импортировать BlogPost из './BlogPost'; const Routes = (props) => (<Router {... props}> <Route path = "/" component = {App}> <IndexRoute component = {BlogHome} /> <Route path = "/ p /: страница "component = {BlogHome} /> <Route path =" / post /: slug "component = {BlogPost} /> </ Route> </ Router>); экспорт маршрутов по умолчанию;

Далее мы обновим index.js, чтобы он использовал наши маршруты при инициализации приложения:

импорт React из 'реакции'; импортировать ReactDOM из «act-dom »; импортировать {browserHistory} из'act-router '; импортировать маршруты из ./routes; ReactDOM.render (<История маршрутов = {browserHistory} />, document.getElementById ('root'));

И наконец, мы обновим App.js, чтобы он вложил дочерние компоненты, указанные в наших маршрутах:

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

Создание блога

Далее мы добавим ButterCMS, чтобы оживить наш блог. ButterCMS предоставляет API, который позволяет легко извлекать сообщения, категории, теги и авторов в блогах.

Сначала мы установим ButterCMS JS клиент :

npm установить buttercms - сохранить

Затем мы обновим BlogHome, чтобы получать сообщения из ButterCMS и отображать их. Используйте токен API в приведенном ниже примере или получите свой вход в ButterCMS с помощью GitHub ,

импортировать React, {Component} из 'response'; import {Link} из'act-router 'import Масло из' buttercms 'const butter = Butter (' de55d3f93789d4c5c26fb07445b680e8bca843bd '); класс BlogHome extends Component {constructor (props) {super (props); this.state = {загружен: ложь}; } fetchPosts (page) {butter.post.list ({page: page, page_size: 10}). затем ((соответственно) => {this.setState ({загружено: true, соответственно: resp.data})}); } componentWillMount () {let page = this.props.params.page || 1; this.fetchPosts (page)} componentWillReceiveProps (nextProps) {this.setState ({loaded: false}); let page = 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}> <Link to = {`/ post / $ {post.slug}`) }> {post.title} </ Link> </ div>)})} <br /> <div> {предыдущая_страница && <ссылка на = {`/ p / $ {предыдущая_страница}`}> Предыдущая </ Link> } {next_page && <Link to = {`/ p / $ {next_page}`}> Next </ Link>} </ div> </ div>); } else {return (<div> Загрузка ... </ div>)}}} экспорт по умолчанию BlogHome;

Далее мы обновим BlogPost.js для получения и отображения сообщений в зависимости от маршрута:

импортировать React, {Component} из 'response'; импорт сливочного масла из 'buttercms' const butter = Butter ('de55d3f93789d4c5c26fb07445b680e8bca843bd'); класс BlogPost extends Component {constructor (props) {super (props); this.state = {загружен: ложь}; } componentWillMount () {let slug = this.props.params.slug; butter.post.retrieve (slug) .then ((соответственно) => {this.setState ({загружено: правда, сообщение: 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 - сохранить реактивный шлем

Импортируйте модуль Helmet в наш BlogPost и используйте его в нашем методе render (), чтобы установить HTML-теги, которые должны быть в <head>.

<Шлем> <title> {post.seo_title} </ title> <meta name = "description" content = {post.meta_description} /> <meta name = "og: image" content = {post.featured_image} /> < / шлем>

Вот как выглядит полный код компонента. Проверьте DOM, чтобы убедиться, что теги установлены правильно.

импортировать React, {Component} из 'response'; import Масло из 'buttercms' import {Helmet} из "ответного шлема"; const butter = Butter ('de55d3f93789d4c5c26fb07445b680e8bca843bd'); класс BlogPost extends Component {constructor (props) {super (props); this.state = {загружен: ложь}; } componentWillMount () {let slug = this.props.params.slug; butter.post.retrieve (slug) .then ((соответственно) => {this.setState ({загружено: правда, сообщение: 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. Luckly, Netlify предлагает встроенный предварительный рендеринг, который позволяет нам сохранять наш код «безсерверным», и в то же время следить за тем, чтобы наш блог был оптимизирован для сканеров.

Развертывание в Netlify

Перед развертыванием в Netlify мы создадим производственную сборку нашего приложения:

пряжа установить пряжа запустить построить

Проверьте каталог сборки, чтобы убедиться, что производственная сборка была успешно создана. Чтобы загрузить свой сайт в Netlify, перетащите папку сборки на панель инструментов Netlify.

Предварительный рендеринг можно включить в настройках вашего приложения.

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

Помните, что наше приложение без сервера? Чтобы исправить ошибку 404, нам нужно создать правило перезаписи URL, которое обслуживает index.html, независимо от того, какой URL запрашивает браузер.

Для этого мы создадим файл _redirects в нашей директории сборки со следующей строкой:

/ * /index.html 200

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

Чтобы убедиться, что этот файл перенаправляется при каждой сборке приложения, мы можем обновить наш скрипт сборки в package.json:

"build": "response-scripts build && echo '/ * /index.html 200'> build / _redirects"

Заворачивать

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

Я надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы по настройке приложения React на базе ButterCMS, свяжитесь со мной по адресу [email protected], и я обязательно отвечу!

Меню сайта
Новости
Реклама
Реклама
Реклама