Если вам понравилась эта история, нажмите кнопку 👏 и поделитесь ею, чтобы помочь другим найти ее! Не стесняйтесь, чтобы оставить комментарий ниже.
В этой статье я говорю о том, как начать работу с одним из множества существующих фреймворков статического контента, а именно с Hexo. Я покажу вам, как начать работу с Netlify, а затем объясню, как вы можете использовать Firebase вместо этого и какие дополнительные функции Firebase может предложить, которые очень пригодятся. Я не буду хвалить одно перед другим, вместо этого я скажу вам, о чем нужно заботиться, если вы выберете Firebase. Природа статического контента сайта заключается в том, что он «работает» на всем, что обслуживает веб-сайты, поэтому не стесняйтесь выбирать вместо этого любое место для развертывания. Консоль AWS Amplify - это то, на что стоит обратить внимание.
Есть веские причины вести блог с Hexo. С другой стороны, вы должны освоить крутую кривую обучения, и этот инструмент не для всех. Конечно, конечно, не для смеси редакторов и разработчиков творческого контента, например.
Во многих случаях, в частности, если вы имеете дело с простыми требованиями к целевой странице, вы можете использовать либо платную услугу, например landerapp, либо просто работать поверх профессионально выглядящей темы начальной загрузки.
Если вы решите, что вам нужна сложная система ведения блогов с полным программным управлением и работающая исключительно на статическом контенте, выполните ряд шагов, которые я выполняю. Обратите внимание: это действительно имеет смысл только в том случае, если вы продолжаете создавать контент и используете Hexo в качестве блога. «Одностраничный» наверняка был бы излишним.
Без каких-либо дополнительных обязательств, то, что описано в этом документе:
1) Используйте Hexo через Netlify
2) Используйте Hexo для развертывания на хостинге Firebase.
3) Используйте этот плагин Hexo для создания страниц AMP.
4) Используйте плагин Hexo для создания карты сайта XML.
5) Если вы отправляете изображения через Hexo, используйте этот модуль
6) Уменьшите все
Есть сходства, но есть и различия.
1) Необязательно: Netlify + Hexo
Допустим, все содержимое вашего блога находится в каталоге с именем / superblog на вашем компьютере разработчика.
Итак, вот как вы можете создать блог Hexo (папка / superblog):
Все это было сделано примерно по этому руководству от Netlify: https://www.netlify.com/blog/2015/10/26/a-step-by-step-guide-hexo-on-netlify/
Прежде всего, установите hexo глобально:
npm установить hexo-cli -g
В случае, если после этого hexo не будет доступен глобально, выполните следующую очистку:
rm -rf node_modules / && npm install (Для контекста: это было необходимо, потому что простая глобальная установка hexo-cli не сработает мгновенно, см. также https://github.com/hexojs/hexo/issues/2076 )
Тогда пришло время немного магии гексогенерации, сравните также с этой страницей: http://jr0cket.co.uk/2016/06/blogging-for-developers-with-hexo.html:
hexo init
Запустите сайт, используя другой порт (подробнее: https://hexo.io/docs/server.html), обратите внимание, что Cloud9 публично обслуживает только определенные порты:
шестнадцатеричный сервер -p 8080
Это создаст все необходимые шестнадцатеричные файлы.
Теперь давайте отправим все это на GITHUB (https://github.com/xxx/site.git) и, следовательно, пусть Netlify создаст сайт параллельно - потому что Netlify подключен именно к этому репозиторию GIT и получит событие GIT:
git init
git удаленное добавление источника https://github.com/xxx/site.git
git config credential.helper store
git add.
git commit -am «что-то умное»
Необязательно: git push -f (для принудительной перезаписи файлов на GitHub)
Как создать новую запись в блоге сейчас?
hexo new «заголовок сообщения в блоге»
(Это создаст новый файл в superblog / source / _posts).
Теперь осталось только отредактировать новый файл. Вы можете протестировать его локально с помощью команды hexo server, отправив все это обратно в GitHub, и в итоге получится Netlify:
git add.
git commit -am «эхэм эхэм»
git push
Как упоминалось ранее, Netlify автоматически подберет изменения и сотворит чудеса.
Но не верьте мне на слово и посетите:
https: // ‹yournetlifyapp› .netlify.com /
Вы должны расширить команду сборки Netlify следующим образом, чтобы избежать ошибок сборки:
гексо очистить && гексо сгенерировать
А как насчет изображений или любых статических документов, таких как PDF-файлы, где их разместить?
Два варианта:
A) Вы размещаете его на сервисах хранения с высокой степенью масштабируемости, которые отлично справляются со статическими активами. AWS S3, хранилище BLOB-объектов Azure, Google Cloud Bucket. Они все великолепны.
Б) Вы размещаете ресурсы, в частности изображения, вместе с другими статическими элементами на своем веб-хостинге, как в данном случае Netlify. (Позже мы поговорим о развертывании всего в Firebase.)
A - лучший выбор с точки зрения чистой архитектуры с четким разделением задач.
B - лучший практический выбор, потому что плагины Hexo могут позаботиться о создании различных представлений изображений для разных форм-факторов для вас, и вам не нужно больше ничего делать.
А + В, конечно, можно поженить, приложив немного дополнительных усилий. На самом деле все зависит от вас.
НО ЧТО СЕЙЧАС?
Возможно, вы захотите изменить тему (https://hexo.io/themes/), поскольку тема по умолчанию не очень велика.
Для моего небольшого блога был выбран ICARUS, и в остальной части документа я буду ссылаться на него: https://github.com/ppoffice/hexo-theme-icarus/wiki
(Тем временем я нашел еще более интересную Фантомную тему.)
Есть некоторые дополнения, которые вы можете добавить на сайт, например, этот, чтобы расширить функциональность поиска на сайте: https://github.com/artchen/hexo-azuresearch
ПРИМЕЧАНИЕ. Нарушение структур GIT:
Если вы просто клонируете тему в папку своего сайта, вы увидите, что GIT разыграется с «неустановленными коммитами» и полностью игнорирует ваши добавления GIT.
Причина в том, что git clone копирует папку .git в ваш подкаталог, который является еще одной точкой проверки git - вообще возиться с вашей синхронизацией GIT.
Найдите эти файлы:
найти темы / *. git *
Просто удалите всю папку .git и .gitignore в этой папке темы.
Затем из корневого каталога сайта запустите git add *, затем git commit -am «что угодно» и выполните: git push.
КАК ЗАПИСАТЬ СТРАНИЦЫ БЛОГА В MARKDOWN
Https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
Создайте новый пост Hexo через интерфейс командной строки:
hexo new blog заголовок сообщения (в котором могут быть пробелы!)
Следует иметь в виду, что можно настроить так называемые постоянные ссылки. Это ссылки, которые создаются, например, на основе названия статьи в блоге. Другими словами, URL заголовков для страниц вашего веб-сайта. На самом деле настоятельно рекомендуется изменить эти ссылки, чтобы сделать их красивыми и значимыми.
Примером шаблона сплошной постоянной ссылки может быть что-то вроде этого:
: год /: месяц /: день /: post_title /
Post_title - это заголовок вашего .md файла. Что намного лучше, чем: title, в котором использовалось бы имя файла.
2) Рекомендуется: развертывание Hexo + на хостинге Firebase.
Firebase высокопроизводительна и поставляется с CDN и бесплатным настраиваемым SSL. Множество причин разместить статический сайт на Firebase.
Учтите, однако:
- Обратной стороной Firebase является то, что с передачи 10 ГБ вам нужно начать платить за хостинг - в какой-то момент с очень популярным сайтом миграция может быть экономически разумным шагом. В любом случае нужно будет оценить.
- У вас может быть около 440 тысяч загрузок (без кеширования) страниц примерно за 132 доллара по гибкой цене на хостинге Firebase.
- Подсказка: попробуйте объединить Firebase с CloudFlare для оптимизации затрат - CloudFlare имеет щедрый уровень бесплатного пользования и может убрать самый большой успех.
Работа с шестнадцатеричным интерфейсом командной строки остается прежней, однако передача кода по умолчанию не происходит через GIT.
Вот как это будет работать вместо этого, теперь снова предполагая, что содержимое блога находится в папке / superblog вашей машины разработчика:
Перво-наперво: чтобы это работало, необходимо установить Firebase CLI и пройти аутентификацию.
Перейдите в папку, из которой вы хотите начать развертывание, которая не обязательно должна быть корневой папкой «Firebase public», но может быть где угодно.
Нажмите там firebase init - и затем вам будет предложено выбрать проект хостинга для связи.
Результатом будет файл firebase.json. Возможно, вам придется внести в него некоторые изменения, см. Https://firebase.google.com/docs/hosting/full-config.
Типичный firebase.json выглядит так:
{«хостинг»: {
«общедоступный»: «общедоступный»,
«игнорировать»: [«firebase.json», «** /. *», «** / node_modules / **»],
«заголовки»: [{
«источник»: «**»,
«заголовки»: [{
«ключ»: «Cache-Control»,
«значение»: «макс-возраст = 960000»
}]},{
«источник»: «404.html»,
«заголовки»: [{
«ключ»: «Cache-Control»,
«значение»: «макс-возраст = 960000»
}]},{
«источник»: «** / *. @ (eot | otf | ttf | ttc | woff | font.css)»,
«заголовки»: [{
«ключ»: «Access-Control-Allow-Origin»,
«значение»: «*»
}]}],
«переписывает»: [{
«источник»: «**»,
«пункт назначения»: «/index.html»
}],
«cleanUrls»: истина,
«trailingSlash»: false
}}
Если вы инициировали в каталоге, который представляет собой общедоступный каталог Firebase, просто используйте «.» для государственной собственности.
Там есть некоторая конфигурация Firebase JSON. Прочтите на https://firebase.google.com/docs/hosting/full-config, что все это означает, в основном это установка заголовков кеша и указание, разрешить ли завершающие косые черты и тому подобное. Очень полезная штука - здесь же можно настроить перезапись.
Ладно, ДОСТАТОЧНО ЭТОГО, КАК Я РАЗВЕРТАТЬ МОЙ HEXO СЕЙЧАС?
Просто перейдите в общедоступный выходной каталог Hexo и нажмите:
firebase развернуть
Вам нужно будет убедиться, что общедоступный каталог обновлен, что означает, что вам нужно будет хотя бы запустить
гексо генерировать
И если вы хотите, чтобы все было в чистоте, тогда
гексо очистить && гексо сгенерировать
Теперь вернемся к настройке хостинга с помощью Firebase для этого небольшого хостингового проекта:
Он настроен с использованием проекта хостинга xxx, который вы определили в Firebase, поэтому URL-адрес:
Посмотрите все это в консоли / портале Firebase: https://console.firebase.google.com/
3) AMP-страницы с Hexo Сначала загрузите этот плагин для Hexo
Https://www.npmjs.com/package/hexo-generator-amp
В этом контексте полезна эта статья, в которой объясняется, как сервер узнает об AMP-версии вашей страницы:
Https://stackoverflow.com/questions/37103814/how-does-the-server-know-when-to-serve-an-amp-page
В отличие от руководства, приведенного в описании пакета npmjs, мне пришлось вместо этого предпринять следующие шаги.
а) Исправьте «не удалось создать content.json»:
Мне удалось исправить эту досадную ошибку вот так:
npm install hexo-generator-json-content @ 1 - save (который использует только версию 1 и загружает ее, обновляя package.json)
б) Поменять head.ejs - но где-нибудь еще!
Затем отредактируйте файл «head.ejs» в моем каталоге тем icarus, как он написан в npm how-2 - только этот файл находится не в (..) / _ partial, а в themes / icarus / layout / common!
В head.ejs я вставил этот фрагмент jade прямо перед началом первой ‹link rel›:
‹% If (is_post () && config.generator_amp) {%›
‹Link rel =” amphtml ”href =” ‹% = config.url%› / ‹% = page.path%› amp / index.html ”›
<% } %>
(Необходимо правильно указать config.url в файле _config.yml вашей страницы, иначе URL-адрес будет искажен!)
Запустите тестовый сервер и проверьте, является ли контент допустимым AMP через этот сайт:
Https://validator.ampproject.org/
Ваши URL-адреса AMP будут выглядеть так:
http: // ‹site› / 2017/06/25 / life / amp /
И он еще не проиндексирован?
Все это бесполезно, если ваша страница не проиндексирована.
Вы можете проверить это так: https://www.google.com/search?q=site:https://mysite.com
Вообще говоря, вы можете проверить индексацию + обработку ваших AMP-страниц с помощью инструментов для веб-мастеров: https://www.google.com/webmasters/tools/accelerated-mobile-pages
Изменение отслеживания Google Analytics
Из коробки есть бит отслеживания. Коснитесь его, перейдя через шаблон .ejs. Выполните поиск в папке themes / landscape / layout, где установлена ваша установленная тема, например, icarus. Используемый шаблон будет называться google-analytics.ejs.
Добавление любого другого пользовательского JavaScript / HTML
Перейдите к файлам шаблонов контента, таким как article.ejs, в ‹theme› / layout / common и вставьте туда все, что является общим для этого типа контента (статьи). Я вставил, например, Чат FB на странице.
Подробнее в этом красивом блоге.
Обратите внимание, что чат Facebook в мобильном Интернете оставляет желать лучшего. Если это вызывает беспокойство, рассмотрите возможность размещения ссылки на бот (канал) FB Messenger. Как это было бы, если вы хотите перенаправить всех пользователей в свой чат FB.
4) XML-карта сайта для вашего Hexo сайта
Для этого есть плагин. Вы хотите использовать его, поскольку AMP-версии ваших страниц - это одно, но, что более важно, поисковые системы должны иметь возможность легко сканировать содержимое вашего сайта, и именно здесь карта сайта XML хороша. Однако это не серебряная пуля.
Как там сказано: https://github.com/hexojs/hexo-generator-sitemap
… Установить его напрямую через NPM:
npm install hexo-generator-sitemap –save
Остерегайтесь - версия Hexo, которую вы используете, имеет значение.
Такой простой записи в _config.yml достаточно, не нужно указывать шаблон, если вы не хотите:
карта сайта:
путь: sitemap.xml
Возможно, стоит вручную добавить этот файл в Google Search Console. Проблема здесь в том, что общая рекомендация для XML-карт сайта - помещать туда только те страницы, которые полезны для поиска Google, поэтому никаких служебных страниц. Фактически то же самое и с robots.txt. Вы можете потратить некоторое время на доводку этих вещей. Добро пожаловать в мир SEO!
5) Используйте этот модуль, если вы отправляете изображения через Hexo
В противном случае вы будете показывать всем фотографии в высоком разрешении.
Https://www.npmjs.com/package/hexo-image-sizes
На самом деле, размещение изображений с остальной частью кода веб-страницы Hexo - неплохая идея, потому что это позволяет очень легко автоматически генерировать различные представления изображений. Если вы ссылаетесь, например, на изображение на S3, то оно всегда будет таким, независимо от того, просматривается ли оно, например, на мобильном устройстве или на рабочем столе.
Еще один хороший способ справиться с этим - использовать небольшие изображения и делать ссылки на изображения в высоком разрешении, которые можно разместить где угодно. Эти изображения, по крайней мере, не будут мешать загрузке страницы, как неизбежно будут большие изображения.
6) Всегда минимизировать все - автоматически
Этот модуль, как показано ниже, уменьшит размер CSS и JS как часть сборки. Однако он не объединяет JS и CSS в несколько файлов.
Https://www.npmjs.com/package/hexo-filter-cleanup
И последнее, но не менее важное: сделайте базовую проверку производительности.
Что бы вы ни делали, лучше проверьте окончательный размещенный сайт с помощью типичных инструментов Google, таких как https://developers.google.com/speed/pagespeed/insights/
… Или, по сути, очень похоже:
Https://testmysite.withgoogle.com/intl/en-gb
Go go go!
И, конечно же, пусть мир узнает о вашем замечательном продукте. В этой статье кратко изложено, что вам следует делать прямо сейчас. Технически вы сделали весь минимум, маркетинг вашего сайта теперь является следующей большой проблемой.
Https://blog.kissmetrics.com/get-google-to-index/
Приложение
Мета-теги
Что касается поддержки SEO, может ли Hexo добавить хотя бы подходящие мета-теги? Да на самом деле много. Вот как вы повлияете на сгенерированные метатеги: https://stackoverflow.com/questions/44168115/how-do-you-override-generated-meta-tags.
Знайте только, что мета-теги в целом переоценены для SEO.
Заинтересованы в выравнивании DNS? "Проверь это".
