https://habr.com/ru/company/otus/blog/445750/

• Блог компании OTUS. Онлайн-образование
• GitHub
• JavaScript
• Программирование

Всем привет, уже сегодня пройдет первое занятие в новом потоке курса «Разработчик JavaScript», и это отличный повод для новой публикации. Поехали.

github.dev это новый проект от GitHub, расположенный на домене высокого уровня .dev (https://domains.google/tld/dev/). Вы можете сделать форк этого проекта, чтобы иметь возможность настроить под себя и опубликовать персональный сайт, который будет показывать данные вашего профиля, активность в проектах, используя GitHub API, GitHub Pages и Jekyll.

Например, это моя страница: dzello.github.io.
Лично мне нравится этот проект, так как он дает разработчикам альтернативный путь для демонстрации их навыков программирования и интересов, помимо их страницы профиля GitHub, которую некоторые разработчики широко обсуждают.



Если вы знаете, как сделать форк репозитория и умеете работать с командной строкой, я покажу вам как получить свой экземпляр github.dev и запустить его за 10 минут.



Начнем

Откройте в браузере репозиторий github/personal-website

1. Кликните по кнопке Fork для создания копии репозитория в ваш личный аккаунт;
2. Перейдите в настройки скопированного репозитория и переименуйте его в {username}.github.io, заменяя {username} на имя вашего аккаунта в GitHub.

Репозиторий названный по шаблону {username}.github.io делает кое-что по-настоящему уникальное на GitHub. Контент этого репозитория (из папки _site) автоматически опубликуется через сервис GitHub Pages, и станет доступен как обычный веб-сайт по следующему адресу:

https://{username}.github.io/

Учитывая название проекта можно надеяться, что когда-нибудь вы получите поддомен github.dev, но к сожалению сейчас этого не происходит.
Однако перед тем, как сайт будет доступен, вам необходимо отправить хотя бы один коммит в репозиторий после его переименования. Мы сделаем это в следующих шагах.

Локальный запуск

Вам необходимо установить Ruby, если у вас его нет изначально.

Во-первых, скопируйте себе на компьютер ваш новый репозиторий.

git clone git@github.com:{username}/{username}.github.io.git

Далее переместитесь в папку с репозиторием с помощью команды cd и установите Jekyll со всеми зависимостями.

cd {username}.github.io
gem install jekyll bundler
bundle install

Теперь вы можете запустить свой сайт.

bundle exec jekyll serve

Перейдите по адресу http://localhost:4000 и вы сможете увидеть страницу с вашим именем, фотографией профиля и публичными репозиториями. Эти данные были добавлены благодаря плагину github-metadata Jekyll и GitHub pages gem.

Кастомизация

Кастомизация сама по себе не является необходимой(можете сразу переместиться в раздел Публикация), но я советую как минимум отредактировать информацию о ваших интересах, так страница будет лучше описывать вас.

Ваши интересы

По умолчанию github.dev считает что вам интересы темы CSS, Web Design и Sass. Но что, если вы предпочитаете PostCSS или не являетесь веб-разработчиком? Не беспокойтесь, список интересов достаточно просто изменить.



Откройте файл _config.yml при помощи вашего любимого текстового редактора и найдите секцию topics. Внесите изменения в разметку YAML для добавления, изменения или удаления интересов (topics). Вот так вы можете добавить awesome topic, например:

topics:
  - name: awesome
    web_url: https://github.com/topics/awesome
    image_url: https://raw.githubusercontent.com/github/explore/c304601f028774885ef27f72e6fe2d331729d8bc/topics/awesome/awesome.png

Перейдите на страницу GitHub topics, чтобы увидеть какие интересы вы можете добавлять.

Для применения изменений файла _config.yml вам необходимо перезапустить Jekyll. Изменения в остальных файлах, кстати, требуют просто перезагрузки страницы.

Отображение в первую очередь популярных проектов (опционально)

По умолчанию ваши репозитории отсортированы по алфавиту. Если же вы хотите показывать в первую очередь репозитории с наибольшим количеством звезд, вы можете отредактировать файл _includes/projects.html.

<div class="d-sm-flex flex-wrap gutter-condensed mb-4">
  {% assign sorted_repositories = site.github.public_repositories | sort: 'watchers_count' | reverse %}
  {% for repository in sorted_repositories limit:6 %}
    <div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
      {% include repo-card.html %}
    </div>
  {% endfor %}
</div>

Важными местами здесь являются sort: 'watchers_count' и reverse. Существуют также и другие выражения, которые вы можете отображать или сортировать список по ним. Подробную информацию можно найти в документации плагина github-metadata jekyll. Так же вы можете ограничить количество отображаемых репозиториев, как я сделал выше, используя конструкцию limit: 6.

Темная тема (опционально)

В файле _config.yml вы можете установить style: dark. Так страница будет меньше слепить ваших читателей, когда они будут просматривать ее в ночное время.

Секция кастомизации в README описывает множество других возможностей, которые можно использовать при создании страницы. Например, вы можете добавить блог.



Публикация

Каждый раз, когда вы отправляете новые коммиты на GitHub ваш сайт пересобирается и публикуется на https://{username}.github.io/. Для первого раза необходим хотя бы один git push.
Допустим, вы каким-то образом изменили свои интересы в файле _config.yml, теперь вам необходимо сделать следующее.

Добавить измененный файл и сделать коммит:

git add _config.yml
git commit -m 'Updated my interests'

И отправить этот коммит на GitHub:

git push

Подождите несколько минут и вы увидите ваш сайт по адресу https://{username}.github.io/.

Вы можете подтвердить эти изменения во вкладке environment GitHub репозитория.



Если сайт не появляется, попробуйте перейти непосредственно по адресу https://{username}.github.io/index.html. Если так сайт работает, возможно, возникла проблема с кэшированием, и вам просто нужно немного подождать, прежде чем вы сможете получить доступ к сайту без index.html в конце адреса.

Поздравляю!

Вы рады своему новому сайту? Расскажите в комментариях, что и как вы меняли, чтобы остальные могли последовать вашему примеру.

На этом мы закончим. Если вы хотите увидеть больше сайтов и проектов сообществ, которые расположены в домене .dev, загляните в awesome-dot-dev.

А тем, кто планирует заниматься у нас на курсе напоминаем о том, что вы еще можете успеть записаться!