kaeland.github.io

Начните создавать свой личный сайт

Продемонстрируйте свои навыки разработки программного обеспечения

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

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

Все возможно, используя комбинацию Jekyll (для создания вашего веб -сайта), Github Pages (для размещения вашего веб -сайта) и API GitHub (для автоматической заполнения вашего сайта контентом).

Установка

Вилка github/personal-website Repo

Вы будете делать свою собственную копию репозитория «Персонального сайта», чтобы у вас был собственный проект для настройки. «Вилка» - это копия репозитория. Так что выберите «Вилка» на вершине репозитория github/personal-website .

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

Установите в местной среде разработки

Если вы хотите управлять своим веб -сайтом в местной среде веб -разработки, вы будете использовать Ruby.

Как только вы нашли дом для своего раздвоенного хранилища, клонируйте его .

Установите Jekyll

Jekyll - это рубиновый драгоценный камень, который может быть установлен в большинстве систем.

1. Установите полную среду разработки Ruby
2. Установите драгоценные камни Jekyll и Bundler

 gem install jekyll bundler

3. Переодеться в свой новый каталог

 cd personal-website

4. Установите пропущенные драгоценные камни

 bundle install

5. Создайте сайт и сделайте его доступным на локальном сервере

 bundle exec jekyll serve

6. Теперь просмотрите http: // localhost: 4000

Публиковать

Когда вы размещаете код вашего личного веб -сайта на GitHub, вы получаете поддержку бесплатного хостинга через страницы GitHub.

Самым быстрым подходом является переименование вашего репозитория username.github.io , где username является вашим именем пользователя Github (или названием организации). Затем, в следующий раз, когда вы вносите изменения в master -филиал вашего репозитория, они будут доступны в Интернете по адресу username.github.io .

Если вы хотите использовать пользовательский домен , вы захотите добавить его в настройки вашего хранилища «Пользовательский домен» на github.com. И затем зарегистрируйте и/или настройте свой домен с помощью поставщика DNS.

Настройка

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

Быстрые изменения конфигурации

Большинство настроек могут быть сделаны в считанные секунды путем пересмотра файла вашего репозитория _config.yml . Просто не забудьте перезапустить свой локальный сервер каждый раз, когда вы сохраняете новые изменения, чтобы ваш веб-сайт с двигателем Jekyll правильно перестроился:

1. Выключите свой сервер, введя команду клавиатуры Ctrl + C
2. Перезапустите свой сервер: jekyll serve

Макет

По умолчанию ваш веб-сайт будет отображаться в макете с двумя столбцами на устройствах с большим экраном, с вашей фотографией, именем и базовой информацией, отображаемой в «боковой панели» с левой выровнением. Но вы можете быстро переключиться на «сложенную» макет с одним столбцом, изменив линию в вашем файле _config.yml , который считывает layout: sidebar на layout: stacked .

Стиль

По умолчанию ваш сайт появляется с «легким» белым и серым фоном, с темным текстом. Но вы можете быстро переключиться на «темный» фон с белым текстом, изменив линию в вашем файле _config.yml , который читает style: light к style: dark .

Темы

Ваш веб-сайт поставляется с тремя темами (например, «веб-дизайн» и «Sass»), которые появляются в разделе под названием «Мои интересы». Они также хранятся в файле вашего репозитория _config.yml , где вы можете определить имя каждой темы и две другие дополнительные детали:

• web_url : веб -адрес, на который вы хотели бы, чтобы ваша тема была на ссылке (например, https://github.com/topics/sass ).
• image_url : веб -адрес (идеально квадратного) изображения, который вы хотели бы отобразить с вашей темой.

Добавление страниц

Чтобы добавить страницу на ваш сайт (например, подробное резюме):

1. Создайте новый файл .html или .md в корне вашего репозитория.
2. Дайте ему имя файла, которое вы хотите использовать в URL страницы (например, http://yoursite.dev/filename ).
3. В начале вашего файла включите следующий фронт:

 ---
layout: default
---

4. Сохранять.

Добавление сообщений в блоге

Чтобы добавить сообщение в блог на ваш сайт:

1. Создайте новый .md -файл в каталоге вашего репозитория /_posts/ .
2. Дайте ему имя файла, используя следующий формат:

 YEAR-MONTH-DAY-title.MARKUP

3. В начале вашего файла включите следующий фронт:

 ---
title: "The title of my blog post"
---

Ваш сайт поставляется с сообщением в блоге Placeholder, на который вы можете ссылаться. Примечательно, что его передняя материя объявляет published как false , так что оно не появится на вашем сайте.

Несмотря на то, что вы также можете определить layout в переднем веществе, ваш веб-сайт предварительно настроен, чтобы назначить post после всех сообщений в вашем /_posts/ каталоге. Так что вам не нужно заявлять об этом в своих постах, если вы не хотите.

Конвенции Джекилла для создания и управления по сообщениям в блоге очень гибки. Вы можете узнать больше в документации Джекилла для «сообщений».

Содержание и шаблоны

Чтобы дать вам звуковой основу для запуска вашего личного веб-сайта, ваш хранилище включает в себя несколько файлов «включить»-динамические файлы .html , которые повторно используются на вашем сайте. Все они хранятся в /_includes/ directory.

Есть обычные подозреваемые, такие как header.html и footer.html . Но есть еще несколько стоит указать:

• interests.html _config.yml
• masthead.html : коллекция вашего аватара, имени, биографии и других метаданных, которая отображается на всех ваших веб -страницах, чтобы помочь определить, о чем идет речь.
• post-card.html : компактная, суммированная презентация сообщения в блоге, повторно используемое для отображения списка ваших последних сообщений в блоге.
• projects.html : заголовок и динамический список «моих проектов», который заполняется списком ваших новейших репозиториев GitHub.
• repo-card.html : компактное, суммированное представление репозитория, повторно используемое для отображения списка ваших репозитории GitHub.
• thoughts.html : заголовок и динамичный список «моих мыслей», который заполняется списком ваших последних постов в блоге.
• topic-card.html : компактное, суммированное представление темы (определено в вашем _config.yml ), повторно используемое для отображения списка ваших интересов.

Макеты

Ваш репозиторий поставляется с тремя макетами:

• По умолчанию : не используется ни одной из встроенных страниц или постов, но полезны для любых новых страниц, которые вы создаете.
• Главная : используется вашей домашней страницей index.html для отображения списков ваших проектов, интересов и (необязательно) ваших сообщений в блоге.
• Сообщение : используется по умолчанию по сообщениям в вашем /_posts/ каталоге.

Конвенция Джекилла для определения макетов очень гибкая. Вы можете узнать больше о настройке ваших макетов в документах Jekyll "Mayouts".

Стили

Ваш веб-сайт предварительно настроен на использование очень гибкой структуры CSS под названием «Primer», наряду с любыми пользовательскими стилями, которые вы пишете в своем /assets/styles.scss Sass Sete. В настоящее время это ссылается в вашем файле styles.scss , используя импорт CSS в правительстве:

 @import url('https://unpkg.com/primer/build/build.css');

Вы, конечно, добро пожаловать, чтобы удалить его или заменить другой рамкой. Просто имейте в виду, что HTML, который ваш веб-сайт был предварительно упакован со ссылками с несколькими классами утилиты «Утилиты», чтобы определить такие вещи, как ширина колонны, края и фоновые цвета.

Лицензия

Тема доступна как открытый исходный код в условиях лицензии MIT.