Skip to content

Курсовая работа

"Создание персонального сайта с использованием MkDocs"

Описание

Создайте собственный персональный сайт или сайт проекта, используя технологию MkDocs и язык разметки Markdown.

Зачем это важно?

Используя данные технологии вы научитесь: 1. Создавать бесплатные инструменты документирования информации 2. Вы сможете сделать персональную страницу/визитку или страницу вашего проекта при необходимости 3. Вы научитесь структурировать информацию с использованием языка разметки markdown

(Сама технология не сложная и ее можно будет сделать за пару вечеров)

Ход работы

Этап 1: Подготовка и установка

  1. Установка MkDocs:
  2. Установить Python (если не установлен)
  3. Установить MkDocs: pip install mkdocs
  4. Установить тему Material: pip install mkdocs-material

  5. Проверить установку: mkdocs --version

  6. Создание нового проекта:

  7. Создать новую папку для проекта: mkdir my-personal-site
  8. Перейти в папку: cd my-personal-site
  9. Инициализировать MkDocs проект: mkdocs new .
  10. Изучить созданную структуру файлов

Этап 2: Настройка конфигурации

  1. Настройка mkdocs.yml:
  2. Открыть файл mkdocs.yml
  3. Настроить базовые параметры:
    • site_name - название вашего сайта
    • site_description - описание сайта
    • site_author - ваше имя
    • site_url - URL сайта (если планируете публикацию)

  4. Добавить тему Material: yaml theme: name: material features: - navigation.tabs - navigation.sections - navigation.top - search.highlight - search.share

  5. Настройка навигации:

  6. Создать структуру навигации в mkdocs.yml
  7. Добавить разделы: Главная, О себе, Проекты, Контакты

Этап 3: Создание контента

  1. Главная страница (index.md):
  2. Создать приветственную страницу
  3. Добавить краткое описание себя или проекта

  4. Использовать различные элементы Markdown:

    • Заголовки разных уровней
    • Списки (маркированные и нумерованные)
    • Ссылки
    • Изображения
    • Цитаты

  5. Страница "О себе" (about.md):

  6. Рассказать о себе, своих интересах, навыках
  7. Добавить информацию об образовании
  8. Включить хобби и увлечения

  9. Использовать таблицы для структурирования информации

  10. Страница "Проекты" (projects.md):

  11. Описать 2-3 проекта, над которыми работали
  12. Для каждого проекта указать:
    • Название проекта
    • Описание
    • Используемые технологии
    • Ссылки на репозитории (если есть)

  13. Использовать карточки или блоки для оформления

  14. Страница "Контакты" (contacts.md):

  15. Указать способы связи
  16. Добавить ссылки на социальные сети
  17. Включить контактную информацию
  18. Использовать иконки (если возможно)

Этап 4: Дополнительные возможности

  1. Добавление изображений:
  2. Создать папку docs/images/
  3. Добавить свое фото или логотип

  4. Использовать изображения в контенте

  5. Настройка поиска:

  6. Убедиться, что поиск включен в конфигурации

  7. Протестировать функциональность поиска

  8. Добавление дополнительных страниц:

  9. Создать страницу с резюме
  10. Добавить страницу с достижениями
  11. Включить блог или заметки (опционально)

Этап 5: Стилизация и кастомизация

  1. Настройка цветовой схемы:
  2. Выбрать цветовую палитру в mkdocs.yml

  3. Настроить primary и accent цвета

  4. Добавление логотипа:

  5. Создать или найти логотип

  6. Настроить отображение в шапке сайта

  7. Настройка футера:

  8. Добавить информацию в футер
  9. Включить ссылки на социальные сети

Этап 6: Тестирование и публикация

  1. Локальное тестирование:
  2. Запустить локальный сервер: mkdocs serve
  3. Проверить все страницы и ссылки

  4. Убедиться в корректности отображения

  5. Сборка сайта:

  6. Создать статические файлы: mkdocs build

  7. Проверить содержимое папки site/

  8. Публикация (опционально):

  9. Изучить возможности GitHub Pages
  10. Настроить автоматическую публикацию
  11. Или использовать другие платформы (Netlify, Vercel)

Требования к результату

  • Рабочий MkDocs сайт с минимум 4 страницами
  • Использование темы Material
  • Корректная навигация между страницами
  • Использование различных элементов Markdown
  • Настроенная конфигурация mkdocs.yml

Полезные ссылки

Примеры вдохновения