Используя react-router для управления навигацией, я столкнулся с ограничением страниц GitHub, из-за чего я перешел на Netlify для хостинга моего статического сайта. Вот почему.

Первоначально опубликовано на www.jamiemaison.com.

При редизайне моего сайта-портфолио недавно я столкнулся с технической проблемой, которая поставила меня в тупик. Но сначала позвольте мне немного отмотать назад и рассказать историю.

Еще в 2015 году я хотел разместить пару статических сайтов, и, если честно, есть масса вариантов, когда дело доходит до хостинга. Вы спросите, что такое статический сайт? Интернет склонен к более лаконичному объяснению этих вещей, так что позвольте мне передать слово Техопедии:

Статическая веб-страница – это страница, созданная с использованием кода HTML и имеющая одинаковое представление и содержание независимо от личности пользователя или других факторов.

А потом я наткнулся на GitHub Pages, службу хостинга статических сайтов, предназначенную для размещения ваших страниц непосредственно из репозитория GitHub. Пока вам не нужно поддерживать код на стороне сервера, страницы GitHub позволяют размещать сайт с помощью:

  • Возможность HTTPS
  • Поддержка собственного домена
  • Мягкий лимит пропускной способности 100 ГБ в месяц

И самое главное, это бесплатно 🎉

Звучит здорово, правда?! Так почему же я переехал? Позвольте представить вам проблему.

Проблема:

Сайт, на котором вы сейчас находитесь, обрабатывает навигацию с помощью React-Router; Если вы ищете любой вид навигации с помощью React, я настоятельно рекомендую вам ознакомиться с ним. Для тех, кому интересно, эта часть кода выглядит так:

<BrowserRouter>
    <Route exact path="/" component={Home} />
    <Route exact path="/blog" component={Blog} />
    <Route path="/blog/:postId" component={BlogPost} />
</BrowserRouter>

Так какое это имеет отношение к чему-либо? Что ж, React-Router отлично справляется с динамической обработкой изменений URL при переходе из корня. Если бы пользователи перешли на jamiemaison.com/blog с главной страницы, у них не было бы проблем, но если бы они обновили страницу или перешли туда напрямую, тогда...

Это происходит потому, что jamiemaison.com/blog на самом деле не существует на сервере. После небольшого исследования, казалось, было два варианта:

1) История хэшей

React-Router имеет компонент под названием HashRouter, который позволяет вам добавлять хеш-бэнги в ваши URL-адреса. В конечном итоге это означает, что все запросы к серверу будут проходить через корень веб-сайта, а не ссылаться на мертвую страницу. Вместо www.jamiemaison.com/blog URL-адреса будут выглядеть примерно так www.jamiemaison.com/#!/blog. Несмотря на то, что Google устарел, он по-прежнему индексирует URL-адреса с хеш-бангами, поэтому особых проблем с этим не возникает. Они просто выглядят некрасиво. Такой страшный...

2) Перенаправление

Webpack элегантно справляется с этим во время разработки, перенаправляя все запросы URL через корень, позволяя указать publicPath. Единственная проблема заключается в том, что на страницах GitHub нет механизма перенаправления.

Введите Netlify.

Решение:

Я мог бы подробно рассказать обо всех замечательных вещах, которые Netlify предлагает помимо страниц GitHub (автоматическое развертывание, предварительный просмотр изменений и т. д.), но единственной функцией, которая заставила меня переключиться, была возможность добавлять перенаправления.

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

/* /index.html 200

Это указывает Netlify, что все успешные (200) запросы к серверу (/*) должны перенаправляться через /index.html. Следовательно, если вы сейчас перейдете к www.jamiemaison.com/blog, будет отображаться правильная страница!

Сноска

Стоит отметить, что GitHub Pages по-прежнему является отличным продуктом и до определенного момента будет работать отлично. Этот момент просто оказался для меня включением react-router. Если вы хотите узнать больше о некоторых преимуществах Netlify, которые я обнаружил, вы можете связаться с нами в Твиттере @jamiemaison!

У вас есть проект, который вы хотите начать, думаю, вам может понадобиться моя помощь с чем-то или вы просто хотите связаться? "Связаться!"