Рубрики

Использование GitHub для размещения бесплатного статического сайта

GBlog

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

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

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

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

HTMLBuilding block of all websites, a standard markup language which along with CSS and JAVASCRIPT is used by web developers to create websites, mobile user interfaces and applications.
CSSA style sheet language used to set style for the HTML elements.
JavaScriptCommonly used to create interactive effects within web browsers.
JekyllJekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown etc. and helps transform your plain text into static websites and blogs. Jekyll is known as “a simple, blog aware, static site generator”.
GitHubThe famous web based GIT Repository Hosting Service, and in this case, it will help us host our website.

Давайте начнем!!

Шаг 1 Создайте / войдите в свою учетную запись GitHub.

Шаг 2 Создайте новый репозиторий GitHub

Зайдите в свою панель и найдите кнопку «Новый репозиторий». Нажмите на него, чтобы создать новый репозиторий и назовите его «<your-GitHub-username> .github.io» (без двойных кавычек).

Например: — Если мое имя пользователя — hemangsk, имя моего нового хранилища должно быть Hemangsk.github.io.

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

Шаг 3 Работа со страницей хранилища

ПРИМЕЧАНИЕ. После нажатия кнопки «Создать репозиторий» вы попадаете на страницу репозитория. Здесь все действие происходит

Теперь страница хранилища приходит и вот что вам нужно сделать,

  • Подготовьте все свои файлы HTML и CSS в папку, назовем ее WEB, на вашем компьютере.
  • Нажмите (Загрузить) его в этом хранилище. Теперь есть несколько способов сделать это, например, с помощью Git, клиента GitHub в Windows или вручную.
  • Что вам нужно сделать, это вручную скопировать и вставить каждый из ваших файлов HTML и CSS в этот репозиторий, предположим, у вас есть файл index.html в папке WEB на вашем компьютере.
    1. Откройте страницу хранилища
    2. Нажмите кнопку «Новый файл» на странице репозитория GitHub.
    3. Назовите ваш файл как «index.html».
    4. Сверните страницу репозитория и откройте файл index.html на своем компьютере.
    5. Скопируйте его содержимое.
    6. Разверните страницу хранилища
    7. Вставьте скопированное содержимое
    8. Нажмите «зафиксировать изменения»
    9. Файл index.html теперь загружен в ваш репозиторий.
    10. Повторите эти шаги для всех остальных файлов в папке «WEB».

    Как только вы закончите, вы можете легко заметить, что страница хранилища выглядит заполненной.

Шаг 4 После того, как все файлы уже готовы и готовы в вашем хранилище. Пришло время открыть ваш прекрасный веб-сайт. Откройте новую вкладку браузера и посетите «<your-GitHub-username> .github.io».

Вот так! Ваш сайт сейчас работает.

Теперь вы можете использовать GitHub для тестирования ваших проектов HTML5 и CSS3, продемонстрировать их в реальном мире, на реальном и красивом сайте!

Так вот, как работают страницы GitHub, действительно просто! Вы можете создать неограниченное количество репозиториев и один пользовательский сайт. «Пользовательский» сайт — это то, что мы только что создали. Сайты репозитория создаются точно так же.

Вы можете оставить все свои сомнения в разделе комментариев, и я свяжусь с вами.

Хорошего дня!

Об авторе: Хеманг Кумар — российский разработчик открытого кода и второкурсник в USICT, Нью-Дели, владеющий BTech CSE, любит разрабатывать код, веб и пользовательские интерфейсы. С ним можно связаться по адресу https://www.linkedin.com/in/ hemangkumar.

Если вы также хотите продемонстрировать свой блог здесь, пожалуйста, смотрите GBlog для записи гостевого блога на GeeksforGeeks.

Рекомендуемые посты:

Использование GitHub для размещения бесплатного статического сайта

0.00 (0%) 0 votes