Создание сайта на Github | Типичный верстальщик

Начинаем!

Существует целых два возможных сценария для создания сайтов. Вы либо создаете сайт с нуля, либо уже имеете некий прототип (или готовый сайт), но не знаете, как бесплатно разместить его на GitHub.

Начнем со второго варианта.

Github pages — что это?

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

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

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

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

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

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

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

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

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

У меня есть файлы, но я не знаю, что с ними делать!

А вот здесь все предельно просто — работу за вас сделает GitHub!

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

Если у вас есть файлindex.html, то GitHub сразу поймет, что от него хотят.

Теперь самое время переключиться на GitHub Pages. Зайдите в свой GitHub-репозиторий и нажмите Settings.

Прокрутите до GitHub pages. Здесь вы увидите следующее:

Теперь в выпадающем меню Source выберите master branch или master branch/docs folder. Разница вот в чем: если вы будете размещать проект из папки docs, то эта папка (docs) обязательно должна присутствовать в ветке master, из которой запускается сайт!

Если вы совсем новичок, то, скорее всего, выберете master branch. То есть репозиторий будет размещен «как есть».

Далее следует уведомление, что сайт готов к размещению.

Проявите терпение. Подождите минуту-другую, а затем обновите страницу или попробуйте открыть нужную вам ссылку. Как только сайт будет размещен, вы увидите следующее:

Кликните по этой ссылке.

А вот и ваш бесплатный сайт!

Поздравляем!!!

Теперь попробуем создать сайт с нуля.

Setup your DNS

Edit: Ignore this section and use CloudFlare instead. It’s free, it’s a DNS, It’s also a CDN, and it’s also easier.

I use FreeDNS, cause it’s free, and doesn’t look too dodgy.

Creating your site

Before you can create your site, you must have a repository for your site on GitHub. If you’re not creating your site in an existing repository, see «Creating a repository for your site.»

Warning: GitHub Pages sites are publicly available on the internet, even if the repository for the site is private. If you have sensitive data in your site’s repository, you may want to remove the data before publishing. For more information, see «About repositories.»

1. On GitHub, navigate to your site’s repository.

2. Decide which publishing source you want to use. For more information, see «About GitHub Pages.»

3. If your chosen publishing source already exists, navigate to the publishing source. If your chosen publishing source doesn’t exist, create the publishing source.

4. In the root of the publishing source, create a new file called index.md that contains the content you want to display on the main page of your site.

   Tip: If index.html is present, this will be used instead of index.md. If neither index.html nor index.md are present, README.md will be used.

5. Configure your publishing source. For more information, see «Configuring a publishing source for your GitHub Pages site.»

6. Under your repository name, click Settings.
   

7. In the «Code and automation» section of the sidebar, click Pages.

8. To see your published site, under «GitHub Pages», click your site’s URL.
   

   Note: It can take up to 10 minutes for changes to your site to publish after you push the changes to GitHub. If you don’t see your GitHub Pages site changes reflected in your browser after an hour, see «About Jekyll build errors for GitHub Pages sites.»

9. If your GitHub Pages site is built from a public repository, it is built and deployed with a GitHub Actions workflow run unless you’ve configured your GitHub Pages site to use a different CI tool. For more information about how to view the workflow status, see «Viewing workflow run history.»

Note: GitHub Actions workflow runs for your GitHub Pages sites are in public beta for public repositories and subject to change. GitHub Actions workflow runs are free for public repositories.

Customizing your blog

We’ve only begun to scratch the surface with Jekyll’s blog aware functionality. This guide is only going to cover a couple more steps you might want to take for your blog.

You may have noticed that the URL of your blog post does not include the blog directory in it. In Jekyll we can control the structure of our permalinks by editing the _config.yml file we created in Step 8. So let’s change our permalink structure to include the blog directory.

14 Edit the _config.yml file. Add the following line at the end of the file:

permalink: /blog/:year/:month/:day/:title

Free hosting on github

This guide will take you from zero webserver knowledge, to having your own free site hosted on GitHub. The only non-free bit is registering a domain name, which can be as cheap as $5/year.

This guide uses CrazyDomains as the Registrar, FreeDNS as the DNS, and GitHub as the Webserver.

Getting started with github pages

Don’t worry if some of these concepts are still a little fuzzy to you. The best way to learn this stuff is to just start doing the work, so let’s not waste anymore time and dive right in.

