Как с помощью Gatsby создать свой блог и работать над ним с телефона

1656636254 kak s pomoshhyu gatsby sozdat svoj blog i rabotat nad

Ху Чэнь

sWPAKdJO9kQzAvjnMoCMKhXpKPJZUpSwdh2A
Изображение автора Иисус Китеке

Недавно я решил перенести свой блог на Gatsby. Gatsby – чрезвычайно быстрый генератор статических сайтов на основе React.

Вопрос

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

Есть два вида людей: люди, пишущие на таких платформах, как Medium, и люди, самостоятельно кодирующие блог с помощью статических генераторов сайтов.

Писать на публичных платформах, таких как Medium, имеет много преимуществ перед статическими генераторами сайтов. Если вы пишете на публичных платформах, можно писать на ноутбуке и редактировать на телефоне. После того, как вы закончите писать, вам просто нужно нажать кнопку «Опубликовать». Все сделано, ваш блог работает и вы можете сразу охватить свою аудиторию.

С другой стороны, если вы пишете блог в статическом генераторе сайтов, вам нужно будет запомнить все сценарии, предварительно просмотреть блог на localhost, создайте блог для производства, закрепите и отправьте свои изменения на GitHub и разверните свой сайт для всех. Если что-нибудь пойдет не так, вам, возможно, придется повторить некоторые шаги и подождать несколько минут, пока блог не станет тем, что вам нужно.

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

Почему стоит писать на Гэтсби, а не на публичных платформах?

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

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

Но как я могу сделать так, чтобы писать в Gatsby так же легко, как писать на Medium?

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

В моей установке с Travis CI, git push это новая кнопка «Опубликовать». Все, что вам нужно сделать, это закрепить и продвинуть код. А также я расскажу, как редактировать блог по телефону.

Я разделил эту публикацию на пять разделов:

  1. Как создать блог Гэтсби
  2. Настройка страниц Github для размещения вашего блога
  3. Настройка Travis для автоматического развертывания
  4. Добавление нового блога и его публикация
  5. Бонус: как писать блог на телефоне

1. Как создать блог Гэтсби

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

Я предполагаю, что вы уже разработчик JavaScript и знаете некоторые основы npm, yarn, и постоянная интеграция Для этого учебника я буду использовать yarn но не стесняйтесь использовать npm.

Сначала установите gatsby-cli и создайте новое репо с помощью официального стартового блога Gatsby.

$ yarn global add gatsby-cli
$ gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
$ cd gatsby-blog
$ gatsby develop

Теперь откройте localhost:8000 в вашем браузере, и вы увидите созданный блог в своем браузере.

my9H4GVkyo4urZ6OjGV1GKGkVRFniTSMJZZu

2. Настройте страницы Github для размещения блога

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

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

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

Теперь создайте репо с названием имя пользователя.github.io. Это будет репозиторий как исходного кода для вашего сайта, так и сгенерированной рабочей сборки.

Поскольку страница GitHub предоставляет содержимое из master ветка, вам нужно будет развернуть содержимое public папка, созданная с помощью yarn build команда к master филиал. Нам нужно будет поместить наш исходный код в другую ветвь. Мы позвоним develop.

Давайте создадим начальный коммит и переименуем ветку на develop.

$ git init
$ git add .
$ git commit -m “Initial Commit”
$ git branch -m develop

Теперь нам нужно поместить наш код в GitHub. Если вы уже создали репо под названием имя пользователя.github.ioотправьте свой код в хранилище.

$ git remote add origin git@github.com:username/username.github.io.git
$ git push -u origin develop

Убедитесь, что нет master ветвь в вашем хранилище GitHub, а для ветки по умолчанию установлено значение develop.

3. Настройте Travis для автоматического развертывания

Это важный шаг. Хотя можем использовать yarn deploy для развертывания, это еще три шага: создать общую папку, развернуть на странице GitHub, подождать и проверить онлайн.

Но мы можем избавиться от этих шагов с помощью Travis CI. Travis CI – это размещенная, распределенная служба постоянной интеграции, которая используется для создания и тестирования проектов программного обеспечения, размещенных на GitHub.

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

Создать.travis.yml файл в корне проекта

language: node_js
cache:
  directories:
    - ~/.npm
notifications:
  email:
    recipients:
      - chen@huchen.me
    on_success: always
    on_failure: always
node_js:
  - '9'
