Как создать сайт-портфолио и разместить его на страницах GitHub?
В этой статье вы узнаете
- Как создать собственный сайт-портфолио?
- Как разместить свой сайт на страницах GitHub БЕСПЛАТНО ?
Вы можете продемонстрировать это портфолио в своем резюме. Итак, приступим !!
Загрузка шаблона веб-сайта портфолио
Мы поищем в Интернете отличные адаптивные шаблоны дизайна портфолио, которые предоставляются бесплатно. На сайте HTML5up (https://html5up.net/) есть много хороших вариантов для личного портфолио с множеством профессиональных переходов и материалов CSS / Bootstrap.
Некоторые варианты правильного выбора шаблона перечислены ниже:
- https://html5up.net/story
- https://html5up.net/solid-state
- https://html5up.net/miniport
- https://html5up.net/dimension
Загрузите шаблон в виде ZIP-архива, нажав кнопку « Загрузить» в правом верхнем углу.
Настроить соответственно!
Теперь извлеките файлы из ZIP и внимательно посмотрите. Вы можете увидеть такие папки, как « изображения », « активы » и такие файлы, как « index.html », « license.txt » и « readme.txt ».
- Удалите файлы license.txt и readme.txt.
- Откройте файл index.html в редакторе кода, например VS Code или Sublime, а также в своем браузере.
- Начните вносить необходимые изменения в текст из редактора кода и отражайте изменения, обновив страницу в браузере.
Также вы можете разместить свои собственные изображения и фон, изменив изображения в папке изображений, но не забудьте указать то же имя файла, что и у него.
Когда вы закончите и будете удовлетворены, вы можете изменить CSS и стиль. Что ж, это совершенно необязательно, если вы полный новичок.
Редактор VS Code для редактирования ваших файлов
Загрузка в репозиторий GitHub
Наконец, ваши файлы теперь необходимо поместить в новый репозиторий GitHub и разместить с помощью GitHub Pages . Чтобы разместить необходимые файлы вашего веб-сайта портфолио в GitHub, выполните следующие действия:
- Войдите в систему на https://github.com/ и нажмите « Новый» на левой панели справа от репозиториев.
Нажмите на новую опцию
- Назовите репозиторий your-username.github.io . (Например, если ваше имя пользователя chandrikadeb7, назовите репозиторий как chandrikadeb7.github.io ).
- Нажмите на « Создать репозиторий» .
Введите необходимые данные и нажмите «Создать репозиторий».
Вы можете загрузить все необходимые файлы со своего компьютера двумя способами:
1. Использование функции перетаскивания / загрузки веб-сайта GitHub в браузере
- Нажмите на опцию «Загрузить файлы» из вашего вновь созданного репозитория.
- Выберите вариант « Выбрать файлы», чтобы загрузить их с локального компьютера.
- Или просто перетащите папки на этом экране.
Загрузите необходимые файлы и нажмите «Зафиксировать изменения».
2. Использование контроля версий Git
- Вы можете отправить файлы в свой репозиторий с помощью системы контроля версий Git .
- См. Это руководство по установке Git https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
- Измените текущий рабочий каталог на свой локальный проект.
- Инициализируйте локальный каталог как репозиторий Git.
$ git init
- Добавьте файлы в ваш новый локальный репозиторий. Это подготовит их к первой фиксации.
$ git add .
# Adds the files in the local repository and stages them for commit. To unstage a file, use ‘git reset HEAD YOUR-FILE’.
- Зафиксируйте файлы, которые вы разместили в своем локальном репозитории.
$ git commit -m “First commit”
# Commits the tracked changes and prepares them to be pushed to a remote repository. To remove this commit and modify the file, use ‘git reset –soft HEAD~1’ and commit and add the file again.
- Вверху страницы быстрой настройки репозитория GitHub щелкните значок буфера обмена, чтобы скопировать URL-адрес удаленного репозитория.
Щелкните значок буфера обмена, чтобы скопировать URL-адрес
- В Терминале добавьте URL-адрес удаленного репозитория, куда будет помещен ваш локальный репозиторий.
$ git remote add origin URL удаленного репозитория # Устанавливает новый пульт $ git удаленный -v # Проверяет новый удаленный URL
- Отправьте изменения в локальном репозитории на GitHub.
$ git push -u мастер происхождения # Отправляет изменения из вашего локального репозитория в удаленный репозиторий, который вы указали как источник
Хостинг с использованием страниц GitHub
- Теперь перейдите на вкладку «Настройки », которая находится прямо над ним, и прокрутите вниз, чтобы найти параметр « Страницы GitHub».
- Теперь выберите master-branch в раскрывающемся списке Source, и появится уведомление о том, что вы готовы опубликовать свой сайт через минуту или две.
- Нажмите на эту гиперссылку с уведомлением, и готово ... Ваше портфолио размещено на страницах GitHub бесплатно!
Веб-сайт вашего личного портфолио опубликован по адресу https: // <your-github-username> .github.io
Вы можете посмотреть мою здесь - https://chandrikadeb7.github.io/