Github

Если вы проходите наши курсы по порядку, в рамках программ обучения (например, «Бэкенд JS-программист» или «Фронтенд JS-программист»), то в скором будущем вас ожидает курс по Git. Один из уроков там будет посвящён GitHub.

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

Notes

1. Somasundaram, R. (2022). Git: Version Control for Everyone (pp. 9-17). Birmingham, UK: Packt Publishing.

Pricing · plans for every developer

Resources

I’ll try to keep this list current and up to date. If you know of a great resource you’d like to share or notice a broken link, please get in touch.

Using jekyll with github pages

Like GitHub Pages, Jekyll is self-aware, so if you add folders and files following specific naming conventions, when you commit to GitHub, Jekyll will magically build your website.

While I recommend setting up Jekyll on your own computer so you can edit and preview your site locally, and when ready, push those changes to your GitHub repo, we’re not going to do that. Instead, to quickly get a handle on how Jekyll works, we’re going to build it into our GitHub repo using the GitHub web interface.

What is git, github, and github pages?

Git, GitHub, and GitHub Pages are all very closely related. Imagine Git as the workflow to get things done and GitHub and GitHub Pages as places to store the work you finish. Projects that use Git are stored publicly in GitHub and GitHub Pages, so in a very generalized way, Git is what you do locally on your own computer and GitHub is the place where all this gets stored publicly on a server.

What is jekyll?

Jekyll is a very powerful static site generator. In some senses, it is a throwback to the days of static HTML before databases were used to store website content. For simple sites without complex architectures, like a personal website, this is a huge plus.

Jekyll makes managing your website easier because it depends on templates. Templates (or layouts in Jekyll nomenclature) are your best friend when using a static site generator. Instead of repeating the same navigation markup on every page I create, which I’d have to edit on every page if I add, remove, or change the location of navigation item, I can create what Jekyll calls a layout that gets used on all my pages. In this tutorial, we’re going to create two Jekyll templates to help power your website.

Wrapping up

16 You’re almost done! Don’t forget to create and commit your about/index.html and cv/index.html pages. Since I’m sure you’ve got the hang of things now, I’ll back off and let you get these pages finished on your own.

17 Before going any further, take the time to setup Git and Jekyll on your own computer. This tutorial is all about Git in the web browser, so really it’s only the half way point. You’re going to have to do this if you want to be able to upload image or PDF files to your GitHub repo.

А зачем мне сайт?

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

Существует несколько способов по созданию простых и бесплатных сайтов для начинающих. В основном такие сайты делаются на базе GitHub и WordPress.

В этой статье о github pages вы узнаете:

1. Что такое GitHub Pages
2. Как установить Git
3. Как загрузить свой проект в GitHub Pages
4. Как подключить свой домен к проекту

Второй: бесплатный, которым пользовались мои друзья

Он сложнее, зато вы получаете бесплатно на год домен в зоне .me. Однако, продление потом будет стоить уже $18.99 (а это больше тысячи рублей) и поморочиться придётся подольше.

Если вы студент it-специальности, слово Github уже не должно вызывать вопросов (а иначе никакой сайт-визитка не поможет). Так вот, этот самый Github помогает в нашем деле дважды. Во первых, он даёт так называемый Student Developer Pack, в котором и будет наш бесплатный домен. А, во вторых, именно средствами Githubа можно бесплатно хостить сайт (но об этом позже).

Где взять шаблон

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

Эти шаблоны построены на основе Bootstrap, есть примеры готовых блоков для страниц, адаптированы для мобильных экранов (в большинстве).Имея базовые знания HTML, css, Bootstrap и чувство прекрасного, можно сделать вполне приличную страницу (или несколько), закоммитить их в develop ветку репозитория, протестировать на разных экранах, и затем залить в master.

Если нужен новый лендинг — повторить.

Таким нехитрым способом я сделал свой личный сайт, а также несколько страниц для учебных проектов.

Как загрузить свой проект в github pages

Сначала нужно зарегистрироваться на GitHub, если у вас еще нет аккаунта. Там стандартная форма регистрации. Затем создать новый репозиторий. Нажмите на «Your repositories», затем — «New».

Как подключить свой домен к проекту на github page

Перейдите в пункт «Settings», раздел «GitHub Pages». Поменяйте в пункте «Source» значение на «main». Нажмите «Save». Страница обновится, появится поле «Custom Domain». Впишите в него ваш домен.

Теперь нужно зайти в редактор DNS-записей вашего провайдера, создать запись типа А и задать ей значение «192.30.252.153». Пункт к этому месту разный у всех провайдеров, но у них есть неплохие инструкции.

Как связать домен и хостинг (dns)

Настройка своего домена начинается

с его регистрации

в настройках репозитория. Подробнее об этом можно почитать в

. Основные шаги, которые надо предпринять:

1) Указать имя домена в настройках репозитория.

2) Добавить файл CNAME с именем домена.

3) В настройках домена у регистратора в пункте DNS добавить две A записи (подробнее здесь):

Как создать бесплатный сайт на github pages

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

Хотите разместить онлайн-портфолио своих работ, но не умеете создавать сайты? А, может, подумываете о собственном блоге или сайте-визитке, но не знаете, с чего начать? Или же просто не хотите тратить время и деньги на хостинги, доменные имена и т.д.?

Тогда эта статья для вас.

Как установить git

Что пользоваться GitHub Pages, нужно установить Git и зарегистрироваться в нем.

Как установить git на linux

Для Fedora — yum: $ yum install git-coreДля Debian (Ubuntu и другие) — apt-get: $ sudo apt-get install git

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

Получение домена

Начнем с получения домена. Здесь есть два способа:

Преимущества создания сайта на github

При работе с хостингом от Github, можно сразу отметить несколько существенных преимуществ:

• Вам не потребуется покупать и ежегодно оплачивать домен;
• Вам не потребуется вносить ежемесячный платеж на оплату хостинга;
• Вы сможете сразу продемонстрировать свою работу клиентам;
• Многие веб-разработчики и заказчики, которые не по наслышке знают о github, с уважением отнесутся к вам, увидев в конце популярное «github.io».

Уже хорошо, но может быть еще лучше

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

Давайте вернемся к GitHub Pages в Settings и нажмем Choose a theme.

Проверим, как изменится сайт при выборе первой из доступных тем. Для этого нажмите зеленую кнопку Select theme, немного подождите и еще раз откройте свой сайт.

Пару минут спустя видим результат:

Вот и все! Вы создали свой первый бесплатный сайт-визитку, блог или портфолио, разместили его в GitHub-репозитории и готовы представить свое творение миру!

Несколько примечаний:

* Если вдруг вам разонравилась текущая тема, то ее можно запросто удалить. В репозитории есть файл _config.yml, в котором размещается информация о теме. Удалите этот файл, и ваша тема удалится вместе с ним!

* Если вы хотите сменить тему или что-то в нее добавить, то опять же ищите файл _config.yml и меняйте там все, что захотите. Можете даже начать с темы Jekyll Now — это простой и уже готовый блог.

Перевод статьи Anne Bonner: How to effortlessly create a website for free with GitHub Pages (even if you don’t know what you’re doing)

Чего-то не хватает

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

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

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

(Помните, что при добавлении изображений в README, нужно обязательно загружать их в репозиторий. Иначе GitHub не поймет, о чем речь!)

Теперь вернитесь в свой сайт и оцените результат.

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

Этап второй: создаем репозиторий

После регистрации вы попадете на стартовую страницу. Чтобы начать проект, необходимо кликнуть на Start a project.

И Вас сразу перекинет на страницу по созданию репозитория. Настройки просты: достаточно ввести имя репозитория (имя будущего домена), в нашем случае это tpvesrtak.github.io, установаем галочку около «Initialize this repository with a README» и жмём Create repository. Description заполнять не обязательно.

Все, репозиторий создан.

Я не знаю, с чего начать!

Сейчас поговорим об основах, а Bootstrap, верстку и т.д. прибережем до следующего раза.

Раз мы создаем сайт с нуля, то делать это будем в самом GitHub.

Для начала создадим новый репозиторий.

Укажите название репозитория, его краткое описание, отметьте галочкой Initialize this repository with a README и нажмите Create repository.

Теперь идем в Settings (правый верхний угол) и прокручиваем до раздела GitHub Pages. Открываем выпадающее меню, меняем его значение с None на master branch.

Сначала вы увидите вот это:

Подождите минуту-другую. Теперь вы видите это:

Кликните по ссылке.

Поздравляю: ваш сайт готов!