Всегда бывает первый раз. Ваш первый язык. Ваш первый сценарий. Ваш первый веб-сайт.

Не только разработчики могут владеть веб-сайтами. Обладая соответствующими знаниями, каждый может это сделать!

Итак ... как именно начать?

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

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

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

Шаг 1. Выберите среду

Расчетное время: нет данных, Сложность: низкая, Стоимость: 0 долларов США.

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

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

Один из интерфейсных фреймворков с генератором статических сайтов, который я довольно часто использую для GitHub Pages, - это Middleman. Фреймворк предоставляет множество различных функций, которые могут быть знакомы разработчикам Rails, такие как макеты и частичные. Одним из других его преимуществ является то, что он поддерживает начальную загрузку для статического сайта с функциями ведения блога (где сообщения хранятся в отдельных файлах уценки), без необходимости во всем пользовательском интерфейсе редактора и базе данных для ведения блога с дополнительными расходами на хостинг. Добавьте middleman-gh-pages, и получить приложение Middleman на страницах GitHub - совсем несложно.

Конечно, посредник - не единственный выбор. Если вы начинающий фронтенд-разработчик и, возможно, уже пробовали работать с JavaScript и React раньше, то фреймворк, который работает с компонентами React, может вам подойти! Выше я создал шаблон Next.js и инструменты для GitHub Pages, которые можно сразу использовать для создания вашего собственного сайта!

После того, как вы выбрали желаемую среду, мы можем перейти к следующему шагу.

Шаг 2: Создайте свой репозиторий

Расчетное время: 2 минуты, Сложность: низкая, Стоимость: 0 долларов США.

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

Это довольно простой шаг, просто убедитесь, что вы зашли на github.com/new и задали имя репозитория как <username|organisation>.github.io.

Если вы выбрали шаблон Next.js на шаге 1, вы можете просто сослаться на разветвленный репозиторий здесь как на шаблон, что значительно упростит шаг 3.

Шаг 3. Настройте среду, введите код по умолчанию.

Расчетное время: 5–10 минут, Сложность: средняя, ​​Стоимость: 0 долларов США.

После создания репозитория вы должны увидеть набор инструкций по отправке вашей первой фиксации.

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

Шаг 4: Создайте и опубликуйте свой сайт!

Расчетное время: 5 минут, Сложность: средняя, ​​Стоимость: 0 долларов США.

После того, как вы нажали коммит для своей среды, просто запустите команду для создания и развертывания вашего сайта!

Если вы используете Middleman, я настоятельно рекомендую добавить следующий скрипт в корневой каталог вашего исходного кода (для сред Unix) и вызывать ./publish каждый раз, когда вы хотите обновить статические файлы вашего веб-сайта. Этот скрипт очищает ваши файлы сборки от предыдущих сборок во время каждого нового процесса сборки, чтобы решить эту проблему Git.

Если вы используете spa-github-page-template, просто запустите в своем терминале следующее:

npm run publish

И альт! Все файлы и ресурсы для вашего статического сайта должны быть созданы на этом этапе и отправлены в gh-pages ветку вашего репозитория.

Шаг 5. Настройте страницы GitHub

Расчетное время: 3 минуты, Сложность: низкая, Стоимость: 0 долларов США.

Еще один простой шаг. После того, как ваш статический сайт будет опубликован в ветке gh-pages, просто установите параметры ветки GitHub Pages в Settings > Options вашего репозитория (прокрутите до конца) и нажмите «Сохранить».

На этом этапе ваш сайт должен быть запущен на <username|organisation>.github.io (плюс-минус несколько минут, если он еще не появился). Если сайт постоянно возвращает 404, убедитесь, что вы проверили настройки на скриншоте выше, а также проверьте ветку gh-pages и убедитесь, что в корневом каталоге есть допустимый файл index.html.

(Необязательно) Шаг 6. Добавьте личный домен

Расчетное время: ~ 10 минут, Сложность: высокая, Стоимость: варьируется в зависимости от стоимости домена

Допустим, вы хотите выйти за пределы домена GitHub по умолчанию github.io, вместо этого вы можете приобрести собственный домен и поддерживать его со страниц GitHub.

Для этого вам сначала необходимо приобрести домен. Используйте регистратора DNS, например Namecheap или ему подобных, чтобы купить домен по своему выбору. После покупки добавьте следующую запись CNAME с Host, установленным в качестве желаемого субдомена (кроме символа @, который не является специальным символом для субдомена) в меню управления доменом.

На следующем изображении мой сайт big-on.dev направлен на big-on-dev.github.io. Если бы я решил использовать www.big-on.dev, мне пришлось бы вместо этого изменить значение Host на www.

Затем добавьте CNAME файл в исходный код. Убедитесь, что этот файл скопирован в каталог сборки и gh-pages как часть процесса сборки:

После настройки этих ресурсов вы можете перейти к Settings > Options в вашем репозитории, и пользовательский домен должен быть установлен на место. Если вы видите полосу загрузки, немного подождите, пока установка не завершится. После этого вы можете выбрать опцию Enforce HTTPS, если хотите.

Посетите свой сайт еще раз в своем собственном домене, и вы должны увидеть содержимое, размещенное на страницах GitHub!

Ваш первый веб-сайт запущен!

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

Общее время оценивается примерно в 30 минут с учетом настройки персонализированного домена. Давайте умножим время на два в качестве дополнительного буфера, и оно все равно будет в пределах требуемого времени в 1 час!

Создание собственного веб-сайта в первый раз может оказаться очень сложной задачей. Однако, как только вы перейдете этот рубеж, станет намного проще изучить другие инструменты, такие как Cloud Run и App Engine, в Google Cloud, чтобы создать нечто большее, чем просто статический сайт. Если вы любите приключения, попробуйте добавить на свою страницу Google Analytics и Инструменты Search Console. Шаги по добавлению этих инструментов довольно просты, но обучение их использованию может стать огромным плюсом для более глубокого изучения веб-разработки, например, концепций SEO.

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

В любом случае, я надеюсь, вам понравилось это краткое руководство по созданию собственного сайта!

Чао ~