Уважаемый пакет node.js, который размещен почти бесплатно

В этой статье я покажу, как можно быстро создать новый блог на основе авторитетного пакета node.js, который размещается бесплатно (почти). Звучит слишком хорошо, чтобы быть правдой? Это не! Читать дальше…

Ведение блога об AWS означает, что по правилам предположения я должен вести этот блог на AWS (https://www.awsadvocate.com). Что может быть лучше для ведения блога, чем бессерверный? С 12-месячной бесплатной учетной записью AWS я получаю 100% бесплатный хостинг на год. Даже после этого периода, по моей оценке, размещение моего блога должно стоить мне всего около 0,50 доллара в месяц. Сравните это в среднем с 10-20 долларами на размещение большинства других блогов, таких как Wix, Wordpress.com или Webflow. Кроме того, я получаю следующие дополнительные преимущества при размещении на AWS:

  • Глобальная сеть CDN через AWS CloudFront для безумной скорости отклика страниц
  • 100% контроль над моим контентом и темой с отличным фреймворком для ведения блогов node.js (Hexo)
  • Простой доступ к частному git для управления версиями с помощью AWS CodeCommit
  • Бесплатные сертификаты SSL / HTTPS (годовая стоимость 100 долларов США) от AWS Certificate Manager
  • Это способ веселее!

Hexo - отличный фреймворк для ведения блогов с открытым исходным кодом, основанный на node.js, идеальный способ начать вести блог с форой. Прочтите мой пост Hello World для получения более подробной информации о Hexo и некоторых других полезных ссылках!

Наши основные шаги по настройке и запуску нашего блога следующие:

  1. Установить Hexo
  2. Установите AWS Amplify для публикации на AWS
  3. Опубликовать в AWS
  4. Адрес index.html, проблема с маршрутизацией

Установите Hexo Blogging Framework

Первым шагом к настройке нашего блога является установка Hexo, нашей инфраструктуры ведения блогов. Выполните следующую команду node.js, чтобы установить Hexo (сначала установите Node, если вы еще этого не сделали).

$ npm установить hexo-cli -g

После установки Hexo CLI вам нужно создать новый сайт:

$ hexo init ‹folder›
$ cd ‹folder›
Установка $ npm

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

$ hexo сервер

Ваш сайт должен выглядеть так, работающий на http: // localhost: 4000:

Добавьте AWS Amplify, чтобы упростить развертывание в облаке

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

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

Для начала установите AWS Amplify CLI (если вы еще этого не сделали):

$ npm install @ aws-ampify / api @ aws-ampify / pubsub

После установки AWS Amplify CLI необходимо инициализировать его в корне вашего проекта:

$ ampify init

Эта инициализация предложит вам несколько настроек. Вы можете найти мои варианты ниже.

source и public необходимы для поддержки путей Hexo's Source Directory и Distribution Directory

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

$ ampify добавить хостинг

Еще один шаг перед публикацией - обещаю, он мой последний. Нам нужно внести несколько изменений в конфигурацию для поддержки некоторых особенностей Hexo. Добавьте в файл package.json в корень вашего проекта следующее:

«Скрипты»: {
«старт»: «шестнадцатеричный сервер»,
«сборка»: «шестнадцатеричная очистка && шестнадцатеричное развертывание»
}

Эти конфигурации информируют развертывания Amplify о том, как запустить и собрать наш пакет Hexo.

Выполнив этот последний шаг, вы теперь можете использовать свой стандартный «npm start» для локального ведения блога - что эквивалентно «шестнадцатеричному серверу». Теперь мы также готовы опубликовать:

$ ampify опубликовать -c

Ключ - «-c». Поскольку AWS CloudFront (CDN) кэширует файлы, необходимо использовать параметр -c, чтобы очистить этот кеш, иначе публикация не повлияет на вас, пока этот кеш не станет недействительным. Очевидно, для нашей первой публикации в этом нет необходимости.

После завершения публикации вы сразу же сможете просмотреть свой веб-сайт. Обратите внимание на URL-адрес, глобально размещенный на AWS CloudFront CDN:

Не стесняйтесь проверить мое готовое бессерверное развертывание Hexo, однако, как вы уже догадались, https://www.awsadvocate.com по сути то же самое :)

Устранение проблемы с подпапкой CloudFront Index.HTML

Вы можете заметить, что только ваш корень предполагает использование index.html. Все остальные страницы и сообщения в блогах этого не делают, а вместо этого перенаправляют вас в корень / домой. Чтобы исправить это:

  1. Измените распространение CloudFront, общие настройки и удалите значение index.html из корневого объекта по умолчанию.
  2. На вкладке «Происхождение и группы происхождения» щелкните источник, созданный Amplify, и измените путь на глобально доступный URL-адрес корзины S3, на которой размещен ваш веб-сайт (вы можете получить URL-адрес, как показано на скриншоте ниже).

Следующие шаги

Разве это не было просто? И все это благодаря AWS Amplify, который упрощает развертывание бессерверных приложений S3. Однако ваши усилия по продвижению своего блога только начинаются. Некоторые из ваших следующих шагов, вероятно, следующие:

  • Передайте свой код системе управления версиями (я использую AWS CodeCommit) - но, вероятно, это был ваш первый шаг, верно?
  • Используйте AWS Certificate Manager, чтобы создать бесплатный сертификат SSL / HTTPS для безопасного хостинга и преимуществ SEO.
  • Настройте AWS CloudFront для использования личного домена
  • Установите тему Hexo, если вам не нравится нестандартная тема.
  • Настройте свой сайт!
  • Напишите свой первый пост в блоге!

Спасибо!

~ Фил