Как и почему я создал этот сайт с помощью JAMstack

1. Вот что меня вдохновило на создание статического сайта
2. Несколько вещей, которые вам нужно решить, прежде чем погрузиться в
3. Как создать сайт с помощью JAMstack
4. 1. Установите Ruby, Jekyll и необходимые гемы
5. 2. Создать сайт и подобрать тему для сайта
6. 3. Подключите свой сайт к Github.
7. 4. Соедините Netlify и Github.
8. 5. Настройте собственный домен
9. Вывод и дополнительные ресурсы

Я был в восторге от того, чтобы пробовать новые гиковские вещи много-много лет. Так что представьте мой энтузиазм, когда я увидел этот твит Тома Беннета некоторое время назад:

Первая реакция: «WTF - это JAMstack?». Вторая реакция: нажмите .

Прочитав о JAMstack в общей сложности 2 статьи, я понял, что должен создать сайт, используя его.

Вот что меня вдохновило на создание статического сайта

Не буду лгать, часть восхищения - просто факт, что это немного впереди кривой и все еще технически грубо. Настроить сайт Wordpress и сделать его гулким больше не так сложно, что, очевидно, является отличной вещью. Но время от времени вам нужны новые технические проблемы, если вы выродок, как я.

Но, безусловно, главная причина, по которой я с энтузиазмом относился к JAMstack, - это просто faaaaast, который загружают эти сайты.

Например, вот TTFB (время до первого байта) и время загрузки для Jamstack.org:

И это не только тот сайт, но каждый современный статический сайт, который я видел, загружался очень быстро. Мне нравиться

Помимо уже упомянутых технических проблем, связанных с созданием сайта, подобного этому, и быстрым временем загрузки, я также консультируюсь с компаниями по поводу их технического SEO. Как я могу быть действительно хорош в своей работе, если я не знаю, что делают веб-технологии возможными? Я не мог

Несколько вещей, которые вам нужно решить, прежде чем погрузиться в

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

Во-первых, какой генератор статического сайта вы собираетесь использовать? У вас много вариантов, но это основные:

Тонны больше, но это, по крайней мере, три основных основанный на staticgen.com ,

Судя по моим исследованиям, у всех есть свои плюсы и минусы, как и у любой технологии. У меня есть склонность принимать решения такого типа на основе слишком большого количества исследований, поэтому на этот раз я решил упростить решение: я просто пойду с Джекиллом.

Одна из причин, по которой я решил пойти с Джекиллом, заключается в том, что у него было много доступных тем, и поскольку он был построен на Ruby (с которым у меня немного опыта), я знал, что, вероятно, могу расшифровать, по крайней мере, некоторые из них. код и измените его при необходимости.

Не задумывайтесь над этим, просто выберите один и придерживайтесь его.

После выбора генератора сайта, вторая вещь, которую нужно рассмотреть, это где вы хотите разместить сайт. Два отличных варианта Netlify а также GitHub Pages ,

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

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

Несмотря на то, что во всех этих службах есть обширные разделы справки и руководства, будьте готовы немного оторвать голову и сообщения об ошибках Google, которые могут не иметь смысла. Все будет хорошо в конце.

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

• как пользоваться терминалом
• какой-то неясный текстовый редактор, чтобы вы могли обсуждать их с другими ботаниками (мне нравится Sublime Text)
• установка Ruby или аналогичного
• Модель-Вид-Контроллер или MVC для краткости
• некоторое понимание языков программирования, HTML и CSS, поскольку вряд ли вам нужно что-либо менять в кодовой базе

Кроме того, помните, что статические сайты не Wordpress. Существует гораздо меньше плагинов, которые вы можете просто установить. И даже если есть, заставить их работать часто PITA. Хорошим примером этого является hreflang, поскольку на веб-сайтах Jekyll нет простых решений для реализации. Если вы знаете, дайте мне знать в твиттере ,

Таким образом, с помощью шумихи и отказа от ответственности, более или менее в стороне, давайте заставим наши умные руки стучать по клавиатуре.

Как создать сайт с помощью JAMstack

Теперь, когда вы, возможно, определились с технологическим стеком, с которым хотите создать статический веб-сайт, давайте заполучим этот движок.

Как всегда, я могу говорить только о своем опыте, поэтому примите все следующее: пример использования Netlify - GitHub - Jekyll -combo. Кроме того, имейте в виду, что в данном примере речь идет о создании веб-сайта, поддерживаемого и написанного одним человеком, а не командой. Для команд, вероятно, имеет смысл рассмотреть что-то вроде Netlify CMS или похожие.

1. Установите Ruby, Jekyll и необходимые гемы

Первое, что вам нужно сделать, это установить Ruby и некоторые Ruby гемы (= плагины). Даже если у вас установлен Ruby, имеет смысл проверить версию, которую вы, возможно, установили, чтобы убедиться, что у вас достаточно свежая версия.

Я не буду подробно описывать процесс, поскольку ваша ОС и потенциально уже существующая среда разработки, скорее всего, не совпадают с моей. Вот инструкции по как установить Ruby прямо из документации ,

