×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

    Этой статьей начинается отдельная рубрика "Как сделать сайт с нуля своими руками", где на реальном примере, с предоставлением исходных материалов (программные коды, файлы и т.п.), будет показано, как действительно можно самостоятельно сделать рабочий сайт.

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

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Размещение в интернете → Переносим сайт на хостинг с помощью FTP клиента FileZilla


Автор: / Дата:

Переносим сайт на хостинг с помощью FTP клиента FileZilla

Здравствуйте уважаемый посетитель!

Сегодня файлы сайта, находящиеся на локальном компьютере, мы перенесем на хостинг, и таким образом разместим сайт в сети Интернет.

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

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

Содержание


  • Способы переноса файлов на хостинг
  • Устанавливаем FTP клиент 'FileZilla'
  • Подключаемся к удаленному серверу
  • Переносим файлы сайта на хостинг
  • Проверяем работу сайта
  • Исходные файлы сайта

Способы переноса файлов на хостинг


Для того, чтобы загружать файлы на хостинг существуют два основных способа. Один с помощью инструментов панели управления сайтом (в данном случае у Хостия это называется "Менеджер файлов"). И второй способ - использование специальных программных средств, так называемых FTP клиентов, работающих по протоколу FTP.

Оба этих способа позволяют выполнять все необходимы действия с файлами. Однако, у них имеются и свои особенности.

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

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

В качестве FTP клиента здесь будем говорить о программе "FileZilla". Это бесплатный, наиболее популярный инструмент, который позволяет оперировать с файлами так же просто, как это обычно делается на компьютере. Поэтому, в повседневной жизни для работы с сайтом обычно используется такой инструмент.

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

Из всего этого можно сказать, что оба способа хороши по-своему. Один для одних действий, другой для других.

Виду того, что наш сайт еще только на начальном этапе и содержит незначительное количество файлов, то сейчас для его загрузки на хостинг лучше использовать FTP клиент. Тем более, что этот инструмент является, так скажем, "рабочей лошадкой", используемой практически каждый день. И поэтому на нем и остановимся.

Устанавливаем FTP клиент "FileZilla"


Установка FileZilla очень простая.

Скачать инсталляционный файл можно здесь, либо на сайте разработчика по ссылке: "http://filezilla.ru/get".

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 1

Рис.1

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 2

Рис.2

Нажмем "ОК" и немного рассмотрим, что из себя представляет интерфейс программы.

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

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 3

Рис.3

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

Подключаемся к удаленному серверу


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

Для этого сначала через меню файл следует открыть панель менеджер сайтов. Далее, в открывшемся окне, на вкладке "Общие" нужно добавить новый профиль, ввести имя FTP-сервера (Хост), а также указать параметры входа, как это показано на скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 4

Рис.4

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

При этом в качестве имени FTP-сервера до того, как не заработал основной домен, нужно указывать имя технического сервера. Ниже на скриншоте показана та часть письма, из которой взяты данные для панели "Менеджер сайтов" об имени хоста и параметрах входа.

Следует уточнить, что на скриншоте по понятным причинам FTP Логин и FTP Пароль закрашены. Но на оригинале письма они конечно имеются, и их нужно указать в качестве параметров входа при добавлении профиля.

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 5

Рис.5

Кроме того, для удобства в работе, чтобы при каждом соединении с сервером окна FTP-клинта открывались сразу в корневых каталогах, можно на панели "Менеджер сайтов" на вкладке "Дополнительно", в качестве настроек по умолчанию, указать пути к локальному и удаленному каталогу.

Для локального компьютера это будет папка "www" локального веб-сервера, а для удаленного сервера - это папка для загрузки файлов, указанная в полученном письме (рис.5).

Данные настройки каталогов по умолчанию показаны на скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 6

Рис.6

И теперь, после добавления профиля, мы может выполнить соединение с сервером. Для этого нужно на панели "Менеджер сайтов" нажать кнопку "Соединиться" (рис.4,5). После этого откроется содержимое корневых папок на локальном компьютере и на удаленном сервере.

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 7

Рис.7

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

Переносим файлы сайта на хостинг


Для того, чтобы перенести файлы на удаленный сервер сначала очистим в нем корневой каталог, которым является папка "public_html".

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

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

Теперь, на стороне локального компьютера выделим все файлы корневой папки "www", откроем правой кнопкой мышки всплывающее меню и в нем щелкнем левой кнопкой мышки по "Закачать на сервер", как показано на скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 8

Рис.8

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 9

Рис.9

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

Таким образом мы загрузили файлы с локального компьютера на хостинг. Осталось только проверить, как теперь будет работать наш сайт на хостинге.

Проверяем работу сайта


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

Сначала попробуем это сделать для основного домена. Проверим, не заработал ли он, пока мы грузили файлы на хостинг. Введем в адресную строку "avtobezugona.ru".

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 10

Рис.10

Как видим основной домен пока не доступен. Введем теперь в адресную строку имя технического домена "http://avtobezugona.ru.s25.hhos.ru/" и обновим браузер.

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 11

Рис.11

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

Но для того, чтобы более объективно проверить его работу, выполним две проверки, в одной проверим код статуса HTTP, а во второй определим время загрузки.

Для этого воспользуемся одним из сервисов по анализу сайтов "Mainspy.ru". В начале проверим ответ сервера.

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 12

Рис.12

Как видно из скриншота, получен код статуса HTTP "200 OK", что является нормой для работающего сайта.

Теперь посмотрим на время загрузки.

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 13

Рис.13

Время загрузки составляет всего 0,07с (70мс), что является довольно хорошим показателем.

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

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

Поэтому, в данном случае, за это время заменим в шапке сайта его название, так как на этапе выбора домена он приобрел название "Авто без угона". А затем через некоторое время снова проверим его работу с основным доменом.

Ну вот, прошло еще немного времени, и сайт загрузился по основному домену "avtobezugona.ru".

Для увеличения / уменьшения размера изображения кликните по картинке
устанавливаем локальный веб-сервер Denwer, картинка 14

Рис.14

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

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

В итоге, мы добились своей цели, разместили сайт во всемирной паутине, и теперь он всем стал доступен.

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

Можно для этого использовать файл "robots.txt", но мы сейчас сделаем это более простым и надежным способом, а именно: дополним заголовки head страниц следующим метатегом.

  1. <meta name="robots" content="noindex, nofollow" />

Рис.15

В дальнейшем, по мере наполнения страниц, будем их открывать. Также пропишем правила для поисковых систем в файле "robots.txt". А сейчас этого будет вполне достаточно.

Таким образом мы завершили очень важный и непростой этап. По существу, создана основа, на которой в последствии должен вырасти функциональный полноценный сайт.

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

Но этим, мы займемся после небольшого перерыва, связанного с моей работой по другим проектам. Ориентировочно выход следующих статей должен возобновиться после 15 февраля 2017г.

При желании можно подписаться на получение уведомлений об обновлении блога.

И в завершении.

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

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

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

Исходные файлы сайта


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

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments