Применить тему Docsy

Узнайте, как применять тему Hugo «Docsy».

Цель

Ниже приведена конфигурационная диаграмма (пример) среды блогов с Hugo + GitLab Pages. Цель здесь — изменить тело темы в репозитории тем/контента GitLab Hugo на Docsy, заменить настройки темы/контента на образец Docsy, изменить настройки CI/CD для Docsy и собрать/опубликовать образец сайта.

Внимание : После этой процедуры настройки темы/контент будут заменены образцом. Если вы хотите сохранить существующие активы, пожалуйста, сохраните их перед продолжением.

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

Это объяснение предполагает, что сервер с Hugo + GitLab Pages, Dev клиент с VSCode реализованы, и что есть серверная среда, построенная в GitLab с шаблоном Pages/Hugo, и клиентская среда разработки с Visual Studio Code.

Метод применения

Изменение тела темы в Visual Studio Code

1. Выполните следующее в терминале Visual Studio Code, чтобы создать символическую ссылку на репозиторий docsy под /themes в активах репозитория Hugo, управляемых Visual Studio Code, с именем docsy.

   • Ссылка : Использование темы Docsy в качестве подмодуля — Docsy.

   > cd (The root directory of the Git project. themes exists in current)
   > git submodule add https://github.com/google/docsy.git themes/docsy
   

Дополнение
: Здесь вы только добавляете саму тему в окружение. Последующие изменения в конфигурации темы заставят Hugo использовать добавленное тело темы.

Изменение настроек/содержания темы в примере в Visual Studio Code

1. Откройте проект примера Docsy на GitHub в браузере и нажмите Code → Download ZIP.
   • Последние файлы проекта-образца загружаются в формате zip.
   • Ссылка : Базовая конфигурация сайта — Docsy.

2. Распакуйте скачанный zip и замените его файлами в активах репозитория Hugo, управляемых Visual Studio Code.

   docsy-example-master
   ├ assets            → /(same name directory)
   ├ content           → /(same name directory)
   ├ lanouts           → /(same name directory)
   ├ ...               → /(same name directory)
   ├ config.toml       → /(same name file)
   └ ...               → /(same name file)
   

3. Измените следующее в /config.toml в Visual Studio Code.

   • baseurl : Изменить на корневой URL-адрес сайта-образца.
     • Ссылка : Примеры сайтов проектов — примеры GitLab).
   • title : изменить на любое название, которое вам нравится
   • languages.*.title : изменить на любое название, которое вам нравится
     • Ссылка : Поддержка нескольких языков — Docsy.

Изменение настроек CI/CD в Visual Studio Code для соответствия теме

1. Установите image в /.gitlab-ci.yml на hugo_extended и установите npm, git и PostCSS перед командой hugo с помощью pages:script.

   • Ссылки : Установить Hugo — Docsy, Установить PostCSS — Docsy.

   ...
   image: registry.gitlab.com/pages/hugo/hugo_extended:latest
   ...
   pages:
     script:
     - apk add --update npm git
     - npm install -D autoprefixer
     - npm install -D postcss-cli
     - hugo
   ...
   

Выгрузка изменений, сделанных в Visual Studio Code, на GitLab

Загрузите активы репозитория Hugo, измененные в Visual Studio Code, на GitLab — будет реализован Dev-клиент с VSCode.

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

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