Как создать сайт на страницах GitHub: 12 шагов (с изображениями)

Оглавление:

Как создать сайт на страницах GitHub: 12 шагов (с изображениями)
Как создать сайт на страницах GitHub: 12 шагов (с изображениями)

Видео: Как создать сайт на страницах GitHub: 12 шагов (с изображениями)

Видео: Как создать сайт на страницах GitHub: 12 шагов (с изображениями)
Видео: 3 простых способа записать видео с экрана компьютера 2024, Май
Anonim

GitHub Pages - отличный способ создать свой личный сайт с нуля. Это совершенно бесплатно и требует только учетную запись GitHub. Однако обратите внимание, что GitHub Pages не предлагает самый удобный дизайн для создания веб-сайтов (в отличие от Wix или Squarespace), но это отличный способ получить опыт работы с HTML / CSS / JS и всеми элементами веб-сайта. Эта wikiHow покажет вам, как начать работу.

Шаги

Создайте сайт на страницах GitHub, шаг 1
Создайте сайт на страницах GitHub, шаг 1

Шаг 1. Зарегистрируйте учетную запись на GitHub, если у вас ее еще нет

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

Создайте сайт на страницах GitHub, шаг 2
Создайте сайт на страницах GitHub, шаг 2

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

Обязательно назовите репозиторий «[здесь ваше имя пользователя GitHub].github.io». Это инициализирует ваш сайт GitHub.

Метод 1 из 2: Использование редактора кода

Создание веб-сайта на страницах GitHub Шаг 3
Создание веб-сайта на страницах GitHub Шаг 3

Шаг 1. Загрузите рабочий стол GitHub, если он еще не установлен

Установить рабочий стол GitHub так же просто, как перейти на https://desktop.github.com/ и нажать большую фиолетовую кнопку «Загрузить». Затем запустите установщик. Это необходимо для того, чтобы внести изменения в ваш репозиторий.

Создание веб-сайта на страницах GitHub Шаг 4
Создание веб-сайта на страницах GitHub Шаг 4

Шаг 2. Установите редактор кода

Он нужен вам, чтобы получить подсветку синтаксиса на GitHub. Популярные варианты включают Atom, Visual Studio Code, Sublime Text и Notepad ++, учитывая их многофункциональность и минимализм. После установки редактора кода вы готовы приступить к работе.

Создайте сайт на страницах GitHub, шаг 5
Создайте сайт на страницах GitHub, шаг 5

Шаг 3. Создайте файл с именем «index.html»

Вы можете сделать это в редакторе кода или в Интернете. Вы также можете перейти в местоположение вашего репозитория на жестком диске и создать файл «index.html» в папке репозитория на вашем диске.

Создание веб-сайта на страницах GitHub Шаг 6
Создание веб-сайта на страницах GitHub Шаг 6

Шаг 4. Добавьте свой HTML

Вам нужно будет изучить HTML, чтобы иметь возможность кодировать базовую веб-страницу. Вам также будет полезно изучить CSS и JavaScript, чтобы вы могли добавлять стили и функциональность на свою веб-страницу.

Не забудьте сохранить файл

Создание веб-сайта на страницах GitHub, шаг 7
Создание веб-сайта на страницах GitHub, шаг 7

Шаг 5. Зафиксируйте изменения

Вернитесь на рабочий стол GitHub и нажмите синюю кнопку «Зафиксировать в мастере». Затем нажмите Push Origin. Это загрузит изменения в GitHub.

Если вы планируете внести больше изменений, вы также захотите вытащить начало координат. Нажмите кнопку Pull origin на рабочем столе GitHub, чтобы загрузить последний коммит на свой компьютер

Создание веб-сайта на страницах GitHub Шаг 8
Создание веб-сайта на страницах GitHub Шаг 8

Шаг 6. Просмотрите свою веб-страницу

Перейдите к «[ваше имя пользователя GitHub здесь].github.io» в веб-браузере. Возможно, вам придется обойти кеш браузера, удерживая Ctrl или ⌘ Command, одновременно нажимая кнопку обновления, чтобы просмотреть новую веб-страницу.

Метод 2 из 2: Использование GitHub Online

Создание веб-сайта на страницах GitHub Шаг 9
Создание веб-сайта на страницах GitHub Шаг 9

Шаг 1. Создайте файл с именем «index.html»

Нажмите «Добавить файл», затем нажмите «Создать новый файл». Это откроет редактор файлов. Добавьте index.html в поле «Назовите файл».

Создание веб-сайта на страницах GitHub Шаг 10
Создание веб-сайта на страницах GitHub Шаг 10

Шаг 2. Добавьте свой HTML

Вам нужно будет изучить HTML, чтобы иметь возможность кодировать базовую веб-страницу. Вам также будет полезно изучить CSS и JavaScript, чтобы вы могли добавлять стили и функциональность на свою веб-страницу.

Не забудьте сохранить файл

Создайте сайт на страницах GitHub, шаг 11
Создайте сайт на страницах GitHub, шаг 11

Шаг 3. Зафиксируйте изменения

Нажмите зеленую кнопку «Зафиксировать новый файл», чтобы сохранить файл на GitHub.

Создание веб-сайта на страницах GitHub, шаг 12
Создание веб-сайта на страницах GitHub, шаг 12

Шаг 4. Просмотрите свою веб-страницу

Перейдите к «[ваше имя пользователя GitHub здесь].github.io» в веб-браузере. Возможно, вам придется обойти кеш браузера, удерживая Ctrl или ⌘ Command, одновременно нажимая кнопку обновления, чтобы просмотреть новую веб-страницу.

подсказки

  • Чтобы добавить подстраницы, просто создайте новую папку на GitHub и добавьте в нее файл index.html.
  • Если вы зарегистрируете доменное имя, вы можете разрешить GitHub Pages использовать это доменное имя вместо имени по умолчанию.
  • Репозитории страниц GitHub должны быть общедоступными, если у вас нет премиум-аккаунта.

Рекомендуемые: