Как выложить сайт на хостинг github

Как бесплатно залить сайт на GitHub Pages

Допустим, вы сделали какой-то проект, например, собрали себе портфолио по шаблону, и теперь хотите выложить его в интернет. Если вы использовали только HTML и CSS, то необязательно платить деньги, чтобы загрузить сайт куда-то. Вы можете бесплатно выложить сайт на сервис GitHub Pages. Всё, что нужно — аккаунт на Гитхабе.

Создание репозитория

Для создания репозитория перейдите по ссылке https://github.com/new.

Важно, чтобы название репозитория было в виде «username.github.io», где username — имя вашего аккаунта на Гитхабе. В нашем примере это будет evgeniyshklyar.github.io .

Обязательно установите галку на пункте Add a README file.

Загрузка файлов

Репозиторий создан, теперь нужно загрузить файлы. Для этого можно воспользоваться VS Code, консолью или GitHub Desktop, но в нашем случае достаточно интерфейса Гитхаба.

Нажмите кнопку Add file — Upload files.

Затем перетащим файлы в появившееся поле для загрузки.

Добавим комментарий к нашему коммиту и нажмём кнопку «Commit changes».

Готово! Файлы загружены в репозиторий.

Проверка работы сайта

Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io, в нашем случае это htmlacademy.github.io. Вуаля!

Всё хорошо, сайт работает.

Шаг 4. Подключаем свой домен

Гитхаб позволяет использовать собственное доменное имя вместо стандартного username.github.io. Для этого, разумеется, вам сначала нужно приобрести его.

Предположим, что у вас уже есть домен. Давайте подключим его к репозиторию. Перейдём во вкладку Settings в интерфейсе репозитория, и в разделе Pages в поле Custom domain введём название нашего домена (например: html-academy.ru) и нажмём кнопку Save.

Теперь Гитхаб знает о нашем домене, однако, этого недостаточно — нужно изменить информацию о DNS-записях самого домена. Для этого нам необходимо перейти на сайт доменного регистратора, где домен был куплен. Интерфейс работы с DNS-записями разный у каждого регистратора, но суть примерно одинакова.

Нам нужно настроить A-запись домена. Для этого перейдём в панель управления DNS-записями, найдём (или добавим) A-запись и укажем 192.30.252.153 в качестве её значения. Ещё будет полезной памятка Гитхаба по настройке А-записей у DNS провайдера.

Всё готово! В течение нескольких часов вы сможете открыть свой сайт, используя ваш домен.

Получить более глубокие знания о работе с Git, попробовать на практике поработать с ветками, с локальным и удалённым репозиторием и изменениями можно на профессиональном онлайн-курсе.

Hosting your website using Github Pages

Hi guys! In this tutorial, I’m going to give a quick overview of how to use Github Pages as free host for a static website.
Github Pages is a great and reliable service to help anyone with a Github account to have a presence on the web. It’s an easy way to get a personal website or portfolio up for others to see.
By the end of the tutorial, we will have a website running at https://.github.io/
For example, my personal website can be found at https://faizanv.github.io/

Prerequisites

To complete this tutorial, you first need some familiarity with

1. HTML/CSS
2. Using Git and Github

For this tutorial, I will be using a Unix command line and the Git CLI for interfacing with Git and Github. This can also be done using the Github Desktop Client.

Getting Started

Create A Github Repository

To get started, we need to go to Github and create a new repository for our website.The repository will be named with the format .github.io
So for example, my username is faizanv so my repository would be titled faizanv.github.io

Once the repository is created, we will go ahead and clone the repository to our computer. For this tutorial, I will be doing so using the Git CLI.

To clone the repository, I copy the repository URL from new repository page on Github and then I run the following

git clone https://github.com/faizanv/faizanv.github.io.git
Once the repository is cloned, I change my current directory to the repository directory

The Content

Before we can host a website on Github Pages, we need to create one! We can start with this simple website that displays a “Hello World” header.
Our project will have the following directory structure.

To create these files you can use any sort of text editors such as Vim, Atom, or Visual Studio Code.
Our HTML will look something like this

index.html

And we can create a stylesheet to add a little color like this

To see if everything was created correctly, you can open index.html in a web browser by pasting the path to the file in the address bar. For example, I the path to my website is at /Users/faizanv/dev/faizanv.github.io/index.html

Deployment

Now for the magic sauce, we can deploy our newly created website to Github Pages for the world to see!. To do this, all we have to do is deploy the code we wrote so far to the Github repository we created earlier.
To do this using the Git CLI we use these simple steps:

Once you’ve pushed your code to your Github repository, you should be able to view your newly hosted website at http://.github.io/

It sometimes takes a minute or so for the results to appear so keep refreshing!

Voilà! Now you have a website hosted online for the world to see!

Moving Forward

Now a Hello World website is cool and all, but you are probably going to want to customize your website more to your liking. Maybe you want to display your projects or have a way for people to see your resume; you can do that! You add images, some cool links, and maybe even some Javascript to make the page more interactive!

To make updates to your website, make the necessary changes to your code locally like we did earlier and then follow the same steps to deploy a new commit to your Github repository. Every time you push, the changes should be updated on your website automatically.

And that’s all there is to it! Leave a comment below if you have any questions!

Гайд: как разместить сайт бесплатно на GitHub Pages

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

Можно использовать GitHub Pages — сервис платформы GitHub, который даёт возможность публиковать сайты в сети совершенно бесплатно.

Что такое GitHub Pages и для чего он нужен

GitHub Pages — инструмент, который принимает файлы HTML, CSS и JavaScript, находящиеся в репозитории, и делает из них веб-сайт, доступный любому человеку в сети.

Изначально GitHub Pages использовали веб-программисты, чтобы посмотреть, как выглядит вёрстка и работает код, но со временем этот инструмент стал популярен для размещения лендингов, сайтов-визиток и других несложных проектов у людей, не связанных с IT.

Какие фишки есть у GitHub Pages:

• можно использовать как свой дизайн, так и встроенные шаблоны оформления;
• присутствует поддержка плагинов — на сайт можно добавить комментарии, слайдеры, формы для авторизации;
• есть встроенный редактор кода, который позволяет вносить изменения на сайт без скачивания дополнительного софта.

Как выложить сайт на GitHub Pages

Шаг № 1 — переходим в личный профиль

Откройте официальный сайт GitHub. Зарегистрируйтесь или войдите в аккаунт, если он у вас уже есть.

Шаг № 2 — создаём репозиторий

Репозиторий — хранилище всех папок и файлов, связанных с вашим сайтом. Обычно там находятся html-файлы с разметкой, css-стили, картинки и JS-скрипты.

Кликните на иконку аккаунта в правом верхнем углу, затем нажмите Your repositories. Это раздел, в котором будут храниться все ваши репозитории.

Чтобы создать новый репозиторий, нажмите на зелёную кнопку New.

Также вы можете создать репозиторий из любого раздела профиля, кликнув на +, а затем — New repository.

После этого вы увидите страницу создания репозитория. Здесь нужно указать его имя, описание (при необходимости) и поставить галочку напротив пункта Add a README file. Остальные настройки менять не нужно. Когда всё будет заполнено, нажмите на зелёную кнопку Create repository.

Готово! Теперь у вас есть репозиторий, в который вы можете добавить файлы сайта или создать его с нуля.

Шаг № 3 — подключаем GitHub Pages

Теперь вы можете превратить файлы из репозитория в сайт с уникальным адресом. Для этого зайдите на страницу репозитория и кликните по вкладке Settings.

В меню слева найдите вкладку Pages, затем в блоке Branch поменяйте None на Main. Это нужно для того, чтобы сайт собрался из главной ветки репозитория. После кликните на кнопку Save, подождите пару минут и обновите страницу. В верхней части страницы должна появиться ссылка на сайт. Она состоит из вашего юзернейма, домена GitHub и названия репозитория. При желании вы можете оплатить и использовать личный домен — его нужно указать в разделе Custom domain.

Теперь вы можете перейти по ссылке и проверить, что получилось. Так как наш сайт пока состоит из пары строк текста, в нём ещё мало интересного. Но мы это исправим.

Если у вас уже готов файл с html-разметкой сайта, а может быть, даже css-стили и JS-скрипты, просто загрузите их в репозиторий. Для этого нажмите Add file, а потом — Upload files.

Обратите внимание, что файл index.html должен находиться в корне, а не во вложенных папках. Иначе GitHub Pages не соберёт сайт.

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

Вот так обычно выглядит структура веб-проекта.

На этом публикация готового сайта на GitHub Pages завершена. Далее мы будем рассказывать о разработке сайта с нуля для тех, кто не хочет создавать html-вёрстку и css-стили самостоятельно.

Шаг № 4 — редактируем страницу с помощью markdown-разметки

Пока в нашем репозитории есть только файл README.md, но и с его помощью можно сделать простой сайт. Расширение .md — сокращение от слова markdown. Markdown-разметку используют наряду с HTML для форматирования текста и добавления изображений на страницу.

Для редактирования файла нажмите на значок карандаша.

Чтобы освоить возможности Markdown, изучите официальный гайд от GitHub.Здесь же мы просто покажем пример использования разметки для сайта.

Мы добавили заголовки первого и второго уровней с помощью #, сделали список со ссылками на проекты и вставили на страницу фото нашего героя. Во вкладке Preview можно посмотреть, как это будет выглядеть на странице.

Все совпадения считать случайными. Tproger такой один!

Чтобы сохранить все внесённые изменения, пролистайте вниз и нажмите на кнопку Commit changes. Через пару минут изменения отобразятся на странице.

Шаг № 5 — добавляем тему оформления

Кажется, нашей странице не хватает стилей. Но даже если вы не хотите постигать азы CSS, это не проблема. Можно выбрать одну из готовых тем GitHub, полный список которых доступен по ссылке. Например, Cayman — как на Tproger. Чтобы использовать тему, нужно скопировать из файла README.md для выбранной темы строку формата remote_theme: название_темы. В нашем случае эта строка выглядит так:

Затем нужно вернуться на страницу нашего репозитория и добавить в него новый файл. Для этого нажмите Add file, а затем — Create new file.

Новый файл пусть будет называться _config.yml. Вставьте в него скопированную строчку с именем темы и нажмите кнопку Commit new file, чтобы применить изменения.

Подождите несколько минут, пока изменения вступят в силу. Готово — шрифты и фон заиграли новыми красками! С этим уже можно работать дальше. Например, добавить контакты для связи, описание пет-проектов, хард- и софт-скилы.

Разместить или создать свой сайт на GitHub Pages может любой человек, даже далёкий от вёрстки и программирования. Этот инструмент поможет вам без каких-либо затрат публиковать в интернете лендинги, резюме и портфолио работ.

Пошаговая инструкция: как сделать бесплатный сайт на GitHub Pages

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

GitHub Pages — что это?

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

Практически всегда услуги хостинги — платные, поэтому они скрывают файлы сайта от всех, кроме владельца. Исключениями становятся сервисы, как GItHub Pages, используя которые можно опубликовать сайт в интернете бесплатно.

И здесь важно разобраться с терминами, потому что GitHub Pages очень тесно связаны с такими понятиями как «Git» и «GitHub».

Git — это самая популярная система контроля версий в мире. Проект был создан Линусом Торвальдсом для управления разработкой ядра Linux.

GitHub — платформа для совместной разработки, также называемая форжингом. Можно сказать, что это и веб-ресурс, и репозиторий, и хранилище кода, и контроль версий, и сервер, и бесплатный хостинг, и сообщество, и помощь, и обучение — всё в одном месте.

GitHub Pages — это бесплатный хостинг для статических файлов.

У GitHub Pages есть своя специфика работы (спойлер: она же и является главным преимуществом сервиса). Как мы сказали выше, обычный хостинг размещает файлы вашего сайта на своих серверах и скрывает всю его техническую часть от посторонних пользователей. GitHub Pages — бесплатен, поэтому технические файлы вашего сайта будут открыты. Для чего это нужно? Для того, чтобы все смогли насладиться красотой вашего кодинга �� .

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

Из других преимуществ:

Это полноценный сайт с HTTPS. В логику простого сайта отлично укладывается множество простых страниц: небольшой сайт компании, личная страничка, простой блог, лендинг или сайт-визитка на GitHub.

За статическим сайтом не нужно следить,а значит не нужно отслеживать версионность CMS и другого ПО, которое легче взломать.

Возможность деплоя через Git. Благодаря тому, что это децентрализованная система, всегда есть резервная локальная версия сайта.

Так как же добавить сайт на GitHub, украсив им своё портфолио? Сейчас расскажем.

Инструкция: как сделать сайт на GitHub Pages с нуля

Шаг 1. Создаём новый репозиторий

Репозиторий — место, где будет «жить» ваш проект. Здесь вы сможете создать структуру проекта и хранить нужные для него файлы: наборы данных, фотографии, видео и так далее.

Для создания репозитория заходим на официальный сайт и заходим в созданный аккаунт.

Далее в блоке «Your repositories» нажимаем кнопку «New repository», чтобы создать новый репозиторий. Ему можно задать имя в формате «login.github.io», где login — это ваш ник на ресурсе.

Также можете дать ему краткое описание. После отметьте галочкой «Initialize this repository with a README» и нажмите «Create repository».

Шаг 2. Настраиваем сайт

Перед нами открывается такое окно:

В верхней панели нажимаем на правую кнопку «Settings». Прокручиваем вниз до раздела «GitHub Pages». Открываем выпадающее меню и меняем значение с «None» на «branch: Main».

После нажимаем на кнопку «Save». Перед вами появится синее поле, на котором будет отображена ссылка на ваш сайт.

И…это всё — ваш сайт готов:

Да, пока что сайт на Гитхабе выглядит немного скучновато. Но здесь важно понимать, что все отображение страницы зависит от содержимого вашего файла README.

Шаг 3. Редактируем страницу

Как же залить сайт на GitHub? Чтобы внести изменения для файла, возвращаемся из вкладки «Setting» во вкладку «Code».

И здесь начинается ваше творчество — подкорректируйте README и добавьте туда все, что сочтете нужным. Вы также можете залить уже сделанный вами сайт, нажав на кнопку «Add file». Или попробовать создать сайт с нуля. Для этого кликните по иконке с карандашом и начните изменять README.

Markdown — удобный и быстрый способ разметки текста — предоставит вам множество возможностей. Например, вы можете добавить текст, картинки, ссылки, цвета или выполнить простое форматирование.

В качестве примера давайте напишем приветствие и добавим простую картинку:

И не забывайте, что при добавлении изображений в файл README, вы должны обязательно загружать их в репозиторий, чтобы GitHub не поймет, о чём речь.

Теперь прокручиваем страницу вниз и нажимаем на зелёную кнопку «Commit changes».

Вы можете перейти по вашей ссылке, чтобы оценить результат, или увидеть его в предпросмотре во вкладке «Code». Вот, что получилось у нас:

Шаг 4. Привязываем домен

Чтобы подключить свой домен к проекту на GitHub Page, нужно снова открыть настройки и перейти в раздел «GitHub Pages».

Здесь всё просто. Если у вас уже есть доменное имя для проекта, вставьте его в строку свой адрес и нажмите «Save».

Если же домена нет, нужно зарегистрировать его и вернуться к шагу выше ;). Сделать это можно в REG.RU. Не забывайте, что домен правильно подобранное доменное имя влияет по меньшей мере на три показателя:

• запомнят ли пользователи название вашего сайта;
• как быстро найдут его в интернете;
• будет ли сайт «в топе» в поисковых системах.

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

Шаг 5 (опциональный). Добавляем тему

С учетом, что это заняло буквально пару минут времени, выглядит уже хорошо, но даже такую простую страницу можно сделать лучше :).

Если вы совершенно не разбираетесь в CSS, но хотите красивый сайт — воспользуйтесь встроенными темами Jekyll. Они помогут изменить внешний вид страницы без каких-либо усилий — нужно только нажать на пару кнопок.

Для этого возвращаемся в раздел настроек на верхней панели («Settings»), снова переходим в раздел «GitHub Pages» и нажимаем «Choose a theme». Перед вами открывается несколько доступных тем.

Выберите понравившуюся и кликните на зелёную кнопку «Select theme». Не пугайтесь, если тема не обновляется сразу — подождите пару минут и ещё раз откройте свой сайт.

Вот и всё! Вот так быстро и просто можно создать статичный сайт и разместить его в GitHub-репозитории.

Надеемся, что наша пошаговая инструкция помогла вам разобраться с сервисом GitHub Pages. Обязательно поделитесь в комментариях отзывом о GitHub Pages и бесплатном хостинге от GitHub.

И, конечно же, регистрируйте красивые и лаконичные доменные имена для ваших проектов.

Как использовать GitHub Pages?

GitHub — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения в системе управления версиями Git. После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.

Публикация контента

GitHub — очень важное и полезное сообщество для участия, а Git/GitHub — очень популярная система управления версиями — большинство технологических компаний теперь использует её в своём рабочем процессе. У GitHub есть очень полезная функция GitHub Pages, которая позволяет публиковать живую демонстрацию кода в виде сайта в Интернете.

Базовая установка Github

1. Прежде всего, установите Git на свой компьютер. Это базовое программное обеспечение для управления версиями, поверх которого работает GitHub.
2. Затем зарегистрируйтесь на GitHub. Это просто.
3. После того, как вы зарегистрировались, войдите в свою учётную запись на github.com с помощью своих имени пользователя и пароля.

Подготовка кода для загрузки

В репозитории на Github вы можете хранить любой код, который вам нравится, но для полноценного использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, то есть, основной точкой входа должен быть HTML-файл с именем index.html .

Прежде чем двигаться дальше, вам необходимо инициализировать вашу папку (директорию) с кодом как репозиторий Git. Как это сделать:

Направьте командную строку в вашу папку test-site (или папку с любым другим названием, содержащую ваш сайт). Для этого используйте команду cd (т.е. «change directory» — «поменяй директорию»). Вот что вы бы набрали, если бы разместили свой сайт в папке test-site на рабочем столе:

Дополнительно об интерфейсах командной строки

Лучший способ загрузить код в Github — использовать командную строку. Это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, вместо того чтобы кликать внутри пользовательского интерфейса. Оно будет выглядеть примерно так:

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

Каждая операционная система поставляется с инструментом командной строки:

• Windows: Командную строку (Command Prompt) можно вызвать, нажав клавишу Windows, набрав Command Prompt и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
• OS X: Терминал (Terminal) можно найти в Applications > Utilities.
• Linux: Обычно терминал можно вызвать с помощью Ctrl + Alt + T. Если это не сработает, найдите Terminal в панели приложений или меню.

Сначала это может показаться немного пугающим, но не волнуйтесь — вы быстро разберётесь в основах. Вы говорите компьютеру что-то сделать в терминале, введя команду и нажав Enter, как показано выше.

Создание репозитория для вашего кода

1. Затем вам нужно создать новый репозиторий для ваших файлов. Нажмите «Плюс» (+) в правом верхнем углу главной страницы GitHub и выберите «Новый репозиторий» (New Repository).
2. На этой странице в поле «Имя репозитория» (Repository name) введите имя для своего репозитория, например my-repository.
3. Также добавьте описание, чтобы уточнить, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:
4. Нажмите «Создать репозиторий» (Create repository); откроется следующая страница:

Загрузка файлов на GitHub

1. На текущей странице вас интересует раздел …or push an existing repository from the command line («. или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
2. Затем введите следующие две команды, нажимая Enter после каждой из них. Они готовят код для загрузки в GitHub и просят Git управлять этими файлами.

Больше информации о GitHub

Если вы хотите поменять что-то на своем тестовом сайте и загрузить результат на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам потребуется ввести следующие команды (нажимая Enter после каждой), чтобы загрузить их на GitHub:

Вы можете написать более подходящее сообщение вместо another commit, чтобы уточнить, что именно вы только что изменили.

Мы едва коснулись Git. Чтобы узнать больше, начните с нашей статьи Git и GitHub.

Hosting your website using Github Pages

Hi guys! In this tutorial, I’m going to give a quick overview of how to use Github Pages as free host for a static website.
Github Pages is a great and reliable service to help anyone with a Github account to have a presence on the web. It’s an easy way to get a personal website or portfolio up for others to see.
By the end of the tutorial, we will have a website running at https://.github.io/
For example, my personal website can be found at https://faizanv.github.io/

Prerequisites

To complete this tutorial, you first need some familiarity with

1. HTML/CSS
2. Using Git and Github

For this tutorial, I will be using a Unix command line and the Git CLI for interfacing with Git and Github. This can also be done using the Github Desktop Client.

Getting Started

Create A Github Repository

To get started, we need to go to Github and create a new repository for our website.The repository will be named with the format .github.io
So for example, my username is faizanv so my repository would be titled faizanv.github.io

Once the repository is created, we will go ahead and clone the repository to our computer. For this tutorial, I will be doing so using the Git CLI.

To clone the repository, I copy the repository URL from new repository page on Github and then I run the following

git clone https://github.com/faizanv/faizanv.github.io.git
Once the repository is cloned, I change my current directory to the repository directory

The Content

Before we can host a website on Github Pages, we need to create one! We can start with this simple website that displays a “Hello World” header.
Our project will have the following directory structure.

To create these files you can use any sort of text editors such as Vim, Atom, or Visual Studio Code.
Our HTML will look something like this

index.html

And we can create a stylesheet to add a little color like this

To see if everything was created correctly, you can open index.html in a web browser by pasting the path to the file in the address bar. For example, I the path to my website is at /Users/faizanv/dev/faizanv.github.io/index.html

Deployment

Now for the magic sauce, we can deploy our newly created website to Github Pages for the world to see!. To do this, all we have to do is deploy the code we wrote so far to the Github repository we created earlier.
To do this using the Git CLI we use these simple steps:

Once you’ve pushed your code to your Github repository, you should be able to view your newly hosted website at http://.github.io/

It sometimes takes a minute or so for the results to appear so keep refreshing!

Voilà! Now you have a website hosted online for the world to see!

Moving Forward

Now a Hello World website is cool and all, but you are probably going to want to customize your website more to your liking. Maybe you want to display your projects or have a way for people to see your resume; you can do that! You add images, some cool links, and maybe even some Javascript to make the page more interactive!

To make updates to your website, make the necessary changes to your code locally like we did earlier and then follow the same steps to deploy a new commit to your Github repository. Every time you push, the changes should be updated on your website automatically.

And that’s all there is to it! Leave a comment below if you have any questions!

Пошаговая инструкция: как сделать бесплатный сайт на GitHub Pages

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

GitHub Pages — что это?

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

Практически всегда услуги хостинги — платные, поэтому они скрывают файлы сайта от всех, кроме владельца. Исключениями становятся сервисы, как GItHub Pages, используя которые можно опубликовать сайт в интернете бесплатно.

И здесь важно разобраться с терминами, потому что GitHub Pages очень тесно связаны с такими понятиями как «Git» и «GitHub».

Git — это самая популярная система контроля версий в мире. Проект был создан Линусом Торвальдсом для управления разработкой ядра Linux.

GitHub — платформа для совместной разработки, также называемая форжингом. Можно сказать, что это и веб-ресурс, и репозиторий, и хранилище кода, и контроль версий, и сервер, и бесплатный хостинг, и сообщество, и помощь, и обучение — всё в одном месте.

GitHub Pages — это бесплатный хостинг для статических файлов.

У GitHub Pages есть своя специфика работы (спойлер: она же и является главным преимуществом сервиса). Как мы сказали выше, обычный хостинг размещает файлы вашего сайта на своих серверах и скрывает всю его техническую часть от посторонних пользователей. GitHub Pages — бесплатен, поэтому технические файлы вашего сайта будут открыты. Для чего это нужно? Для того, чтобы все смогли насладиться красотой вашего кодинга �� .

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

Из других преимуществ:

Это полноценный сайт с HTTPS. В логику простого сайта отлично укладывается множество простых страниц: небольшой сайт компании, личная страничка, простой блог, лендинг или сайт-визитка на GitHub.

За статическим сайтом не нужно следить,а значит не нужно отслеживать версионность CMS и другого ПО, которое легче взломать.

Возможность деплоя через Git. Благодаря тому, что это децентрализованная система, всегда есть резервная локальная версия сайта.

Так как же добавить сайт на GitHub, украсив им своё портфолио? Сейчас расскажем.

Инструкция: как сделать сайт на GitHub Pages с нуля

Шаг 1. Создаём новый репозиторий

Репозиторий — место, где будет «жить» ваш проект. Здесь вы сможете создать структуру проекта и хранить нужные для него файлы: наборы данных, фотографии, видео и так далее.

Для создания репозитория заходим на официальный сайт и заходим в созданный аккаунт.

Далее в блоке «Your repositories» нажимаем кнопку «New repository», чтобы создать новый репозиторий. Ему можно задать имя в формате «login.github.io», где login — это ваш ник на ресурсе.

Также можете дать ему краткое описание. После отметьте галочкой «Initialize this repository with a README» и нажмите «Create repository».

Шаг 2. Настраиваем сайт

Перед нами открывается такое окно:

В верхней панели нажимаем на правую кнопку «Settings». Прокручиваем вниз до раздела «GitHub Pages». Открываем выпадающее меню и меняем значение с «None» на «branch: Main».

После нажимаем на кнопку «Save». Перед вами появится синее поле, на котором будет отображена ссылка на ваш сайт.

И…это всё — ваш сайт готов:

Да, пока что сайт на Гитхабе выглядит немного скучновато. Но здесь важно понимать, что все отображение страницы зависит от содержимого вашего файла README.

Шаг 3. Редактируем страницу

Как же залить сайт на GitHub? Чтобы внести изменения для файла, возвращаемся из вкладки «Setting» во вкладку «Code».

И здесь начинается ваше творчество — подкорректируйте README и добавьте туда все, что сочтете нужным. Вы также можете залить уже сделанный вами сайт, нажав на кнопку «Add file». Или попробовать создать сайт с нуля. Для этого кликните по иконке с карандашом и начните изменять README.

Markdown — удобный и быстрый способ разметки текста — предоставит вам множество возможностей. Например, вы можете добавить текст, картинки, ссылки, цвета или выполнить простое форматирование.

В качестве примера давайте напишем приветствие и добавим простую картинку:

И не забывайте, что при добавлении изображений в файл README, вы должны обязательно загружать их в репозиторий, чтобы GitHub не поймет, о чём речь.

Теперь прокручиваем страницу вниз и нажимаем на зелёную кнопку «Commit changes».

Вы можете перейти по вашей ссылке, чтобы оценить результат, или увидеть его в предпросмотре во вкладке «Code». Вот, что получилось у нас:

Шаг 4. Привязываем домен

Чтобы подключить свой домен к проекту на GitHub Page, нужно снова открыть настройки и перейти в раздел «GitHub Pages».

Здесь всё просто. Если у вас уже есть доменное имя для проекта, вставьте его в строку свой адрес и нажмите «Save».

Если же домена нет, нужно зарегистрировать его и вернуться к шагу выше ;). Сделать это можно в REG.RU. Не забывайте, что домен правильно подобранное доменное имя влияет по меньшей мере на три показателя:

