Рубрики
Uncategorized

Развертывание сайта VuePress для NetLify

Прежде чем начать, позвольте мне просто заявить, что то, что я охвачу сегодня, уже покрыт … Теги от Vue, Staticistics, WebDev, Devops.

Прежде чем начать, позвольте мне просто утверждать, что то, что я охвачу сегодня, уже покрыт документами ( развертывает — NetLify ), но для меня это не было достаточно подробно И я хотел пробежать, а потом документировать, процесс сам. Я не знаю, полезно ли это, и как всегда, я надеюсь, что мои читатели скажут мне, но я подумал, что поделился, как это сработало для меня. Также обратите внимание, что Vuepress все еще рано в развитии, поэтому то, что я опишу сегодня, возможно, не имеет смысла в дальнем брошенном будущете летающих автомобилей и джетпаков.

Во-первых — почему NetLify ? Поскольку мои обычные читатели узнают, я был для них пользователем для Raymondcamdle.com на некоторое время. Они — без сомнения — золотой стандарт для статических сайтов хостинга услуг. Да, вы можете использовать Amazon S3 или Всплеск (Служба, которая мне нравится, а также использование для быстрой демоды), но с точки зрения всех дополнительных функций, которые вы получаете, ничего не приходит Закрыть до завет. Период.

Это, как говорят, — функция, которую я собираюсь продемонстрировать настройку, является их автоматический процесс сборки для сайтов, связанных с GitHub. Вот как мой собственный блог работает. Я совершаю новый пост на мой репозиторий, NetLify получает Ping, а затем начинает процесс сборки с использованием Jekyll. Так как это ищет vuepress?

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

Первая страница — index.md :

### Hello

[Alpha](./alpha.html)

И вторая страница alpha.md :

### Alpha

This is Alpha! Go [home](./).

И это все. Всего двух страницы статического сайта. Итак, как мы получаем это на NetLify?

Шаг один — GitHub

Первое, что я сделал, было создать репо GitHub для сайта: https://github.com/cfjedimaster/netLify-vuepress-demo. . Это хорошее и простое и не имеет большого значения.

Шаг два — сайт NetLify

Далее — создайте новый сайт NetLify. Вы можете сделать это через CLI, но он также довольно легко от UI:

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

Для команды сборки вы хотите использовать NPM Run Docs: построить Отказ

Для публикации каталога .vuepress/dist Отказ Документы Vuepress предполагают Документы подкаталог Но root наше приложение, ну, ну сама корневая папка.

Продолжай и нажмите Развертывание сайта С Но, как я уже сказал, ожидайте, что потерпит неудачу.

Шаг три — Получите его NetLify Ready

Для того, чтобы сайт правильно работать, нам нужно сделать несколько вещей. Во-первых, мы должны сообщить NetLify для установки Vuepress в рамках процесса сборки. Для этого создайте Package.json:

npm init --force

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

{
  "name": "test1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:build": "vuepress build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vuepress": "^0.8.4"
  }
}

Я буду честен и говорю, что я все еще новичок, чтобы использовать сценарии NPM. Мне очень нравятся они — но как я уже сказал — я новичок для них. Добавьте этот файл в свой репо, совершите, и вот и все. Как серьезно. Вот история сборки для моего первого теста. Вы можете видеть, что это не удалось, прежде чем я выяснил пакет.

Вы можете увидеть этот живой сайт, я имею в виду, если вы действительно хотите, здесь: https://tender-stonebraker-c8e749.netlify.com/ . Классная часть — я редактирую свой сайт Vuepress и подтвердите, что это круто локально, и я могу тогда просто зафиксировать мои изменения. NetLify Затем выберут изменение, запустите сборку и разверните статический сайт.

Как я уже сказал — я надеюсь, что это полезно, и если у вас есть какие-либо вопросы, дайте мне знать в комментарии ниже!

Оригинал: «https://dev.to/raymondcamden/deploying-a-vuepress-site-to-netlify-1446»