Размещение вашего статического сайта бесплатно

1. GitHub Pages
2. Пользовательские доменные имена
3. Surge.sh
4. Netlify (личный фаворит)

Итак, вы только что добавили последние штрихи к своему статический сайт и пришло время поделиться этим с миром. Хорошей новостью является то, что существует множество отличных хостинговых решений, которые помогут упростить процесс. Развертывание современного статического сайта стало чрезвычайно быстрым, простым и совершенно бесплатным! Лучше всего то, что все эти решения имеют встроенное кэширование и сеть доставки контента (CDN) для обеспечения оптимальной производительности.

Если вы запускаете личный сайт или что-то важное, я настоятельно рекомендую приобрести доменное имя. Это будет единственная цена, которую вы понесете в этом процессе, но доменные имена стоят всего около 10-15 долларов за целый год. Если вы просто экспериментируете или не заботитесь о своем URL, хостинговые решения, приведенные ниже, предоставят вам бесплатный субдомен. Разница в основном сводится к: yoursite.com против yoursite.netlify.com.

Я недавно использовал Namecheap потому что домен имеет бесплатную конфиденциальность Whois, что важно, если рекламодатели не хотят получать спам. Довольно хорошая сделка, если учесть, что в других местах берут 5-10 долларов только за конфиденциальность.

GitHub Pages

GitHub Pages хороши тем, что позволяют размещать ваш сайт прямо из репозитория GitHub. После завершения начальной настройки вы можете быстро развертывать каждый раз, когда вносите изменения в свой репозиторий. Вы выберете публикацию на страницах GitHub либо с сайта пользователя, либо с сайта проекта. На сайте пользователя вам просто нужно создать новый репозиторий, используя ваше имя пользователя. Имя репо должно быть: username.github.io.

Например, мое имя пользователя GitHub - ChangoMan, поэтому мой новый репозиторий будет называться: changoman.github.io , Теперь мне просто нужно создать новый файл index.html и зафиксировать его в этом хранилище, и сайт будет запущен https://changoman.github.io/ , Ваш генератор статического сайта должен был создать скомпилированную папку (обычно называемую / public) после процесса сборки, поэтому вам нужно будет зафиксировать содержимое в вашем хранилище.

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

Выберите основную ветку в качестве источника, и ваш сайт будет работать по адресу: https: // имя пользователя .github.io / репозиторий , В качестве альтернативы, вы можете выбрать мастер-ветку / папку docs, а GitHub Pages будет игнорировать все в вашей мастер-ветке и только развернуть материал в папке / docs. Поскольку генератор статического сайта, вероятно, выведет папку с именем / public, вам необходимо настроить ее и изменить имя с / public на / docs перед фиксацией.

Например, репо: https://github.com/ChangoMan/hugo содержит статический шаблон сайта Hugo. Обратите внимание на папку там, называемую / docs, которая содержит конечные файлы сайта. Обычно эта папка будет называться / public, но я настроил Hugo и изменил имя выходной папки, это делается в config.toml файл.

Метод / docs полезен, если вы хотите отслеживать как статический шаблон сайта, так и конечный скомпилированный сайт. Есть много Руководства GitHub для более продвинутых методов.

Пользовательские доменные имена

Если бесплатный поддомен GitHub не идеален, вы можете использовать свой собственный домен, как я упоминал ранее. Направляйтесь к Namecheap если вы ищете новый домен. Получив свой домен, перейдите на вкладку «Настройки» для своего репозитория GitHub и введите свой пользовательский домен в разделе «Страницы». Затем вам нужно настроить свой ALIAS, ANAME или Arecord у своего провайдера DNS. Этот шаг зависит от того, где вы приобрели свой домен, см. это руководство Больше подробностей.

Как примечание, вы получите доступ к бесплатному сертификату SSL при использовании поддоменов GitHub, но вы потеряете SSL при переходе на пользовательский домен. Это также верно для Surge.sh, который является еще одним вариантом хостинга, который мы рассмотрим ниже. Очень важно, чтобы ваш сайт обслуживался по https, потому что Google решительно поддерживает это для рейтинга SEO. Если вы хотите SSL с пользовательским доменом, вы можете настроить бесплатный Cloudflare account и пусть Cloudflare обработает вашу запись DNS.

Surge.sh

Мне очень нравится Surge.sh, потому что он быстрый и простой в настройке и развертывании. Чтобы начать использовать Surge, на вашем компьютере должны быть установлены Node.js и npm. Из корневой папки проекта убедитесь, что вы создали окончательную папку сборки

cd public / npm install - глобальный всплеск всплеска эха subdomain.surge.sh> CNAME

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

Как и в случае с GitHub Pages, вы можете настроить настраиваемый домен , но не будет с сертификатом SSL. Вы можете исправить это с помощью бесплатной учетной записи Cloudflare, как и раньше.

Netlify (личный фаворит)

Пока что мы обсудили два замечательных варианта хостинга, но у них обоих есть схожие недостатки. Во-первых, пользовательские домены не поставляются с сертификатом SSL. Как упоминалось ранее, обслуживание вашего сайта с помощью https помогает повысить рейтинг в SEO и очень важно. С Netlify , вы получите бесплатный SSL с вашим пользовательским доменом! Это еще одна вещь, о которой вам нужно беспокоиться при размещении вашего окончательного проекта.

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

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

Похожие

Комментарии