Содержание
Как легко и бесплатно создать веб-сайт с помощью GitHub Pages (даже если вы не знаете, что делаете) | Энн Боннер
Начало работы с GitHub Pages: невероятно быстрое и простое руководство по созданию и публикации бесплатного портфолио, блога или веб-сайта уже есть. Практически любой репозиторий на GitHub можно превратить в веб-сайт одним нажатием двух кнопок.
Вам нужно онлайн-портфолио ваших работ для потенциальных работодателей, но вы не знаете, как сделать веб-сайт? Вы хотите создать блог или бизнес-сайт, но не знаете, с чего начать? Возможно ли, что вы просто не хотите иметь дело (или платить за) с хостингом веб-сайтов, доменными именами и всем остальным?
Это для тебя!
Фото Leonard Alcira на Unsplash
Зачем мне сайт?
Трудно представить человека, которому не было бы пользы от веб-сайта! Возможно, вам потребуется показать свое портфолио потенциальным клиентам или работодателям. Возможно, вам потребуется организовать свои проекты таким образом, чтобы вы могли поделиться ими.
Возможно, вы захотите создать блог о том, что вы делаете, или о местах, где вы были. Вам может понадобиться рекламировать себя или свой бизнес или продать продукт. Какой бы ни была ваша причина, есть большая вероятность, что вы захотите что-то собрать, не тратя на это кучу времени. Есть еще большая вероятность, что вы не хотите тратить много денег.
Фото imarksm через Pixabay
Веб-сайт — это способ связи с миром и мощный инструмент для общения. Это способ поделиться своей работой, своими интересами и увлечениями. Это то, как вы можете создавать, создавать и контролировать свой онлайн-имидж. Кроме того, чем раньше вы создадите свой сайт, тем больше времени у вас будет, чтобы создать свое присутствие в Интернете и привлечь людей, которых вы хотите привлечь. Это может помочь вам выделиться в море конкурентов.
Это также не самая простая вещь в создании, если вы не знаете, что делаете!
Новичок может создать простой и совершенно бесплатный веб-сайт несколькими способами.
Основные из них — GitHub и WordPress.
WordPress отлично подходит для начинающих, которым нужна все помощь. Я люблю Вордпресс! Вот так я завела свой самый первый блог! Особенность бесплатного сайта WordPress в том, что совершенно очевидно, что это сайт WordPress. У вас есть адрес, который заканчивается на wordpress.com, и логотип WordPress внизу каждой страницы.
Если вы только начинаете работать в мире технологий, вы обнаружите, что выглядите более привлекательно, если знаете, как использовать GitHub. Если вы уже некоторое время в мире технологий, есть очень большая вероятность, что прямо сейчас у вас уже есть где-то от одного до миллиона репозиториев на GitHub.
Почему бы не создать свой веб-сайт на GitHub и не разместить его прямо из своего репозитория?
GIF через GIPHY
В настоящее время многое из того, что имеет значение в мире технологий, связано с открытым исходным кодом. Открыто делиться своей работой в сообществе — это большое дело. GitHub предназначен именно для этого.
Размещение вашей работы на GitHub показывает, что вы вовлечены и осведомлены. (Я размещаю свое портфолио прямо из репозитория на GitHub, если хотите взглянуть. Оно довольно устарело, но это пример сайта профиля, созданного с помощью Bootstrap и размещенного из репозитория GitHub.)
Когда вы делитесь своими проектами на GitHub, люди могут видеть ваш код, что вы делаете и как вы это делаете. GitHub предназначен для обмена идеями.
Сейчас почти все, кто занимается технологиями, так или иначе используют Git и/или GitHub. Иметь свой профиль прямо на GitHub — отличный способ поднять руку и принять участие. Кроме того, вы получите репозиторий и несколько коммитов на странице вашего профиля!
Если вы новичок во всем, что связано с Git, вы можете ознакомиться с «Начало работы с Git и GitHub: полное руководство для начинающих». Эта статья познакомит вас с основами того, что такое Git и GitHub, такими понятиями, как « репозиториев »и многое другое. Я предполагаю, что вы уже знаете основы.
Если нет, то стоит потратить несколько минут, чтобы ознакомиться с ними.
Давайте начнем эту вечеринку!
Есть два способа начать работу с вашим сайтом. Возможно, вы начнете с нуля! С другой стороны, у вас может быть веб-сайт, который вы уже создали, но вы не знаете, как использовать GitHub, чтобы превратить его в бесплатный веб-сайт.
Начну с варианта 2.
GIF через GIPHY
У меня есть файлы, но я не знаю, что с ними делать!
Нет ничего проще. Серьезно! GitHub сделает остальную работу за вас. Я предполагаю, что у вас уже есть учетная запись GitHub и вы знаете, что такое репозиторий, но если вы этого не знаете, ознакомьтесь со статьей «Начало работы с Git и GitHub».
Короче говоря, репозиторий — это место, где будет жить ваш проект. Здесь вы будете организовывать свой проект. Вы будете хранить папки, файлы, изображения, видео, электронные таблицы, блокноты Jupyter, наборы данных и все остальное, что нужно вашему проекту, в своем репозитории.
Если вы еще этого не сделали, инициализируйте проект с репозиторием или создайте новый репозиторий и загрузите свои файлы. Если у вас есть файл с именем index.html, GitHub уже поймет, что вы хотите сделать.
Теперь вы собираетесь воспользоваться GitHub Pages. Перейдите в свой репозиторий GitHub и нажмите « Settings ».
Прокрутите вниз до « страниц GitHub ». Вы увидите это:
Теперь перетащите раскрывающееся меню « Источник » на « основная ветвь » или « главная ветвь/папка документов ». Вот в чем дело: если вы хотите публиковать из своей папки «docs», вам серьезно нужно иметь папку «docs» в вашей основной ветке, из которой вы хотите запускать свой сайт!
Скорее всего, если вы новичок, вы выберете «основную ветку», что просто означает, что вы хотите опубликовать свой репозиторий практически как есть. (Было пару раз, когда мне нужно было настроить путь к файлу или два, в зависимости от того, как я структурировал свои папки.
)
Вы увидите уведомление о том, что ваш сайт готов к публикации.
Будьте терпеливы, подождите минуту или две, а затем обновите страницу или попробуйте ссылку, если хотите. Как только ваш сайт будет опубликован, вы увидите это:
Попробуйте перейти по этой ссылке.
Пуф! У вас есть бесплатный сайт!
Поздравляем!!!
Теперь другой вариант:
Я даже не знаю, как начать!
Я собираюсь заняться такими вещами, как Bootstrap и базовый дизайн веб-сайта, в другой раз, а здесь сосредоточусь на абсолютных основах. Однако я хочу, чтобы вы знали, что весь мир — это ваша устрица! Единственное, что ограничивает ваши возможности здесь, — это ваше стремление воплотить это в жизнь. (Ну, может быть, вождение, а также количество времени, которое у вас есть…) Поскольку этот вариант предназначен для полных новичков, я покажу вам, как сделать все правильно на веб-сайте GitHub.
Сначала мы создадим новый репозиторий.
Введите имя репозитория, краткое описание, установите флажок « Инициализировать этот репозиторий с помощью файла README », а затем нажмите « Создать репозиторий ».
Теперь перейдите к « Настройки » в верхней правой части экрана, а затем прокрутите вниз до раздела « GitHub Pages ». Перетащите раскрывающееся меню с надписью « None » на « master branch ».
Сначала вы увидите это:
Подождите минуту или две, а затем вы увидите это:
Теперь нажмите на ссылку!
У вас есть сайт! Поздравляем!
Это не очень похоже
Хорошо, это выглядит довольно скучно, но вы можете видеть, что здесь отображается ваш файл README.
Если вы хотите внести некоторые быстрые изменения, вы можете отредактировать свой README, чтобы отобразить то, что вы хотите, чтобы люди видели. Для этого вернитесь в свой репозиторий, щелкните значок маленького карандаша в файле README и сделайте его лучше!
Отредактируйте файл READMEРедактирование файла (вы работаете с файлом Markdown)Как выглядит файл после нескольких правок!
Вы используете Markdown, и есть много вещей, которые вы можете делать с файлами markdown.
Это включает в себя добавление текста, изображений, ссылок, цветов и некоторого базового форматирования. Это очень простой способ начать! Вот руководство Markdown по базовому синтаксису для тех, кто раньше с ним не работал.
(Помните, что если вы добавляете какие-либо изображения в свой файл README, обязательно загрузите их в свой репозиторий, иначе GitHub не узнает, что вы хотите!)
Теперь вернитесь на свой сайт и посмотрите, что у вас есть!
Имейте в виду, что иногда для внесения изменений требуется несколько минут. Если вы не видите свои изменения сразу, подождите несколько минут и повторите попытку. У меня также была проблема, когда мой ноутбук хотел продолжать возвращаться к более старой версии моего веб-сайта, несмотря на то, что я внес изменения. Удаление истории браузера за последние 24 часа решило эту проблему. Попробуйте простые решения, прежде чем волноваться о сложных вещах!
GIF через GIPHY
Это улучшение, но могло бы быть и интереснее
Если вы совсем новичок и ничего не знаете о CSS, но хотите немного больше визуальной привлекательности, попробуйте тему Jekyll! Это готовые темы, которые вы можете использовать, чтобы ваш сайт выглядел немного лучше, практически без усилий с вашей стороны.
Jekyll и GitHub сделают всю работу за вас! Ваша задача — нажать одну-две кнопки.
Вернитесь в раздел « GitHub Pages » в « Settings » и нажмите « Выберите тему .»
Давайте посмотрим, как будет выглядеть наш веб-сайт, если мы выберем первую появившуюся тему. Все, что вам нужно сделать, это нажать зеленую кнопку « Выберите тему », подождать пару минут, а затем снова попробовать свой сайт!
Всего несколько минут усилий, и мы уже чего-то достигли!
Вот оно! Всего за несколько минут вы создали свой собственный бесплатный веб-сайт для своего бизнеса, блога или портфолио, разместили его в репозитории GitHub, и он уже запущен и работает. Вы готовы поделиться с миром!
Так держать!!!
Пара замечаний:
* Если вы решите, что не хотите использовать тему, нет кнопки вернуться к исходной версии. Однако на самом деле избавиться от вашей темы совсем несложно! Если вы вернетесь в свой репозиторий, вы обнаружите, что теперь у вас есть файл с именем « _config.
yml », который содержит информацию о вашей теме. Если вы удалите этот файл, вы удалите тему!
* Если вы хотите поиграть со своей темой и параметрами темы, вы обнаружите, что « _config.yml » — ваша первая остановка. Теперь, когда вы это знаете, взгляните на миллионы других вариантов Jekyll, которые у вас есть! Вы даже можете начать с темы Jekyll Now, если вам нужен простой и уже настроенный блог. Ваши возможности безграничны!
yml », который содержит информацию о вашей теме. Если вы удалите этот файл, вы удалите тему!Мне не терпится увидеть, что вы создадите! Как всегда, если вы сделаете что-то удивительное с этой информацией, сообщите всем об этом в комментариях ниже.
Если вы хотите связаться или найти больше интересных статей, присоединяйтесь ко мне на Content Simplicity!
Вы также можете ознакомиться с некоторыми другими моими уроками для начинающих здесь, на Medium!
Как писать и публиковать статьи, которые будут замечены
Простые методы создания контента, который легко найти и интересно читать
medium.