Как развернуть блог за 3 минуты с помощью Hexo и Vercel

- Шерилин Кеньон

Создание хорошей системы блогов означает одно из двух: использование механизма шаблонов и создание вашего сайта или создание полноценной системы управления контентом (с базами данных и всем остальным)… с нуля.

Чем больше функций вы хотите добавить в свой блог, тем сложнее и длиннее становятся эти задачи.

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

Что ж, не бояться. Есть вариант получше.

Генераторы статических сайтов пришли нам на помощь.

Генераторы статических сайтов возникли как хороший баланс между двумя крайними вариантами: вам не нужно кодировать свою собственную CMS или систему с нуля, но вы также не используете что-то вроде Wordpress или Wix.

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

Несколько лет назад фреймворк Octopress, построенный на Rails и Jekyll, был очень популярен. Однако примерно в 2015 или 2016 году первоначальный создатель (и) прекратил поддерживать его, и с тех пор он медленно рассыпался в пыль.

Jekyll до сих пор жив и популярен, им пользуются как частные лица, так и компании.

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

Но что, если вы не знаете или не хотите использовать Ruby? Что ж, есть альтернатива: Hexo.

Настроить Hexo очень просто. Очень просто.

В то время как Jekyll основан на Rails и Liquid, Hexo основан на Node.js и EJS. Для тех из нас, кто пришел из страны JavaScript, вы будете чувствовать себя как дома.

Если у вас установлены NPM и Yarn, загрузить Hexo очень просто:

$ npm i hexo-cli -g
/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo-cli/bin/hexo
+ [email protected]
added 81 packages from 322 contributors in 7.798s

При этом загружается инструмент командной строки Hexo, который является рекомендуемым способом запуска и создания нового веб-сайта или проекта Hexo. Он использует Yarn для управления пакетами и модулями.

Затем вы используете инструмент hexo CLI для инициализации нового блога, который автоматически загружает все необходимые зависимости и устанавливает тему по умолчанию в вашу themes папку.

$ hexo init my-new-blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
...
INFO  Install dependencies
...
success Saved lockfile.
Done in 12.83s.
INFO  Start blogging with Hexo!
$ cd my-new-blog

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

$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

И вуаля, у вас есть блог. Так просто

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

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

Откройте другой терминал. Один в настоящее время работает hexo server, который обслуживает файлы статического веб-сайта для http://localhost:4000. Теперь в другом терминале вы можете запустить hexo generate --watch.

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

После настройки вы можете изменить сообщение по умолчанию (находится в /source/_posts). Или, если хотите, вы можете удалить этот файл и создать новое сообщение, выполнив следующую команду:

$ hexo new post "Your Title Here"

Это создает новый файл в /source/_posts/. Все файлы сообщений имеют формат Markdown, как и другие генераторы статических сайтов. Очень легко использовать и читать.

Помните, что во время написания сообщения просто обновите свой http://localhost:4000, чтобы проверить, как он выглядит, пока вы продолжаете.

Для получения дополнительной документации и настроек, которые вы можете настроить для записи, посетите раздел Writing в документации Hexo.

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

Компания Vercel, ранее называвшаяся ZEIT, создавала Next.js, фреймворк, упрощающий разработку приложений React.js.

Один из их инструментов - фантастический клиент CLI под названием Now (не уверен, что они также переименовали его в Vercel). Он обеспечивает немедленное развертывание в облаке, а также локальную разработку.

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

Затем установите клиент:

$ npm i now -g

После его установки, если вы находитесь в корневой папке проекта блога, запустите now public. public - это папка, в которой движок Hexo сгенерировал статические файлы для вашего веб-сайта.

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

$ now public
Now CLI 18.0.0
? Set up and deploy “~/workspace/my-new-blog/public”? [Y/n] y
? Which scope do you want to deploy to? (Your User)
? Link to existing project? [y/N] n
? What’s your project’s name? my-new-blog
? In which directory is your code located? ./
No framework detected. Default project settings:
- Build Command: `npm run now-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None
? Want to override the settings? [y/N] n
🔗  Linked to mvxt/my-new-blog (created .now and added it to .gitignore)
🔍  Inspect: [REDACTED URL] [1s]
✅  Production: https://tmp-lemon.now.sh [copied to clipboard] [4s]
📝  Deployed to production. Run `now --prod` to overwrite later (https://zeit.ink/2F).
💡  To change the domain or build command, go to https://zeit.co/mvxt/my-new-blog/settings

И тогда все готово. Он развернут по ссылке Production: в выходных данных.

Это заняло 60 секунд? Черт побери.

Вывод

Инженеры-программисты любят разрабатывать новые инструменты, чтобы сделать процесс разработки лучше, и в результате появляются такие инструменты, как Hexo и Vercel. Открытие подобных приложений и фреймворков - вот что заставляет меня так сильно любить программы.

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

Начать собственный блог никогда не было так просто. Попробуйте!