Лучшая часть: единственное, что вы будете использовать, - это ваш веб-браузер.
В этом небольшом руководстве предполагается, что у вас нет предварительных знаний, кроме того, как работать с клавиатурой, мышью и нажимать кнопки в Интернете. Но я надеюсь, что это поможет начать ваше путешествие по веб-разработке :)
Создание и запуск собственного веб-сайта на основе HTML никогда не было таким простым, благодаря некоторым изящным новым функциям в Github и этой замечательной штуке под названием Github Pages. Лучше всего то, что ваш веб-сайт не будет построен на платформе или каком-то шаблоне. Мы собираемся использовать старый добрый HTML, язык Интернета. Вы можете создать что угодно, от синей страницы с вашим именем, напечатанным на ней массивным коротким шрифтом, до причудливого адаптивного веб-сайта с классной анимацией и летающими кошками, используя все волшебные трюки Интернета. Без ограничений. Чистая крутизна.
Хватит всего этого, приступим, у нас всего 15 минут! Продолжайте читать до конца этой статьи, и у вас будет веб-сайт, который выглядит примерно так. А затем вы можете настраивать - безграничный предел!
Создайте новый проект на Github
Это не так уж сложно, сначала зайдите на github.com и создайте учетную запись. Эта часть ничем не отличается от миллионов аккаунтов, созданных вами в Интернете. Как только это будет сделано, мы будем готовы к самым интересным вещам.
Нажмите кнопку новый репозиторий в Github и создайте новый проект. Я позвонил в репо 15 мин-мне!
Когда вы создаете свой репозиторий, убедитесь, что у вас установлен флажок «инициализировать этот репозиторий с помощью README». Это создаст и инициализирует ваш проект за вас. Если вы этого не сделаете, вам придется самостоятельно инициализировать проект на своем компьютере, а затем отправить свой код в Github. И такого рода поражения цели этого руководства «делать все это в своем веб-браузере, не зная, что такое git».
Отлично, если все пойдет хорошо, теперь у нас есть наш проект.
Создайте файл index.html.
Весь наш файл будет одним файлом HTML (на данный момент). Это неплохо, правда? Важно то, что наш файл должен называться index.html. Это потому, что Github ищет файл с таким именем для использования на нашем веб-сайте. Итак, как нам создать этот файл? Нажимаем на кнопку!
Просто как тот. Назовите новый файл index.html, а затем введите приведенный ниже код. Код очень простой. Забавные вещи, которые выглядят как ‹это›, называются тегами HTML. Подробнее о них позже. А пока просто знайте, что вы открываете тег, например ‹this›, и закрываете тег, например ‹/this›. И все, что находится между этими двумя, является содержимым тега.
Как видите, мы дважды указали свое имя. Один раз в заголовке внутри тега ‹title› и один раз в теле, внутри тега ‹h1›. ‹H1› - это тег heading1, который используется для больших заголовков, таких как заголовки страниц. Или ваше имя. Тег ‹title› устанавливает заголовок веб-страницы, который также отображается в качестве заголовка вкладок в вашем браузере.
Теперь, когда мы это напечатали, нам нужно сохранить наш файл. В мире Github это делается нажатием кнопки «зафиксировать». Коммиты помогают отслеживать версии вашего файла, что довольно удобно. Таким образом, вы можете ввести небольшое сообщение о фиксации, чтобы объяснить изменения, которые вы внесли в свой файл, а затем нажать «Зафиксировать новый файл». Вы можете с радостью пока игнорировать всю эту чепуху о ветвях, деревьях и лесах.
Включите страницы Github
Вы так далеко продвинулись, отличная работа! Вам просто нужно сказать Github включить «Github Pages», и ваш сайт будет в Интернете. Как это круто. Щелкните вкладку «Настройки» в своем репозитории и прокрутите вниз до раздела Github Pages. Выберите главную ветвь в качестве источника и нажмите "Сохранить".
Бум! Ваш код (и, следовательно, ваше имя) теперь в Интернете: D: D
Восхищаюсь своим именем
Перейдите на ‹yourusername› .github.io / ‹your-repository-name› /, чтобы просмотреть свой новый фантастический веб-сайт. Вам даже не нужно вводить длинный URL - ссылка есть прямо в настройках Github. Если вы не пропустили ни один из шагов, вы должны увидеть свое имя, смотрящее на вас. И это довольно замечательно, потому что это вы положили туда.
Мы могли бы остановиться прямо здесь. Или… мы могли бы сделать все немного лучше.
Украсить
Хорошо, можем ли мы сделать наше имя более красивым, но с помощью всего лишь нескольких строк кода? Абсолютно. В разделе заголовка нам нужно добавить немного CSS, используя тег ‹style›. Это поможет нам стилизовать определенные части нашего веб-сайта.
<style>
body {
background-color: black;
text-align: center;
padding: 200px;
}
h1 {
font-size: 60px;
color: #eeee33;
}
</style>
Что мы только что здесь сделали? Мы сделали фон черным, увеличили свое имя и сделали его желтым (# eeee33 - это просто странный способ выбора определенного типа желтого).
Так как же это будет выглядеть? Что ж, достаточно просто, давайте зафиксируем это и посмотрим, что произойдет с нашим сайтом! :) Щелкните файл index.html в проекте и нажмите редактировать, который представляет собой маленький значок ручки. Затем совершите сделку, как вы это делали раньше!
Восхищаюсь снова. Готово!
Перейдите на свой сайт и обновитесь. Обновление может занять несколько минут.
Я немного разбираюсь в кодировании, и ожидание загрузки нашего веб-сайта через пару минут может показаться неэффективным, но в следующей статье мы узнаем, как писать наш код локально на наших компьютерах, быстро выполнять итерацию, проверяя, как он выглядит на браузер, а затем одним движением перенесите все наши изменения в Github, чтобы наш веб-сайт обновился для всеобщего обозрения!
Надеюсь, вам понравилась эта вступительная статья. Поделитесь ссылкой на ваш новый замечательный сайт в ответах :)
Что дальше?
Ну, мы набросали какой-то код, но как бы замолчали, что он на самом деле делает. Хотите узнать, что там произошло? Воспользуйтесь некоторыми из этих замечательных ресурсов, чтобы лучше понять HTML и CSS.
- Codecademy: У них отличные курсы HTML и CSS! Я изучил старую версию Codecademy 4–5 лет назад, и она действительно сработала для меня.
- CodeLife: совершенно новая платформа, разработанная моим консультантом, стартапом Cesar Hidalgo, которая помогает вам изучить HTML, CSS и многое другое.
Вот ссылка на мой репозиторий github со всем кодом из этого руководства.
В следующей статье я расскажу о том, как вы можете начать итерацию на этом новом веб-сайте локально на своем компьютере и добавить несколько новых разделов, чтобы продемонстрировать портфолио ваших работ! Спасибо за прочтение.
