Разместите веб-сайт личного портфолио менее чем за 10 минут.
Наличие собственного веб-сайта позволяет вам показать всему миру, кто вы есть и чем вы увлечены.
Многие люди считают, что создание веб-сайта было бы слишком дорогим или технически сложным для обычного человека. На самом деле, это совсем не должно стоить ничего, может быть выполнено кем угодно, независимо от уровня опыта, и может быть установлено и запущено менее чем за 10 минут! (Вы можете посмотреть мою здесь)
GitHub Pages - это функция GitHub, которая позволяет пользователям размещать статические веб-страницы прямо из репозиториев. Он идеально подходит для размещения веб-сайта с личным портфолио, демонстрации проектов или для размещения своей страницы в небольшой организации. В этом посте я продемонстрирую, насколько просто каждому получить веб-сайт в Интернете, размещенный через GitHub Pages.
Шаг 1. Создайте учетную запись GitHub
Если у вас уже есть учетная запись GitHub, пропустите этот шаг. В противном случае вы можете зарегистрироваться здесь.
В этой статье я постараюсь не предполагать предварительных знаний, но рекомендую вам ознакомиться с концепциями Git, если вы никогда не использовали его раньше. Эта статья предлагает отличное введение в Git и GitHub из полных основ:
Шаг 2 - Создайте репозиторий для своего веб-сайта
Репозиторий - это место, где вы храните весь код для своего проекта, или, как объясняется на странице справки GitHub:
Репозиторий - это как папка для вашего проекта. Репозиторий вашего проекта содержит все файлы вашего проекта и хранит историю изменений каждого файла. Вы также можете обсуждать и управлять работой вашего проекта в репозитории . Справка GitHub
Поэтому, чтобы начать работу с нашим проектом, первое, что нам нужно сделать, это создать репозиторий для размещения кода нашего веб-сайта. Теперь, когда у нас есть учетная запись GitHub, это легко сделать. Просто перейдите в верхний правый угол домашней страницы GitHub и в меню «+» выберите «Новый репозиторий».
Откроется страница Создать новый репозиторий, где мы можем выбрать имя репозитория и выбрать, будет ли наш репозиторий общедоступным или частным . Важно дать этому репозиторию конкретное имя, чтобы GitHub знал, что этот репозиторий должен размещаться на страницах GitHub. Это должно быть [your_username].github.io. Так, например, поскольку мое имя пользователя GitHub - emilegill743, имя моего репозитория - и, как мы увидим позже, URL-адрес моего веб-сайта - будет emilegill743.github.io. Мы также захотим установить наш репозиторий как Public, поскольку GitHub Pages разрешает размещение Private репозиториев только при обновлении до GitHub Pro.
Как только мы это сделаем, GitHub перенесет нас в наш недавно созданный репозиторий и объяснит несколько способов, с помощью которых мы можем начать работу с локальной копией репозитория. Если вы не знакомы с работой с Git из командной строки, самый простой способ клонировать этот пустой репозиторий в вашу локальную систему - использовать Настроить на рабочем столе . Это откроет рабочий стол GitHub, который можно установить здесь, создав локальную копию репозитория в любом месте по вашему выбору. Теперь у вас будет пустая папка с именем вашего репозитория в вашей локальной файловой системе, которая будет отслеживать любые вносимые нами изменения. Затем эти изменения можно зафиксировать и отправить в наш удаленный репозиторий на GitHub.
Шаг 3 - Выбор дизайна вашего веб-сайта
Теперь, если вы заядлый человек, возможно, вы захотите создать свой веб-сайт с нуля. Теоретически вы могли бы это сделать; все, что нам нужно, это index.html файл в нашем удаленном репозитории, и GitHub выполнит рендеринг нашего веб-сайта. Однако, поскольку цель этой публикации - как можно быстрее запустить и запустить наш веб-сайт, мы воспользуемся шаблоном, чтобы начать работу. Это позволит нам создать элегантный, отзывчивый, профессиональный веб-сайт с минимальными затратами усилий.
Существует множество сайтов, предлагающих шаблоны для дизайна веб-сайтов, некоторые из них можно приобрести за небольшую плату, но многие из них доступны бесплатно. Мой особенный фаворит - HTML5 UP, который предлагает широкий выбор красивых дизайнов, идеально подходящих для веб-сайта с личным портфолио. Все дизайны бесплатны в соответствии с Лицензией Creative Commons Attribution 3.0 License, что означает, что мы можем использовать их по своему усмотрению, при условии, что мы указали HTML5 UP для дизайна.
Не стесняйтесь провести собственное исследование и найти дизайн, который вам больше всего подходит; для демонстрации здесь я буду использовать тему Strata HTML5 UP.
Шаг 4 - Отправьте на GitHub
Теперь, когда мы выбрали наш дизайн, мы можем загрузить связанные с ним файлы и перенести их в наш локальный репозиторий. Затем мы можем зафиксировать наши изменения и отправить их в наш удаленный репозиторий. Опять же, если вам комфортно работать с Git, продолжайте и делайте это через командную строку, но если вы новичок в этом, вы можете аналогичным образом использовать GitHub Desktop.
Вот где происходит волшебство. Откройте веб-браузер и перейдите по URL-адресу [your_username].github.io.
Наш сайт работает! Теперь давайте посмотрим, как мы можем добавить последние штрихи и персонализировать его. Сейчас это всего лишь шаблон.
Шаг 5. Настройте свой веб-сайт
Для этого последнего шага нам понадобится текстовый редактор. Если вы профессионал в области программирования, у вас, вероятно, уже есть любой текстовый редактор. Подойдет любой, но я лично рекомендую Visual Studio Code, который вы можете установить здесь.
Открыв папку, содержащую наш репозиторий, в нашем текстовом редакторе, мы увидим все файлы, которые способствуют дизайну нашего веб-сайта. Самый важный из них - это наш index.html файл, который обозначает структуру главной страницы нашего веб-сайта. Вероятно, также будет несколько .css файлов и, возможно, еще несколько .js. Не волнуйтесь, если вы не знакомы ни с одним из них, меня не было, когда я создавал свой первый веб-сайт! Основное резюме состоит в том, что HTML (язык гипертекстовой разметки) формирует строительные блоки структуры нашей веб-страницы, CSS (каскадные таблицы стилей) описывает, как наша веб-страница должна быть стилизована, а Javascript определяет интерактивное поведение нашей веб-страницы.
Первое, что я предлагаю, это загрузить расширение Live Server для Visual Studio Code, которое позволит нам предварительно просматривать наш веб-сайт по мере его редактирования и автоматически обновлять, когда мы сохраняем изменения. . Кроме того, вы можете просто открыть страницу index.html в своем веб-браузере и вручную обновить ее, чтобы проверить изменения.
Я не буду вдаваться в подробности того, как писать HTML, иначе это могло бы быстро превратиться в учебное пособие. Базовый синтаксис состоит из «тегов», которые образуют элементы HTML, строительные блоки веб-страницы HTML. Эти теги обычно состоят из начального тега, любых атрибутов тега, некоторого содержимого и затем конечного тега.
<tag attribute="value">Some content</tag>
Вам решать, насколько сильно вы хотите настроить свой веб-сайт. На самом базовом уровне вы захотите изменить содержание элементов HTML на своей веб-странице, чтобы отразить вашу личную информацию. Вы также, вероятно, захотите изменить изображения на веб-странице. Для этого все, что вам нужно сделать, это скопировать изображение, которое вы хотите использовать, в свой репозиторий (если вы используете шаблон HTML5 UP, у него, вероятно, уже будет папка, предназначенная для изображений), а затем адаптировать атрибут src для элемент изображения, отражающий путь к вашему новому изображению, <img src="path_to_image.jpg"/>. Здесь стоит отметить, что элементы изображения состоят из одного тега, содержащего их атрибуты, а не из начального и конечного тегов, как многие другие элементы HTML.
Если вам интересно узнать больше о HTML, CSS и Javascript, чтобы вы могли вывести персонализацию своего веб-сайта на новый уровень, я настоятельно рекомендую Гарвардский CS50W: Веб-программирование с помощью Python и JavaScript . Это совершенно бесплатный курс по edX, первые несколько глав которого посвящены Git, HTML и CSS, а затем рассматриваются Javascript. Он дает отличное введение в навыки, которые нам нужны, чтобы действительно сделать веб-сайт нашим собственным.
Для дальнейшего вдохновения посетите мой веб-сайт emilegill743.github.io и соответствующий репозиторий GitHub, ссылка на который приведена ниже.
Спасибо за внимание!
Если вам понравился этот пост, не стесняйтесь проверить некоторые из моих других статей:
