Главная » Ответы

Настройка клиента разработки GitLab Pages с помощью Visual Studio Code

На чтение 3 мин. Просмотров 52 Опубликовано

Узнайте, как настроить клиент разработки сервера блогов с Hugo + GitLab Pages с помощью Visual Studio Code. Это бесплатно.

Содержание
  1. Цель
  2. Предположения
  3. Процедура
  4. Установите Git на свой компьютер
  5. Установите Visual Studio Code на свой компьютер
  6. Загрузите активы репозитория Hugo от GitLab в Visual Studio Code
  7. Изменение активов репозитория Hugo в Visual Studio Code
  8. Загрузите активы репозитория Hugo, измененные в Visual Studio Code, на GitLab
  9. Проверьте результаты сборки/публикации, выполненные автоматически в GitLab

Цель

Ниже приведена схема конфигурации (пример) блоговой среды с Hugo + GitLab Pages. Цель состоит в том, чтобы создать среду Visual Studio Code на компьютере с Windows, которая модифицирует активы репозитория GitLab Hugo, изменить образец сайта и собрать/опубликовать его.

Предположения

Сервер с Hugo + GitLab Pages и предполагает, что у вас есть серверная среда, построенная с помощью шаблона Pages/Hugo в GitLab.

Процедура

Установите Git на свой компьютер

  1. Установите Git на свой компьютер 1. Установки по умолчанию, кроме следующих.
    • Выберите Visual Studio Code для Выбора редактора по умолчанию, используемого Git.
    • Выберите Использовать внешний OpenSSH для Выбора исполняемого файла SSH (я решил, что могу использовать тот, который поставляется с Windows).

  2. В командной строке выполните следующее

    > git config --global user.name "(name of user for local Git environment)"
> git config --global user.email "(email address of user for local Git environment)"

Установите Visual Studio Code на свой компьютер

Установите Visual Studio Code на свой компьютер.

Загрузите активы репозитория Hugo от GitLab в Visual Studio Code

  1. нажмите на значок Source Control на левой панели Visual Studio Code.
  2. Нажмите кнопку Clone Repository.
  3. Укажите Repository URL или... Введите URL репозитория проекта Hugo в GitLab в поле input area`, и нажмите клавишу Enter. Найти URL репозитория можно следующим образом.
    1. Войдите в GitLab через браузер и откройте экран Repository-Files проекта Hugo.
    2. нажмите кнопку Clone.
  4. Вам будет предложено ввести имя пользователя/пароль для входа в GitLab, введите их и нажмите Enter.
  5. Вас спросят, куда вы хотите загрузить активы, введите его и нажмите Enter.
    • В указанном каталоге будет создан каталог проекта, и файлы будут загружены в этот каталог.
  6. На вопрос, хотите ли вы открыть загруженные активы, выберите Открыть.
  7. На вопрос, доверяете ли вы этим активам, выберите Доверять.
    • Загруженные активы отображаются в левом дереве.

Изменение активов репозитория Hugo в Visual Studio Code

Отредактируйте любой файл в Visual Studio Code.

Загрузите активы репозитория Hugo, измененные в Visual Studio Code, на GitLab

  1. нажмите иконку Source Control на левой панели.
  2. нажмите кнопку +(stage all changes) под Changes в левой панели.
    • Измененный файл перемещается в Staged Changes.
  3. введите изменения в область ввода message в верхней части левой панели.
  4. нажмите кнопку ✓(зафиксировать) в Source Control в верхней части левой панели.
    • Измененный файл исчезнет из поэтапных изменений.
  5. в Source Control в верхней части левой панели ... (Представления и другие действия...) нажмите кнопку и выберите Push.
    • Активы будут загружены в GitLab, и сборка начнется автоматически.

Проверьте результаты сборки/публикации, выполненные автоматически в GitLab

  1. Войдите в GitLab с помощью браузера и откройте страницу проекта Hugo.
    • Вы должны увидеть изменения, которые вы ввели в Visual Studio Code, и значок ✓(Pipeline: passed) над списком файлов.
  2. Откройте сайт-образец в браузере.
    • Убедитесь, что название/подзаголовок сайта-образца изменены.

  1. Вы также можете использовать WSL (Ubuntu), но я не рекомендую его, если вы используете его только для разработки блога, потому что он съедает место и увеличивает время и усилия на подготовку и управление. 

Оцените статью
devanswers.ru
Добавить комментарий