• запомнят ли пользователи название вашего сайта;
• как быстро найдут его в интернете;
• будет ли сайт «в топе» в поисковых системах.

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

Шаг 5 (опциональный). Добавляем тему

С учетом, что это заняло буквально пару минут времени, выглядит уже хорошо, но даже такую простую страницу можно сделать лучше :).

Если вы совершенно не разбираетесь в CSS, но хотите красивый сайт — воспользуйтесь встроенными темами Jekyll. Они помогут изменить внешний вид страницы без каких-либо усилий — нужно только нажать на пару кнопок.

Для этого возвращаемся в раздел настроек на верхней панели («Settings»), снова переходим в раздел «GitHub Pages» и нажимаем «Choose a theme». Перед вами открывается несколько доступных тем.

Выберите понравившуюся и кликните на зелёную кнопку «Select theme». Не пугайтесь, если тема не обновляется сразу — подождите пару минут и ещё раз откройте свой сайт.

Вот и всё! Вот так быстро и просто можно создать статичный сайт и разместить его в GitHub-репозитории.

Надеемся, что наша пошаговая инструкция помогла вам разобраться с сервисом GitHub Pages. Обязательно поделитесь в комментариях отзывом о GitHub Pages и бесплатном хостинге от GitHub.

И, конечно же, регистрируйте красивые и лаконичные доменные имена для ваших проектов.

