Как создать сайт-портфолио с пользовательским доменом с помощью страниц Github

На нынешнем рынке труда я считаю, что каждый новый разработчик должен иметь портфолио, демонстрирующее проекты, которые он создал. Как человек, не имеющий опыта, портфолио — это способ выделиться среди тысяч выпускников колледжей и буткампов. Я создал такое же портфолио, когда закончил буткемп, и получил работу через 3 месяца. Вы можете прочитать мою историю здесь.

Даже если рекрутер или менеджер по подбору персонала не будет читать все на вашем сайте, беглого просмотра будет достаточно, чтобы выделить вас среди всех остальных, у кого нет сайта-портфолио.

Если вы начинающий разработчик, нет причин, почему бы вам не иметь свой собственный сайт. Это бесплатно, просто и быстро настраивается с помощью страниц Github. Вы даже можете добавить собственный домен за 15 долларов в год без ежемесячной платы за хостинг, чтобы придать сайту дополнительный шик.

Вот пошаговое руководство о том, как создать свой собственный сайт-портфолио. Это руководство предназначено для начинающих или людей, не умеющих программировать, которые хотят создать свой собственный сайт-портфолио. Следовать этому руководству будет очень легко, и я бы посоветовал опытным разработчикам пропустить шаги, которые вы уже умеете делать. Вам не потребуется никаких навыков кодирования, чтобы следовать большей части этого руководства.

Настройка репозитория Github для вашей страницы

Сначала необходимо настроить репозиторий Github, куда мы будем помещать весь наш код.

Моя следующая статья — это полное руководство по лучшим практикам git и профессиональному использованию git. Если вы еще не видите ссылку, следите за блогом, и вы получите уведомление, когда я опубликую статью.

1. Нажмите кнопку «+» в правом верхнем углу страницы на Github. Там должен появиться выпадающий список, нажмите «New Repository».
2. Используйте выпадающий список «Выбрать владельца», чтобы выбрать, какая учетная запись будет владеть репозиторием.
3. Назовите свой репозиторий, используя эту схему именования<user>.github.io. Так как мое имя пользователя edmondthui, я назову свой репозиторий edmondthui.github.io.
4. Сделайте видимость вашего репозитория публичной, проверьте, хотите ли вы получить право «читать меня», а затем создайте свой репозиторий.

Настройка Git локально

Теперь, когда мы прошли скучную часть, мы можем открыть нашу IDE. Мне нравится использовать VS Code, но вы можете использовать любой редактор, который вам нравится.

1. Сначала нам нужно локально настроить наш репозиторий Github. В новой директории введите git init в терминале, чтобы начать отслеживать текущую директорию с помощью git.
2. Скопируйте ссылку quick setup с Github и запустите git remote add origin <your link here>.
3. Дополнительно — вы можете переименовать вашу ветку в «main», выполнив git branch -M main. GitHub использует «main» в качестве имени вашей основной ветки. Git по-прежнему по умолчанию называет вашу ветку «master».

Выбор шаблона для сайта портфолио

Мы будем использовать шаблон для создания нашего сайта. Я считаю, что большинство разработчиков должны использовать шаблон при создании своего личного портфолио.

Количество времени, которое требуется для создания красивого сайта, не стоит того, тем более что это руководство предназначено для разработчиков, которые пытаются пробиться в индустрию, чтобы получить свою первую техническую работу. Есть более важные вещи, такие как создание портфолио и совершенствование навыков прохождения собеседований.

Мы ищем шаблон, который обладает следующими качествами:

• Легко настраиваемая конфигурация
• привлекательный отзывчивый дизайн
• контактная форма

Вы можете просмотреть различные бесплатные темы здесь и выбрать то, что, по вашему мнению, лучше всего подойдет для вас. Я буду использовать эту тему под названием Profile для данного примера.

1. Скачайте тему и распакуйте файлы в папку, где вы создали свой git-репозиторий.
2. Вы должны увидеть файл под названием index.html. Это будет файл, который мы будем редактировать и настраивать с учетом вашей информации. Щелкните на нем, и вы сможете редактировать содержимое этого файла.
3. Вы можете просмотреть свой прогресс, открыв файл index.html в Хроме, дважды щелкнув по нему. Вам нужно будет время от времени проверять свои изменения, чтобы убедиться, что вы ничего не сломали.
4. Мы будем редактировать только информацию между открывающими и закрывающими HTML-тегами. Подавляющее большинство тегов должно быть открыто <tag> и закрыто </tag> с информацией об элементе, такой как заголовок или текст, расположенный между тегами. Вы можете изменить информацию между тегами на любой текст, который вы хотите отобразить. Замените всю информацию на шаблоне индексной страницы своей информацией. Убедитесь, что вы случайно не удалили какие-либо теги и не изменили структуру файла.
5. Обновите все ссылки на свои личные ссылки. Вы можете сделать это, заменив везде, где есть href="<Ваша ссылка здесь>".
6. Если вам нужно удалить какие-либо элементы, найдите их в вашем редакторе и удалите оба тега, содержащие всю информацию, которую вы хотите удалить.
7. Замените все изображения в папке image новыми файлами, сохранив имена файлов.

Когда вы будете довольны тем, как выглядит ваша страница, вы будете готовы к следующему шагу.

Отправка кода на Github

Следующим шагом будет размещение всего вашего кода на Github, чтобы мы могли использовать страницы Github для создания статического сайта, чтобы люди могли видеть ваш сайт.

1. Запустите git status, это должно показать все изменения, которые вы внесли. Подтвердите наличие изменений, прежде чем продолжить.
2. Выполните команду git add ., чтобы добавить все изменения из вашей директории для последующей фиксации. Вы можете повторно запустить git status, чтобы убедиться, что ваши файлы были добавлены.
3. Теперь, когда вы поставили свои изменения, вы должны зафиксировать их, выполнив команду git commit -m "<any message here>".
4. Отправьте код на Github, выполнив команду git push origin main, если вы изменили название ветки на main, или git push origin master, если вы не меняли название ветки.
5. Теперь вы должны увидеть код в своем репозитории Github!

Создание страницы Github для вашего репозитория

Последний шаг — это создание страницы Github. Ваш репозиторий должен быть публичным, если вы хотите иметь страницу Github с бесплатной учетной записью.

1. Перейдите к настройкам вашего репозитория на Github в правом верхнем углу страницы.
2. Нажмите страницы в левой части страницы настроек.
3. Выберите ветку main или master в качестве ветки для вашей страницы, затем нажмите сохранить.
4. Установите флажок для принудительного использования https.
5. Вот и все! Ваш сайт должен работать. Вот ссылка на демонстрационный сайт, который я создал в этом руководстве.

Дополнительно — Добавление пользовательского домена и карты сайта для SEO

Пользовательские домены — это отличный способ создать бренд вокруг себя. Это еще один фактор, который может выделить вас среди других разработчиков. Я делаю то же самое со своим блогом на https://www.blog.edmondhui.com/.

Использование пользовательского домена на странице Github

1. На той же странице в настройках репозитория есть поле под названием пользовательский домен. Если у вас есть собственный домен, вы можете ввести его туда. Вы можете купить домен на Godaddy или Google Domains примерно за $15. Затем нажмите сохранить.
2. Далее перейдите к настройкам вашего ПРОФИЛЯ и нажмите страницы.
3. Нажмите «добавить домен» и введите свой домен.
4. Теперь перейдите к управлению DNS там, где вы купили домен, и добавьте записи A, которые вы получили из Github. Вы можете скопировать и вставить их сюда:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Использование действий Github для автоматического создания карты сайта

Если вы хотите попытаться ранжировать свой сайт-портфолио, вам необходимо отправить карту сайта в Google для индексации вашего сайта. Для этого вам нужно будет использовать действие Github.

1. В своем репозитории нажмите «Действия».
2. Нажмите «Новый рабочий процесс», чтобы создать автоматизированное действие.
3. Затем нажмите «Настроить рабочий процесс самостоятельно
4. В редакторе рабочего процесса вставьте этот код.

name: Generate xml sitemap
on:
push:
 branches: [main]
jobs:
sitemap_job:
 runs-on: ubuntu-latest
 name: Generate a sitemap

 steps:
   - name: Checkout the repo
     uses: actions/checkout@v2
     with:
       fetch-depth: 0

   - name: Generate the sitemap
     id: sitemap
     uses: cicirello/generate-sitemap@v1.8.4
     with:
       base-url-path: https://edmondhui.com/
       include-pdf: false

   - name: Output stats
     run: |
       echo "sitemap-path = ${{ steps.sitemap.outputs.sitemap-path }}"
       echo "url-count = ${{ steps.sitemap.outputs.url-count }}"
       echo "excluded-count = ${{ steps.sitemap.outputs.excluded-count }}"

   - name: Create Pull Request
     uses: peter-evans/create-pull-request@v3.12.0
     with:
       title: "Automated sitemap update"
       body: >
         Automated changes. Sitemap updated by 
         the [generate-sitemap](https://github.com/cicirello/generate-sitemap) 
         GitHub action.
       commit-message: "Automated sitemap update."
       author: Edmond Hui <edmond.t.hui@gmail.com>
       committer: Edmond Hui <edmond.t.hui@gmail.com>
       branch: create-pull-request/sitemap
       delete-branch: true

Измените название ветки в коде, чтобы оно соответствовало вашей основной ветке. В настоящее время оно установлено на [main]. Вам также нужно будет изменить base-url-path, чтобы он указывал на ваш url.

1. Нажмите «Начать фиксацию» и «Создать новый файл», чтобы создать это действие Github. Это действие будет выполняться каждый раз, когда вы делаете push в «main» или «master».
2. Теперь вы можете перейти в Google Search Console и добавить карту сайта в свою собственность.

Заключение

Поздравляем вас с тем, что вы дошли до конца статьи! Надеюсь, у вас есть свой собственный сайт-портфолио, которым вы можете с гордостью поделиться.

Даже если вы не находитесь в поиске работы, иметь личный сайт-портфолио чрезвычайно полезно. Портфолио может помочь вам в профессиональном плане или создать свой бренд. Для предпринимателей это может открыть возможности и помочь найти деловых партнеров или инвесторов.

Надеюсь, вам понравилось это руководство для начинающих по созданию личного портфолио. Если вы начинающий разработчик, рекомендую прочитать мою статью о том, стоит ли вам присоединиться к буткемпу или заняться самообразованием.