1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
---
title: Как использовать GitHub Pages?
slug: Learn/Common_questions/Using_Github_pages
translation_of: Learn/Common_questions/Using_Github_pages
tags:
- Beginner
- GitHub
- Guide
- Web
- gh-pages
- git
- publish
---
<p class="summary"><a href="https://github.com/">GitHub</a> — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения <strong>в системе управления версиями</strong> <a href="http://git-scm.com/">Git</a>. После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.</p>
<h2 id="Публикация_контента">Публикация контента</h2>
<p>GitHub — очень важное и полезное сообщество для участия, а Git/GitHub — очень популярная <a href="http://git-scm.com/book/ru/v2/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D0%9E-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B5-%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8F-%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D0%B9">система управления версиями</a> — большинство технологических компаний теперь использует её в своём рабочем процессе. У GitHub есть очень полезная функция <a href="https://pages.github.com/">GitHub Pages</a>, которая позволяет публиковать живую демонстрацию кода в виде сайта в Интернете.</p>
<h3 id="Базовая_установка_Github">Базовая установка Github</h3>
<ol>
<li>Прежде всего, <a href="https://git-scm.com/downloads">установите Git</a> на свой компьютер. Это базовое программное обеспечение для управления версиями, поверх которого работает GitHub.</li>
<li>Затем <a href="https://github.com/">зарегистрируйтесь на GitHub</a>. Это просто.</li>
<li>После того, как вы зарегистрировались, войдите в свою учётную запись на <a href="https://github.com">github.com</a> с помощью своих имени пользователя и пароля.</li>
</ol>
<h3 id="Подготовка_кода_для_загрузки">Подготовка кода для загрузки</h3>
<p>В репозитории на Github вы можете хранить любой код, который вам нравится, но для полноценного использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, то есть, основной точкой входа должен быть HTML-файл с именем <code>index.html</code>.</p>
<p>Прежде чем двигаться дальше, вам необходимо инициализировать вашу папку (директорию) с кодом как репозиторий Git. Как это сделать:</p>
<ol>
<li>Направьте командную строку в вашу папку <code>test-site</code> (или папку с любым другим названием, содержащую ваш сайт). Для этого используйте команду <code>cd</code> (т.е. «<em>c</em>hange <em>d</em>irectory» — «поменяй директорию»). Вот что вы бы набрали, если бы разместили свой сайт в папке <code>test-site</code> на рабочем столе:
<pre class="brush: bash">cd Desktop/test-site</pre>
</li>
<li>Когда командная строка указывает внутрь вашей папки веб-сайта, введите следующую команду, которая сообщает инструменту <code>git</code>, что папку нужно превратить в репозиторий git:
<pre class="brush: bash">git init</pre>
</li>
</ol>
<h4 id="Дополнительно_об_интерфейсах_командной_строки">Дополнительно об интерфейсах командной строки</h4>
<p>Лучший способ загрузить код в Github — использовать командную строку. Это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, вместо того чтобы кликать внутри пользовательского интерфейса. Оно будет выглядеть примерно так:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
<div class="note">
<p><strong>Примечание</strong>: вы также можете использовать <a href="https://git-scm.com/downloads/guis">графический пользовательский интерфейс Git</a> для выполнения тех же задач, если вам неудобно работать с командной строкой.</p>
</div>
<p><span id="Командная_строка">Каждая операционная система поставляется с инструментом командной строки:</span></p>
<ul>
<li><strong>Windows</strong>: <strong>Командную строку</strong> (<strong>Command Prompt</strong>) можно вызвать, нажав клавишу Windows, набрав <em>Command Prompt</em> и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.</li>
<li><strong>OS X</strong>: <strong>Терминал</strong> (<strong>Terminal</strong>) можно найти в <em>Applications > Utilities</em>.</li>
<li><strong>Linux</strong>: Обычно терминал можно вызвать с помощью <em>Ctrl + Alt + T</em>. Если это не сработает, найдите <strong>Terminal</strong> в панели приложений или меню.</li>
</ul>
<p>Сначала это может показаться немного пугающим, но не волнуйтесь — вы быстро разберётесь в основах. Вы говорите компьютеру что-то сделать в терминале, введя команду и нажав Enter, как показано выше.</p>
<h3 id="Создание_репозитория_для_вашего_кода">Создание репозитория для вашего кода</h3>
<ol>
<li>Затем вам нужно создать новый репозиторий для ваших файлов. Нажмите «Плюс» (+) в правом верхнем углу главной страницы GitHub и выберите «Новый репозиторий» (<em>New Repository</em>).</li>
<li>На этой странице в поле «Имя репозитория» (<em>Repository name</em>) введите имя для своего репозитория, например <em>my-repository</em>.</li>
<li>Также добавьте описание, чтобы уточнить, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:<br>
<img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
<li>Нажмите «Создать репозиторий» (<em>Create repository</em>); откроется следующая страница:<br>
<img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
</ol>
<h3 id="Загрузка_файлов_на_GitHub">Загрузка файлов на GitHub</h3>
<ol>
<li>На текущей странице вас интересует раздел <em>…or push an existing repository from the command line</em> («...или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
<pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre>
</li>
<li>Затем введите следующие две команды, нажимая Enter после каждой из них. Они готовят код для загрузки в GitHub и просят Git управлять этими файлами.
<pre class="brush: bash">git add --all
git commit -m 'adding my files to my repository'</pre>
</li>
<li>Наконец, загрузите код на GitHub, для чего вернитесь к текущей веб-странице GitHub и введите в терминал вторую из двух команд, которые мы увидели в секции <em>…or push an existing repository from the command line</em>:
<pre class="brush: bash">git push -u origin main</pre>
</li>
<li>Теперь вам нужно включить функционал GitHub Pages для своего репозитория. Чтобы сделать это, зайдите на страницу своего репозитория и выберите «Настройки» (<em>Settings</em>), затем выберите <em>Pages</em> на панели слева. В разделе <em>Source</em> выберите ветку main. Страница должна обновиться.</li>
<li>Перейдите в раздел GitHub Pages снова. Вы должны увидеть надпись «Ваш сайт готов к публикации на https://xxxxxx» («Your site is ready to be published at https://xxxxxx»).</li>
<li>Если вы кликните на ссылку, вам должна открыться страница с живой демонстрацией вашего примера, при условии, что домашняя страница называется <code>index.html</code> — по умолчанию ссылка ведет именно на неё. Если точка входа на ваш сайт называется как-то иначе, например <code>myPage.html</code>, то чтобы увидеть её, вам нужно открыть <code>https://xxxxxx/myPage.html</code>.</li>
</ol>
<h3 id="Больше_информации_о_GitHub">Больше информации о GitHub</h3>
<p>Если вы хотите поменять что-то на своем тестовом сайте и загрузить результат на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам потребуется ввести следующие команды (нажимая Enter после каждой), чтобы загрузить их на GitHub:</p>
<pre>git add --all
git commit -m 'another commit'
git push</pre>
<p>Вы можете написать более подходящее сообщение вместо <em>another commit</em>, чтобы уточнить, что именно вы только что изменили.</p>
<p>Мы едва коснулись Git. Чтобы узнать больше, начните с нашей статьи <a href="/ru/docs/Learn/Tools_and_testing/GitHub">Git и GitHub</a>.</p>
|