Cоздание сайта на GitHub

Для запуска сайта необязательно покупать хостинг, можно воспользоваться бесплатным сервисом GitHub Pages.

Для создания репозитория заходим на сайт GitHub и в блоке Your repositories нажимаем кнопочку New repository.

Здесь необходимо заполнить параметры нового репозитория. Важно, чтобы название репозитория было в виде username.github.io, где username — ваш ник на GitHub.

Если вы зарегистрированы в качестве организации, ваш репозиторий должен иметь имя organization.github.io, где organization — название вашей компании на GitHub.

Обязательно ставим галочку на Initialize this repository with a README. А затем нажимаем кнопку Create repository.

Репозиторий создан, теперь нужно загрузить файлы сайта. Воспользуемся интерфейсом GitHub. Нажимаем кнопку Upload files.

Затем перетащим файлы в появившееся поле для загрузки. Добавим комментарий к нашему коммиту и нажмём кнопку Commit changes.

Файлы успешно загружены.

Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io, в моем случае это shevelevdesign.github.io.

Гитхаб позволяет использовать ваше доменное имя вместо стандартного username.github.io.

Для этого переходим во вкладку Settings в интерфейсе репозитория, и в разделе GitHub Pages в поле Custom domain введём название нашего домена и нажимаем кнопку Save.

Далее необходимо изменить информацию о DNS-записях домена.

Нам нужно настроить A-запись домена, для этого переходим в панель управления DNS-записями вашего регистратора, и добавим следующие A-записи:

Всё готово! В течение нескольких часов сайт начнет открываться с нового домена.

Все способы подключения собственного домена подробно описаны в памятке GitHub.

GitHub Pages — лучше, чем вы думаете, комментаторы. Сравнение с Php и хостингами слишком прямолинейно, не забывайте, что php и github — технологии из разных эпох. Из-за этого многие преимущества оказались не раскрыты:

1) GitHub Pages имеет неограниченный хостинг, при условии что вы не храните большие файлы.
2) GitHub Pages не нужна база данных, т.к. базой данных является сам репозиторий. Например, вы можете хранить статьи как Markdown-файлы и верстать блог или новостной сайт при помощи Jekyll (liquid), как это сделано например у меня: https://mikush.in Да, поскольку репозиторий — открытый, вы не сможете хранить пароли — и слава богу, пользуйтесь OAuth.
3) Action Points — это дополнительные сервисы. Вышеупомянутый сайт работает без них абсолютно бесплатно
4) Трафик неограничен и труден для DDoS, т.к. ддосить и блокировать росговмаразму придётся айпишники самого GitHub
5) У GitHub есть API для всевозможных действий с репозиторием. При том что GitHub Pages — движок статических вебсайтов (static pages), с помощью API можно настроить взаимодействие с клиентами и различных ботов. Для комментариев/форума можно подключить Disqus.

Если есть вопросы, пишите в личку.

Картинка на шаге 3 не очень подходит ресурсу.

На этом сайте (VC) обязательно следует помнить, что это не для коммерческих проектов. То есть разместить-то можно попытаться, но это как построить ларёк в зоне прибоя или в русле реки, что засыхает между дождями

GitHub Pages is not intended for or allowed to be used as a free web hosting service to run your online business, e-commerce site

Данный сервис НЕ для тех, кто хочет "на халяву" закинуть свой интернет-магазин или какой-то коммерческий проект на вечный хостинг. Гитхаб — это инструмент, который попробовать должен каждый.

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

Да, это не классический PHP хостинг и придется поработать со "статикой", но вам дают свободное место на диске на бесперебойном сервере, в худшем случае поддомен GitHub и удобный редактор с GIT.