Вы также можете захотеть заглянуть в RVM (Ruby Version Manager) или подобное. Вы поймете это.

В блоге Netlify также есть хорошая статья об установке Ruby с Jekyll на ваш компьютер. Проверьте это здесь ,

2. Создать сайт и подобрать тему для сайта

После того, как вы запустите Ruby и Jekyll, вы должны создать сайт, а затем получить какую-то тему для сайта. По крайней мере, это мой процесс, потому что каким-то образом видимость слов в браузере делает его более конкретным, чем просто вид кода на экране.

Чтобы создать сайт и перейти в нужную папку, введите в терминале следующее:

Jekyll новый, что бы вы ни хотели позвонить на ваш сайт

CD все, что вы хотите позвонить на ваш сайт

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

Вы можете найти кучу тем, просто погуглив «джекилл тему» ​​и т. Д., Так что это не будет проблемой. Как правило, темы легко установить, и я уверен, что там, где вы скачиваете тему, есть инструкции по установке.

Чтобы проверить, что ваш сайт работает локально, введите в терминале в папке, в которой вы создали сайт, следующее:

Джекилл служить

Это должно привести что-то вроде этого к окну вашего терминала:

Оттуда вы можете скопировать и вставить адрес сервера в ваш браузер. Вуаля, ваш сайт теперь готов к следующему шагу.

3. Подключите свой сайт к Github.

Итак, теперь у вас есть грубая версия сайта, и вы, возможно, захотите вставить ее в Интернет. Для того, чтобы сделать это, вам нужно куда-то перенести свою кодовую базу и контент. Как я уже говорил, я использую Github.

На их сайте есть хорошие руководства, по крайней мере, за входом в систему, как вы можете отправить свой код на Github. Поэтому я не буду печатать все это здесь.

Поскольку ваш сайт теперь живет локально на вашей машине («исходный код»), а также на Github («код в облаке»), вам нужно всегда помнить о внесении любых локально внесенных изменений в Github.

Чтобы сделать это, вы всегда должны повторять эти строки, когда хотите обновить свой сайт (мой комментарий после //, не включайте их в окно вашего терминала).

мерзавец добавить. // добавляет все измененные файлы к следующему push git commit -m «Ваше сообщение здесь» // добавляет комментарий к Github о том, что вы изменили git push -u origin master // отправляет ваш код с локального компьютера на Github

Если вы этого не делали раньше, ваш компьютер, скорее всего, захочет, чтобы вы авторизовали загрузку с помощью Github. Еще раз, у Github есть хорошие инструкции, как это сделать.

На данный момент весь ваш код принадлежит Github, и вы можете увидеть его там в репозитории, который вы создали:

Хорошо, мы добираемся туда.

4. Соедините Netlify и Github.

Откровенно говоря, у меня были некоторые проблемы, как заставить связь между Netlify и Github работать должным образом. Я мог подключить службы, но всякий раз, когда я проверял временный URL, который они генерировали для сайта, я всегда получал ошибку 404. Если у вас есть похожие проблемы, я предлагаю вам взглянуть на ваш Gemfile, так как он должен указать, какую версию Jekyll вы хотите использовать. Это был недостающий кусок для меня, который вызвал некоторое разочарование и безумный поиск в Google.

Бэкэнд Netlify прост в использовании, и связать его с Github довольно просто (насколько я помню). В основном вам просто нужно заполнить несколько полей, как это:

Как только эта ссылка заработает, вы сможете увидеть свой веб-сайт в реальном времени на (временном) адресе Netlify! Если вы даже в здравом уме, вы, вероятно, захотите сделать еще одну вещь: настроить собственный домен.

5. Настройте собственный домен

Работать с доменом относительно просто: вам просто нужно изменить DNS, чтобы он указывал на Netlify на любом регистраторе домена, который вы используете. Я использую Namecheap, так что для меня это выглядит примерно так:

Если у вас есть какие-то проблемы с тем, чтобы домен хорошо связывался с вашим сайтом, я рекомендую вам проверить файл _config.yml, а также Gemfile, поскольку эти дерзкие ошибки могут легко привести к ошибкам. Кроме того, Netlify имеет хорошую поддержку клиентов, если вам нужна помощь. Но гики не пользуются поддержкой клиентов, верно? :)

Вы также, вероятно, хотите использовать SSL для своего сайта. К счастью, это можно легко активировать с помощью Netlify с помощью пары щелчков мыши, особенно если у вас все в порядке с Let's Encrypt SSL.

Вывод и дополнительные ресурсы

Если это руководство не полностью отстой, теперь у вас должен быть запущен какой-то статический сайт. Я действительно чувствую, что это следующий шаг для публикации в Интернете, особенно если вы разрабатываете эти сайты для прогрессивных веб-приложений.

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

Создание сайта не так сложно и не требует огромного количества программного обеспечения. Тебе понадобиться:

1. Редактор кода
2. Аккаунт Github или аналогичный
3. Хостинг
4. Локальная среда разработки на вашем компьютере

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

Похожие

Комментарии