Домашнее задание. Статический сайт на хостинге

31 мая 2018

Сформировать и разместить на хостинге PythonAnywhere статический сайт.

Статические сайты

Статический сайт — это веб-сайт без выполнения какого-либо особого кода на стороне сервера. Всё, что делает сервер статического сайта — отдаёт файлы браузеру пользователя, никак их не изменяя. Как правило, статические сайты состоят из HTML-файлов, таблиц стилей CSS, а так же картинок и, возможно, других файлов (шрифтов, видео и так далее). Конечно, статический сайт может содержать код на JavaScript, но от этого он не перестаёт быть статическим.

Создание статического сайта

Как правило, статические сайты создаются при помощи обычного текстового редактора. Однако, существуют и специальные редакторы HTML-страниц, позволяющие редактировать HTML в том виде, в каком он будет показан в браузере. Я не рекомендую пользоваться такими программами, так как HTML-код, создаваемый этими программами, часто избыточен и засорён лишними тэгами.

Одностраничный статический сайт состоит из HTML-страницы со всем содержимым (файла index.html), а так же папки с дополнительными файлами — таблицами стилей и прочим.

Готовые шаблоны

Поскольку создать хорошо свёрстанную HTML-страницу без опыта непросто, можно пользоваться готовыми бесплатными шаблонами страниц. Например, с сайта HTML 5 UP. При помощи поисковой системы можно найти и другие подобные сайты.

Как правило, такой шаблон скачивается в виде архива. Шаблон содержит готовые веб-страницы, а так же файлы, необходимые для их правильного отображения.

Всё, что требуется — скачать архив шаблона, распаковать, заменить текст в шаблоне на свой (это может потребовать некоторого знания HTML, конечно), после чего страницы можно публиковать. Рекомендую перед началом редактирования файла снимать с него копию, чтобы иметь возможность вернуть всё назад, если неосторожные изменения испортят вёрстку страницы.

Чтобы проверить, как выглядит страница, просто откройте HTML-файл двойным щелчком мыши. Он откроется в браузере. Или перетащите HTML-файл в окно браузера. Если вы видите белый фон и странно расположенный текст — скорее всего, вы забыли про папку с ресурсами (таблицами стилей и так далее). Она может называться, например, static или assets. Эта папка должна лежать в той же папке, где и ваша веб-страница. После любого изменения исходных файлов нужно перезагрузить страницу в браузере (клавиши Ctrl+R, Command+R или F5, в зависимости от браузера).

Задание

На основе готового шаблона сделать веб-страницу произвольной тематики (например, своё резюме) и разместить её в виде статического сайта на хостинге Python Anywhere.

Публикация на хостинге Python Anywhere

Статические сайты довольно легко публиковать. Достаточно просто загрузить их на хостинг, в папку DOCUMENT_ROOT сервера (название её может разниться от сервера к серверу). Рассмотрим публикацию на Python Anywhere.

Подготовьте страницы для публикации. Не забудьте назвать файл основной страницы сайта так: «index.html».
Упакуйте всё в zip-архив. Обязательно ZIP, не rar, не 7z, не что-то ещё (на самом деле, можно и другие типы архивов использовать, но zip очень удобен и поддерживается всеми операционными системами одинаково хорошо). В архиве должны быть как ваши веб-страницы, так и все дополнительные файлы. Пожалуйста, сделайте так, чтобы архив содержал не папку с HTML-файлами, а сами HTML-файлы. То есть при упаковке выделите HTML-файлы и папку с ресурсами. Не нужно паковать папку, в которой всё это лежит.
Зарегистрируйтесь на Python Anywhere и войдите под своими логином и паролем.
Перейдите в раздел Files (сверху).
Создайте новый каталог для сайта. Для этого слева в поле «Enter new directory name» введите название каталога (например, site). Нажмите кнопку «New directory».
Вы уже во вновь созданном каталоге. Теперь нажмите оранжевую кнопку «Upload a file», в появившемся окне выберите ваш архив и нажмите «Открыть».
Подождите, пока файл загрузится.
Сверху нажмите ссылку «Open Bash console here», дождитесь, пока загрузится консоль. Когда она загрузится, появится символ приглашения к вводу (зелёный знак «$») и прямоугольный курсор за ним.
Введите команду unzip имя-вашего-архива.zip. Это консоль Linux, тут работает автодополнение при помощи клавиши Tab. То есть, если я назвал файл архива my_files.zip, я могу ввести unzip m и нажать Tab. Так как других файлов в этом каталоге нет, автодополнение угадает имя файла. После ввода команды, конечно, нажмите Enter.
Дождитесь завершения распаковки и появления зелёного знака «$». Теперь введите команду pwd и нажмите Enter. Появится полный путь к вашей папке (начинается с /home/...). Выделите его и нажмите Ctrl+C (или Command+C).
Теперь введите команду exit и нажмите Enter. Консоль деактивирована. Нажмите на кнопку меню с тремя чёрточками справа вверху и выберите «Files».
Слева нажмите на название вашей папки (site) и убедитесь, что все HTML-файлы на месте.
Теперь слева вверху нажмите «Web». Это раздел управления веб-сайтом.
Нажмите кнопку «Add a new web app» слева. В появившемся окне нажмите «Next».
В окне «Select a Python framework» выберите «Manual configuration».
В окне «Select a Python version» выберите 3.5 (хотя это и не имеет значения).
Нажмите «Next» ещё раз. Подождите, создание веб-приложения занимает несколько секунд.
Прокрутите страницу вниз до раздела «Static files». Нужно добавить путь к нашему сайту в этот раздел. Это будет как бы наш DOCUMENT_ROOT (дело в том, что для сайта, работающего на технологиях Python, наличие DOCUMENT_ROOT необязательно).
Для этого нажмите ссылку «Enter URL» в таблице «Static files». В появившееся поле введите «/» (символ слэш) и нажмите кнопку с галочкой.
Нажмите ссылку «Enter path» напротив только что добавленной строчки со слэшем. Вставьте в появившееся поле полный путь к нашим файлам (помните, мы на действии №10 скопировали этот путь?), нажав Ctrl+V (или Command+V). Убедитесь, что в конце пути стоит слэш (символ «/»). Нажмите кнопку с галочкой.
Прокрутите страницу в самое начало и нажмите зелёную кнопку «Reload ....». Подождите, пока она успокоится и исчезнет вращающийся индикатор.
Нажмите на ссылку вверху страницы после слов «Configuration for ....». Это ссылка на ваш сайт. Он должен открыться. Если что-то пошло не так, убедитесь, что вы нигде не ошиблись.

Если что-то не получится, пишите.