Используйте GitHub Pages для бесплатного создания статического веб-сайта для каждого проекта без покупки сервера.

Ситуация

Теперь у вас может быть куча файлов уценки, и вам нужно превратить эти файлы уценки в веб-сайт, чтобы другие могли просматривать и читать, но вы обнаружите, что большинство примеров — это веб-сайт блога VitePress + Github Page xxx.github.io, хотя это может удовлетворить потребности тех, кто создает свой собственный веб-сайт блога, но если я хочу превратить свой проект GitHub в такой статический веб-сайт, могу ли я? Шерстяная ткань? Подсчитано, что большинство моих одноклассников думают так же, как и я. Это не должно работать. GitHub предоставляет нам только бесплатную машину .github.io. Если вы хотите создать соответствующий веб-сайт для каждого проекта GitHub, вам нужно купить сервер самостоятельно, и тогда развертывание на нашем собственном сервере действительно возможно, но если мы хотим развернуть только статический веб-сайт на сервере, должны ли мы купить сервер для удовлетворения наших потребностей?

Этот вопрос беспокоил меня давно, и я не задумывался об этом. До недавнего времени я занимался созданием статических веб-сайтов с помощью VitePress. Я могу сообщить вам хорошие новости. Если вам нужно развернуть только статические веб-сайты, вы можете использовать GitHub Page для создания статического веб-сайта для каждого проекта бесплатно без покупки сервера. Здесь я научу вас использовать GitHub Pages для бесплатного развертывания статического веб-сайта конкретного проекта, вы довольны? 😄

Инициализировать проект

  • Выполните последовательно следующие команды

  • После выполнения вышеуказанных шагов структура каталогов выглядит так, как показано ниже.

  • index.md: отображать содержимое главной страницы

  • начало работы.md

  • config.js: конфигурация, связанная со статическим веб-сайтом, например навигация, тема и т. д.

Запускать тесты локально

  • Запустите локально, чтобы увидеть эффект
pnpm docs:dev
  • Эффект следующий

Совет: указывает, что статический веб-сайт готов

Добавление конфигурации рабочего процесса в пакет и автоматическое развертывание

  • добавить каталог

  • build.yml

Примечание. Упакованный результат pnpm docs:build находится в каталоге docs/.vite/dist.

Git инициализировать и зафиксировать проект

  • инициализация проекта git
git init
  • Игнорируйте ненужные файлы и каталоги, содержимое .gitignore выглядит следующим образом
**/node_modules/**/dist/
  • Отправить код
git add .git commit -m "init project"
  • GitHub создать проект

  • выполнить следующую команду

Настройте страницы GitHub, разверните упакованные ветки

  • Конфигурация показана на картинке ниже

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

  • щелкните обновление адреса доступа выше и окончательный эффект:

Пример проекта: Портал. Этот проект является просто демонстрацией, если вы хотите увидеть полный проект, обратитесь к ES6_Functional_Programming **, пожалуйста, помогите мне нажать звездочку 🌟

Подведем итог

  • Если вы не знаете, как это сделать, вы можете обратиться к тому, как делается готовый проект, и вы можете найти в нем вдохновение.
  • Не бойтесь английского, многие ответы написаны на английском, учитесь пользоваться мудростью мировых людей 😊

Ссылки

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.