Как БЕСПЛАТНО создать простой веб-сайт-портфолио
Пошаговое руководство с нуля менее чем за 10 минут
В этой статье вы узнаете, как бесплатно создать веб-сайт-портфолио, чтобы продемонстрировать свои проекты, будь то наука о данных, разработка программного обеспечения или веб-разработка. Некоторые из преимуществ веб-сайта-портфолио помогают потенциальным работодателям увидеть широту и глубину вашего опыта, что может быть особенно полезно, если у вас нетрадиционный опыт (например, вы являетесь профессионалом-самоучкой и т. Д.).
Веб-сайт портфолио, который мы будем создавать сегодня, будет бесплатно размещен на страницах GitHub. Я предполагаю, что у вас минимальный опыт работы с HTML или его отсутствие. Но если у вас есть предыдущий опыт, это руководство займет у вас еще меньше времени.
Нам есть о чем рассказать, и давайте без лишних слов приступим!
Также посмотрите сопроводительное видео на YouTube с тем же названием (Как создать простой веб-сайт-портфолио БЕСПЛАТНО), которое вы можете посмотреть вместе с этим сообщением в блоге.
1. Зарегистрируйте учетную запись GitHub.
Поскольку мы собираемся разместить веб-сайт на страницах GitHub, предварительным условием является наличие учетной записи GitHub. Так что, если у вас его еще нет, подпишитесь на него.
2. Создание нового репозитория
Итак, сейчас мы собираемся создать новый репозиторий, который будет служить домом для вашего нового веб-сайта портфолио. Содержимое веб-сайта (то есть текст, изображения и любые другие файлы, которые вы хотели бы отображать на своем веб-сайте) будет содержаться в этом репозитории. Вместо веб-страницы HTML текст, который будет отображаться на вашем веб-сайте, будет сохранен в файле Markdown (.md файл), с которым мы будем работать в следующие несколько минут.
Войдите в свою учетную запись GitHub и запустите новый репозиторий, нажав кнопку New repository в раскрывающемся меню, которое появляется после нажатия кнопки +, расположенной в дальнем правом углу верхней панели навигации, как показано на скриншот ниже.
На этой странице введите имя вашего нового репозитория. В этом примере мы собираемся ввести Portfolio, но вы можете использовать любое другое имя, например свое полное имя (но обязательно используйте подчеркивание или тире вместо пустого места, такого как John_Doe или John-Doe).
Чтобы сделать веб-сайт общедоступным, мы отмечаем опцию Public.
Здесь следует отметить, что мы установили флажок, чтобы файл README.md создавался автоматически вместе с созданием репозитория. Именно в этот файл будет помещено содержимое сайта.
Наконец, нажмите кнопку Create repository, чтобы фактически создать репозиторий.
На скриншоте ниже будет показана главная страница вашего нового репозитория. Обратите внимание, что содержимое README.md пусто.
2. Настройка страниц GitHub для вашего репозитория.
По умолчанию репозиторий еще не является веб-сайтом, поэтому нам придется активировать для него страницы GitHub. Для этого нажмите кнопку Settings, расположенную в дальнем правом углу вкладки (как показано 1. желтым прямоугольником на изображении ниже).
Затем вы хотите нажать кнопку Pages, расположенную на левой панели (как показано 2. красным квадратом на изображении ниже), что перезагрузит страницу.
Чтобы активировать страницы GitHub, нажмите кнопку раскрывающегося списка None под заголовком Source в разделе GitHub Pages (как показано зеленым полем 3.1 на изображении ниже), в котором будет открыта ветка main, и как только это произойдет, щелкните по нему (как показано в зеленой рамке 3.2 на изображении ниже).
Теперь, когда страницы GitHub активированы, вы должны увидеть URL-адрес своего веб-сайта портфолио, как показано желтым выделенным полем на изображении ниже.
В этом примере создаваемый URL-адрес доступен по адресу https://dataprofessor.github.io/Portfolio, где dataprofessor - мое имя пользователя GitHub, а Portfolio - имя репозитория. Запишите этот URL-адрес и держите его под рукой, так как мы перейдем к нему после применения темы веб-сайта.
Также обратите внимание, что Branch теперь установлен на main, как показано в красном поле на изображении ниже.
Теперь выберем тему для нашего сайта. Нажмите кнопку Choose a theme под заголовком Theme Chooser.
Как вы увидите на скриншоте ниже, вы можете выбрать из нескольких тем. В этом примере мы выберем тему Cayman и нажмем кнопку Select theme.
Чтобы начать работу с макетом вашего нового веб-сайта, вы увидите, что файл README.md теперь заполнен образцом текста.
Просто прокрутите страницу вниз и нажмите кнопку Commmit changes, чтобы продолжить.
Теперь перейдите на наш веб-сайт, вставив URL-адрес, который мы приняли к сведению ранее, в этом примере это https://dataprofessor.github.io/Portfolio.
На снимке экрана ниже показан наш веб-сайт с примерами содержимого, которое автоматически заполняет файл README.md при выборе темы.
3. Добавление нашей информации на веб-сайт
Теперь перейдем к добавлению информации о нашем собственном профиле на сайт.
Как я уже упоминал ранее, содержимое веб-сайта содержится в файле README.md, который мы также видели выше, где у нас есть примеры содержимого при выборе темы Cayman.
В поле кода ниже я предоставил вам информацию о гипотетическом профиле, которую вы можете использовать в качестве шаблона.
Давайте скопируем и вставим приведенное ниже содержимое в README.md файл. Чтобы сохранить файл, прокрутите вниз и нажмите кнопку Commit changes.
Содержимое поля кода выше написано в Markdown, который является темой для другого сообщения в блоге. Я настоятельно рекомендую Шпаргалку по Markdown, на которую вы можете ссылаться при создании своего веб-сайта, от adam-p.
Теперь снова обновите веб-сайт портфолио, чтобы увидеть новую добавленную информацию профиля.
4. Добавление изображений на веб-сайт
Так как картинка лучше тысячи слов, давайте добавим на сайт несколько изображений. В этом примере мы будем использовать фотографии из Unsplash, который предоставляет большую коллекцию стоковых фотографий, которые вы можете использовать бесплатно.
4.1. Поиск изображения для проекта 1
Давайте поищем изображения, которые можно использовать для веб-сайта-портфолио нашего гипотетического начинающего аналитика данных Джона Доу. Как видно на веб-сайте, Проект 1 Джона Доу относится к криптовалюте. Таким образом, мы собираемся найти несколько подходящих изображений.
Ниже приведены результаты поиска изображений о криптовалюте.
Правое верхнее изображение хорошо подходит для Проекта 1, так что давайте воспользуемся им. Так что вы можете пойти дальше и щелкнуть по нему. Появляется всплывающее окно, как показано ниже, затем вы нажимаете стрелку вниз на кнопке Download free, чтобы вызвать раскрывающееся меню. Здесь мы выберем разрешение Small (640x427).
После загрузки изображения внизу появляется всплывающее окно с текстом атрибуции и ссылкой. Вы можете просто щелкнуть значок Copy to clipboard, показанный на изображении ниже. Мы вставим это в файл README.md, чтобы такая информация была включена на веб-сайт портфолио.
4.2. Поиск изображения для проекта 2
Поскольку Проект 2 (см. Поле кода, содержащее содержимое файла README.md) Джона Доу посвящен созданию бота для торговли криптовалютой, мы собираемся использовать следующее изображение.
4.3. Загрузка изображений в репозиторий GitHub
Как только изображения будут загружены на ваш компьютер, давайте теперь загрузим их в наш репозиторий GitHub.
Для этого нажмите кнопку Add file, которая откроет раскрывающийся список. Щелкните ссылку Upload files.
Файлы могут быть загружены двумя способами: (1) перетащить файлы прямо в окно загрузки или (2) щелкнуть ссылку choose your files внутри окна загрузки. После этого нажмите кнопку Commit changes внизу страницы.
4.4. Добавление атрибуции к изображению на веб-сайте
При использовании бесплатного изображения от Unsplash рекомендуется также цитировать изображение. Для вашего удобства при загрузке изображений из Unsplash появляется всплывающее окно, которое дает вам возможность получить текст атрибуции и ссылку (как показано на последнем изображении в разделе 4.1), которые вы хотите скопировать и вставить в файл README.md. .
Следующие два блока кода атрибуции выглядят так для проекта 1 и проекта 2 соответственно:
Чтобы фактически добавить изображение на веб-сайт с помощью синтаксиса Markdown, мы будем использовать следующую строку кодов для Project 1 и Project 2 соответственно:
Давайте добавим указанные выше 4 блока кода под заголовками Проект 1 и Проект 2 в файле README.md, и мы получим следующий код:
5. Веб-сайт завершенного портфолио
Поздравляю! Вы завершили создание веб-сайта портфолио менее чем за 10 минут!
Пример веб-сайта портфолио: https://dataprofessor.github.io/Portfolio/
Теперь вы можете поделиться своим веб-сайтом с портфолио со всем миром (например, включить URL-адрес в свои профили в LinkedIn, Twitter, визитку и т. Д.)! Не забывайте поддерживать и периодически обновлять веб-сайт по мере роста вашего списка проектов.
Не стесняйтесь делиться со мной ссылками на сайты вашего портфолио.
Подпишитесь на мой список рассылки, чтобы получать мои лучшие обновления (а иногда и бесплатные) в Data Science!
Обо мне
Я работаю полный рабочий день адъюнкт-профессором биоинформатики и руководителем отдела интеллектуального анализа данных и биомедицинской информатики в исследовательском университете в Таиланде. В нерабочее время я ютубер (он же профессор данных), снимаю онлайн-видео о науке о данных. Во всех обучающих видео, которые я делаю, я также размещаю записные книжки Jupyter на GitHub (страница Data Professor GitHub).
Свяжитесь со мной в социальной сети
✅ YouTube: http://youtube.com/dataprofessor/
✅ Веб-сайт: http://dataprofessor.org/ (в разработке)
✅ LinkedIn: https: // www. linkedin.com/company/dataprofessor/
✅ Twitter: https://twitter.com/thedataprof
✅ FaceBook: http://facebook.com/dataprofessor/
✅ GitHub: https://github.com/dataprofessor/
✅ Instagram: https://www.instagram.com/data.professor/
