Прежде чем начать, позвольте мне просто утверждать, что то, что я охвачу сегодня, уже покрыт документами ( развертывает — 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»