Публикация на GitHub Pages

В этом ноутбуке мы разберём, как опубликовать интерактивную карту, сохранённую в формате .html, с помощью GitHub Pages.

GitHub Pages позволяет бесплатно размещать статические веб-страницы прямо из репозитория GitHub. Так как карта Folium сохраняется как обычный HTML-файл, её можно опубликовать как веб-страницу и открыть по ссылке в браузере.

Что понадобится¶

Для публикации карты нужно:

• аккаунт GitHub;

• HTML-файл с картой Folium;

• репозиторий на GitHub;

• включённый GitHub Pages.

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

https://username.github.io/repository-name/

1. Сохраняем карту Folium в HTML¶

После создания карты Folium её нужно сохранить в файл.

Например, если карта хранится в переменной m, используем метод .save():

m.save("index.html")

Важно назвать файл именно index.html, потому что GitHub Pages по умолчанию открывает файл с таким названием как главную страницу сайта.

Если сохранить карту под другим именем, например:

m.save("map.html")

то ссылка будет выглядеть так:

https://username.github.io/repository-name/map.html

Но для простоты лучше использовать index.html.

2. Проверяем HTML-файл локально¶

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

Для этого найдите файл index.html в папке проекта и откройте его в браузере.

Если карта отображается корректно, файл готов к публикации.

3. Создаём репозиторий на GitHub¶

Откройте GitHub и создайте новый репозиторий.

Например, можно назвать его:

folium-map

При создании репозитория можно выбрать:

• Public, если карту можно показывать всем;

• Private, если репозиторий должен быть закрытым.

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

4. Загружаем файл карты в репозиторий через интерфейс GitHub¶

Самый простой способ — загрузить файл через веб-интерфейс GitHub.

Откройте созданный репозиторий и нажмите:

Add file → Upload files

Загрузите файл:

index.html

После загрузки нажмите:

Commit changes

Теперь HTML-файл находится в репозитории.

5. Включаем GitHub Pages¶

Откройте настройки репозитория:

Settings → Pages

В разделе Build and deployment выберите:

Source: Deploy from a branch

Затем укажите:

Branch: main
Folder: /root

После этого нажмите:

Save

GitHub начнёт публикацию сайта.

Обычно через некоторое время на этой же странице появится ссылка на опубликованную карту.

Она будет выглядеть примерно так:

https://username.github.io/folium-map/

6. Открываем опубликованную карту¶

Перейдите по ссылке, которую GitHub Pages покажет в настройках.

Если файл называется index.html, карта откроется сразу по адресу репозитория:

https://username.github.io/folium-map/

Если файл называется иначе, например map.html, нужно добавить имя файла в конец ссылки:

https://username.github.io/folium-map/map.html

7. Обновление карты¶

Если вы изменили карту в Python, её нужно снова сохранить:

m.save("index.html")

Затем загрузите новый файл index.html в репозиторий вместо старого.

Через интерфейс GitHub это можно сделать так:

1. открыть файл index.html в репозитории;

2. нажать на значок карандаша или загрузить новый файл через Upload files;

3. сохранить изменения через Commit changes.

После обновления GitHub Pages может применить изменения не сразу. Если старая версия карты всё ещё отображается, обновите страницу браузера или откройте ссылку в режиме инкогнито.

8. Публикация через Git¶

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

Сначала перейдите в папку проекта:

cd path/to/your/project

Инициализируйте Git, если он ещё не был инициализирован:

git init

Добавьте файл карты:

git add index.html

Создайте коммит:

git commit -m "Add Folium map"

Подключите удалённый репозиторий:

git remote add origin https://github.com/username/folium-map.git

Отправьте файлы на GitHub:

git branch -M main
git push -u origin main

После этого включите GitHub Pages в настройках репозитория, как описано выше.

9. Если карта использует внешние файлы¶

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

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

Например:

folium-map/
├── index.html
├── data/
│   └── stops.geojson
└── photos/
    ├── stop_1.jpeg
    └── stop_2.jpeg

Пути в HTML должны совпадать со структурой папок в репозитории.

Итог¶

В этом ноутбуке мы разобрали, как опубликовать интерактивную карту Folium на GitHub Pages.

Мы:

• сохранили карту в файл index.html;

• проверили HTML-файл локально;

• создали репозиторий GitHub;

• загрузили карту в репозиторий;

• включили GitHub Pages;

• получили публичную ссылку на карту;