git:
  depth: 3
script:
  - yarn build
deploy:
  provider: pages
  skip-cleanup: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local-dir: public
  target-branch: master
  on:
    branch: develop

Вы также можете посмотреть на Gist. Позвольте мне объяснить эту конфигурацию:

  • оповещение: Я попросил Тревиса прислать мне электронное письмо как об успехе, так и о неудаче. По умолчанию он отправляет электронное письмо, только если статус изменился (например, если он был успешным, но изменен на неудачный, или если он был неудачным и изменен на исправленную сборку). Но я хотел бы получить электронную почту, даже если это удастся, чтобы я мог еще раз проверить онлайн.
  • git:depth:3: Я попросил Тревиса использовать глубину. 3 при клонировании проекта, поскольку это поможет сделать сборку быстрее.
  • сценарий: Сценарий, который Тревису нужно запустить yarn buildкоторый создает статические файлы в public папку для дальнейшего развертывания.
  • развернуть: Я попросил Тревиса развернуть на GitHub Pages после этого yarn build успех сценария. Он использует $GITHUB_TOKEN Я устанавливаю настройки Travis repo (я перейду к этому дальше), отправляю содержимое public папку в GitHub master ветвь и должна запускать развертывание только на develop филиал. Нажмите здесь, чтобы узнать больше о развертывании конфигурации.

Создайте маркер, который Тревис пришлет на GitHub

Вам нужно будет создать личный маркер доступа с помощью public_repo или repo scope (хранилище необходимо для частных хранилищ), чтобы позволить Тревису посылать код в хранилище GitHub. Это потому, что Тревис бежит yarn build и нужно нажать public папку в папку master отделение, где обслуживаются GitHub Pages.

C1S4VhjIRO8g3RHkXUZClU-1I7oSQAW9JE87

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

qKfFkOcgYCXlEwmPeghLMQiBiGsIqYtSj22J

Теперь добавьте .travis.yml в git и отправьте изменения на GitHub.

$ git add .travis.yml
$ git commit -m “Add Travis config file”
$ git push origin develop

Теперь вы можете проверить статус на Travis. Вы должны увидеть, что статус Тревиса сменился желтым (бегает). Если все в порядке, через несколько минут он станет зеленым, и вы должны получить электронное письмо об успешном сборнике. Вы можете посетить чтобы просмотреть свой только что созданный блог.

tybmW8vB9ePsasJiyCPD-yrEwvDN27VIRZYg

4. Добавьте новый блог и опубликуйте его

Вот и наступает самое интересное. Теперь я покажу, как легко опубликовать новый блог с помощью этого процесса.

Теперь давайте добавим новый блог.

  1. Создайте файл index.md в src/pages/new-blog; . Вам нужно будет создать новую папку new-blog так же.
  2. Добавьте простое содержимое index.md.
---
title: Hello New Blog
date: "2018–04–16T23:46:37.121Z"
---
Hello World

3. Зафиксируйте этот новый файл и отправьте его на GitHub

$ git add .
$ git commit -m “Add a new blog”
$ git push origin develop

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

7fBP55Hcdm30UdOefXqsvJmnleiZTzyYDfaw

5. Бонус: как писать блог с телефона

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

Это оказалось достаточно просто. Все, что вам нужно сделать, это добавить файлы рабочего стола и документов в iCloud Drive и разместить свое хранилище на рабочем столе или документах. Сначала это может занять некоторое время, но когда все будет загружено, обновления появятся мгновенно, и я смогу без проблем одновременно просматривать изменения на ноутбуке, iPhone и iPad.

iPhone имеет много приложений для уценки. Лично я считаю IA Writer самым лучшим: он поддерживает все платформы, он элегантн и ориентирован на написание, и он очень хорошо поддерживает iCloud Drive.

Хотя я также могу настроить свой iPhone для выполнения git-комитов и нажатий, я считаю, что это не нужно. Если самая трудная часть написания блога уже сделана, использование ноутбука для окончательной проверки и фиксации кода для меня не является большой проблемой. git push так же просто, как нажать кнопку «Опубликовать» на Medium.

Это!

Мы подошли к концу этого урока. Спасибо, что дочитали до этого места.

Этот пост – только вершина айсберга черт Гэтсби. Я поражен его гибкостью и мощными функциями. Вы обязательно должны проверить его официальное руководство.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *