Как запустить сайт на html
Есть написан почти простейший сайт, с использованием HTML и CSS. Вот что с этими файлами (со своего ПК) сделать что бы сделать сайт работающий в инете. Вообщем нужно подробная, пошаговая инструкция для чайника — меня.
Участник клуба
Регистрация: 23.07.2007
Сообщений: 1,054
коммерческий способ
1. приобретаем доменное имя для сайта.
nic.ru, reg.ru,panel1.addomains.org и т.д. не забываем что при регистрации доменного имени потребуются паспортные данные владельца или юр.реквизиты для юриков.
2. приобретаем хостинг- то есть то место, где будут лежать ваши файлики. то есть сервер. Существует огромный выбор хотеров как российских так и зарубежных:
fornex.com, hc.ru, majordomo.ru и д.р.
кстати частенько бывает что, те кто продают вам доменное имя, предлагают и хостнг заодно.
3. Как только вы приобрели хостинг и доменное имя, вам надо их связать. то есть сослать доменное имя на ваш хостинг. если вы покупали их в одном месте, то скорее всего уже все настроено. если же нет, то вам надо в настройках домена указать DNS сервера хостера. Чаще всего у хостера есть свои DNS. которые можете узнать в инструкции хостеров. Если же у них нет своих DNS, то надо в редакторе DNS зоны прописать IP адрес сервера. если конечно есть таковой редактор. Но более ушлые регистраторы типа NIC.RU просят еще 600 руб за редактор DNS зоны. Если вы не хотите платить за редактор DNS зоны, а у хостера нет своих DNS, то вы можете использовать сторонние DNS. например Yandex предоставляет их на халяву при этом с редактором DNS зоны.
4. после того, как вы сошлете доменное имя на хост (2 часа-48 часов), дать понять хостеру, что вы будете юзать такое то имя — в настройках укажите. и на хосте появится папочка в которую будут предлагать лить файлы. заливаем через веб интерфейс хостера файлы на сервер или пользуемся FTP
Писано по д’Эльфийски
Запуск HTTP-сервера и выдача HTML-файла
Node не только содержит возможность обрабатывать JS-файлы, как мы только что сделали, он также может создать HTTP-сервер. Мы собираемся рассмотреть создание HTTP-сервера с Node-фреймворком Express для обработки HTML-файла.
В первом приложении мы только выводили что-то в консоль. Двигаясь вперёд, мы учтём чему уже научились для следующего шага, в котором мы можем организовать веб-сайт для наших пользователей. На один шаг мы станем ближе к полноценному веб-приложению.
Давайте придерживаться того же приложения, добавив фреймворк Express с выдачей HTML-файла. Нам понадобятся те же файлы (package.json, server.js) и к ним мы добавим новый файл index.html.
Express: Node-фреймворк
Одним из самых больших преимуществ Node является то, что он содержит поддержку множества пакетов. Сообщество отправляет много пакетов в npm и на момент написания в нём хранится 129257 пакетов, которые загрузили свыше 17694831 раз за последний день. Это большое достижение!
Пакеты расширяют функциональность нашего приложения и найдутся пакеты для многих разных случаев применения.
Вы, возможно, слышали о Grunt, Gulp или даже препроцессорах CSS вроде Less — всё это может быть пакетом.
Express — лёгкая платформа для создания веб-приложений с использованием Node.js. Express помогает организовать веб-приложение на стороне сервера. Сайт ExpressJS описывает его как «минимальной и гибкий Node-фреймворк для веб-приложений».
Express скрывает много внутренней работы Node, которая позволяет вам погрузиться в код приложения, получать всякие штуки и работать намного быстрее. Он прост для изучения и ещё даёт вам немного гибкости с его структурой.
Существует причина, почему в настоящее время это самый популярный фреймворк для Node. Вот несколько больших имён использующих Express:
Для просмотра полного списка зайдите на эту страницу.
Express поставляется с несколькими замечательными возможностями, которые добавят лёгкости в вашу разработку:
- маршрутизация;
- обработка запросов;
- настройки приложения;
- связующее программное обеспечение.
Не волнуйтесь, если эти термины являются для вас новыми. Просто знайте, что Express делает разработку намного проще и работать с ним в радость.
Установка Express
Пакеты для конкретного приложения Node определяются в package.json. Для получения установленных пакетов вы можете использовать один из двух методов:
- Метод 1: Написать пакет в package.json.
- Метод 2: В командной строке использовать npm install.
Мы собираемся использовать второй метод. Перейдите в командную строку и наберите:
$ npm install express --save
Модификатор —save сообщает npm, что он должен записать этот пакет в ваш файл package.json. Если вы выполните эту команду и посмотрите файл package.json, то заметите, что пакет появился в разделе dependencies. Вы также заметите, что была создана новая папка с именем node_modules. В ней Node хранит пакеты для конкретного проекта.
Меняться проектами между разработчиками и сотрудниками очень легко. Просто отправьте другим пользователям ваш проект и они запустят npm install чтобы установить всё из раздела dependencies.
Поскольку у нас уже есть Node и готов Express, используем их для создания HTTP-сервера и выдачи HTML-файла нашим пользователям.
Создание HTTP-сервера и отправка HTML-файла
Начнём с лёгкой части на нашем пути — с HTML-файла. В проекте создайте новый файл index.html и поместите внутрь следующее:
Моё Node-приложение! body Моё приложение!
Мы будем ссылаться на CSS из фреймворка Bootstrap через Bootstrap CDN, это поможет нам быстро сделать стилизацию для этой демонстрации.
Двинемся вперёд и создадим наш HTTP-сервер в Node с помощью Express. Удалите всё из файла server.js и добавьте то что нам понадобится:
// берём Express var express = require('express'); // создаём Express-приложение var app = express(); // создаём маршрут для главной страницы // http://localhost:8080/ app.get('/', function(req, res) < res.sendfile('index.html'); >); // запускаем сервер на порту 8080 app.listen(8080); // отправляем сообщение console.log('Сервер стартовал!');
Кроме этого файла больше ничего не требуется, чтобы использовать Express для запуска HTTP-сервера и отправки HTML-файла!
require() является основным путём вызова пакета в Node. После создания Express-приложения в app , мы можем определить маршрут с помощью переменной HTTP. app.get() создаёт GET маршрут /.
При создании маршрутов, мы всегда будем иметь доступ к req (запрос) и res (ответ). Запрос содержит информацию из браузера. Ответ — это то, что мы отправим обратно пользователю. Мы используем sendfile() , но гораздо больше вещей можно сделать, отправляя данные обратно в формате JSON с помощью res.json() .
Сервер запускается через app.listen() и туда же передаётся желаемый порт 8080.
Чтобы убедиться что всё работает, перейдите в командную строку, чтобы обработать этот файл и запустить сервер.
$ nodemon server.js
Теперь мы можем посмотреть на наш сайт в браузере по адресу http://localhost:8080.
Всякий раз, когда мы запускаем сервер с Node, он будет размещён по адресу http://localhost:НОМЕР_ПОРТА.
Это очень лёгкий и быстрый способ создать HTTP-сервер и начать разработку. Node и Express могут применяться для создания удивительных приложений или при необходимости они просто запускают простой сервер для работы.
Отлично! Мы уже много сделали с Node:
- установили Node;
- обработали очень простой файл;
- использовали npm для установки пакета;
- создали HTTP-сервер с Express;
- отобразили HTML-файл.
Давайте сделаем следующий шаг и создадим приложение, которое на самом деле показывает соответствующие данные.
Как запустить сайт, что дальше после верстки?
я новичок. Взял готовый дизайн код для сайта. Я его сверстал, html+css+js, адапатировал. Теперь у меня есть готовый код. Но какие действия дальше? Нужно превратить верстку во что? Сайт простой из одной страницы. То есть готов изучать, платить за хостинг и тд, но не представляю что нужно для этого. WordPress?
Отслеживать
5,103 2 2 золотых знака 10 10 серебряных знаков 25 25 бронзовых знаков
задан 11 фев 2020 в 12:18
99 2 2 серебряных знака 5 5 бронзовых знаков
Запустить веб-сервер, настроив его на раздачу вашей одной страницы, и поделиться адресом веб-сервера с народом
11 фев 2020 в 12:39
Нужно прежде всего научиться пользоваться поисковыми системами.
11 фев 2020 в 14:58
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вам нужно зарегистрироваться у любого провайдера хостинга, который оказывает услугу shared-хостинга. Доменное имя можно купить у того же провайдера. Осмотритесь в личном кабинете хостинга. Освойте базовые манипуляции с сайтом и настройки. Среди прочего в личном кабинете будет функционал для того, чтобы залить файлы вашего сайта на хостинг. Когда зальете, ваш сайт станет доступен неограниченному кругу лиц по имени домена примерно через несколько часов.
Отслеживать
ответ дан 11 фев 2020 в 12:40
Andrei Fedorov Andrei Fedorov
5,791 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак
А заливать что? Html или php?
11 фев 2020 в 13:14
Заливать всё, что там у вас имеется. Если у вас ‘html+css+js’ то откуда тут взяться php? Если весь сайт -ваша страничка — свёрстана в виде одного файла — его и грузите. Если же в html подключены css и js в виде отдельных файлов — грузите на хостинг их все. Включая файлы картинок, если таковые имеются.
11 фев 2020 в 13:28
То есть, если у меня простой лендинг и только форма работающая на js, то всё будет работать(в теории), в том числе мне смогут на емейл писать люди? Выходит я просто загружаю всё, что есть(верстку в виде html,ccs+js) и ничего более не нужно?(ну соответственно править я только через код смогу текст). Спасибо за ответ заранее.
11 фев 2020 в 13:42
@Алекс, то есть надо залить всё на хостинг, запустить и опробовать. Если локально всё работает, возможно сразу заработает и на хостинге. Впрочем, если вы у себя использовали какие-то сторонние библиотеки, то их необходимо и на хостинге подключить. Если же не заработает сразу, что вы там написали, смотрите логи ошибок и исправляйте. Порой на хостинге сразу из коробки включены не все модули php, например. Едва ли javascript лично отправляет письма. Скорее, он обрабатывает форму и передаёт её php-скрипту. Значит и php у вас есть, а это уже другая история.
Размещение на GitHub Pages — Основы HTML, CSS и веб-дизайна
Мы уже изучили вкратце такие темы, как хостинг и HTTP-запросы в уроке Хостинг курса «Введение в веб-разработку». Стоит освежить память, перечитав тот урок, если следующие термины вам не сразу понятны:
Сегодня мы хотим разместить нашу простую HTML-страницу в интернете таким образом, чтобы она стала доступна всем.
Если бы мы писали полноценное веб-приложение с какой-то логикой, например, с регистрацией и авторизацией пользователей, отправкой и сохранением информации, то нам требовалось бы достаточно комплексное решение с серверами и, возможно, базами данных. Конечному посетителю в любом случае будет приходить HTML, но на стороне сервера могут происходить самые разные сложные операции.
Но у нас простой случай: есть один HTML-файл и один CSS-файл, нет никакой бизнес-логики или взаимодействий. Достаточно чтобы какая-то машина, подключённая к интернету, отдавала содержимое этих файлов в браузер пользователя по запросу.
По сути это та же операция, что происходит у вас на компьютере, когда вы просто открываете свой локальный HTML-файл в браузере:
- Операционная система делает запрос в жёсткий диск или оперативную память.
- Жёсткий диск или оперативная память отдают содержимое файла.
- Операционная система направляет содержимое файла в программу «браузер».
- Браузер обрабатывает файлы (потому что знает как это делать, ведь файлы написаны по стандартам HTML и CSS) и формирует внешний вид.
Всё, что мы хотим сделать, это перенести файлы с локального компьютера на удалённый, и сделать так, чтобы к нему можно было обращаться по протоколу HTTP через интернет. В итоге получится так:
GitHub
Если вы проходите наши курсы по порядку, в рамках программ обучения (например, «Бэкенд JS-программист» или «Фронтенд JS-программист»), то в скором будущем вас ожидает курс по Git. Один из уроков там будет посвящён GitHub.
GitHub — это хранилище кода. Кроме этого GitHub предоставляет бесплатный хостинг для статических файлов — как раз то, что нам нужно. Этот сервис называется GitHub Pages .
Страницы, размещённые на GitHub Pages, могут быть доступны на их поддомене (например, https://guides.hexlet.io/ru/) или на домене второго уровня (например, мой блог https://rakh.im/ ), если у вас есть свой домен.
Для полноценной работы с GitHub необходимо хотя бы базовое понимание Git. Но если вы совсем не знакомы с этой темой — ничего страшного! Прямо сейчас, чтобы разместить страницу на GitHub Pages, нам достаточно следовать простому алгоритму.
- Зарегистрируйтесь на https://github.com/ , если ещё не сделали этого.
- Создайте новый репозиторий с именем username.github.io , где username — ваш ник на GitHub.
- Создайте новый файл. Когда репозиторий не пуст, то в верхнем правом углу есть кнопка «Create New File», но сейчас, когда ещё нет ни одного файла, создать первый можно по прямой ссылке https://github.com/username/username.github.io/new/master , где username — ваш ник.
- Введите имя index.html и скопируйте туда содержание файла index.html, который у вас получился в предыдущем уроке.
- Нажмите кнопку «Commit new file».
- Повторите то же самое для файла style.css.
- Подтвердите публикацию на GitHub Pages. В настройках репозитория: Settings -> Раздел Options -> Секция GitHub Pages.
- Через несколько мгновений страница станет доступна по вашему адресу https://username.github.io
(Если вы умеете работать с Git и собираетесь делать всё локально, то при создании репозитория советую выбрать «Initialize this repository with a README» — в таком случае репозиторий сразу создастся непустым, и его можно будет клонировать. В противном случае нужно будет инициализировать репозиторий локально и добавить удалённый репозиторий).
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты