1. Install gohugo EXTENDED!!!

https://github.com/gohugoio/hugo/releases

cd /tmp
wget https://github.com/gohugoio/hugo/releases/download/v0.88.1/hugo_extended_0.88.1_macOS-64bit.tar.gz
tar xvf hugo_extended_0.88.1_macOS-64bit.tar.gz

Смотрим где лежит hugo

which hugo

Проверяем старую версию

hugo version

Копируем на место старого

mv hugo /usr/local/bin/hugo

Проверяем снова версию

hugo version
  1. Configure Hugo

https://gohugo.io/getting-started/quick-start/

cd ~
hugo new site hugowiki
  1. Add theme

Страница темы

https://docs.vantage-design.com/ace/ https://github.com/vantagedesign/ace-documentation https://themes.gohugo.io/themes/ace-documentation/

cd hugowiki
git init
git submodule add https://github.com/vantagedesign/ace-documentation.git themes/ace-documentation

Add theme to config hugo

echo 'theme = "ace-documentation"' >> config.toml
  1. Create post
hugo new posts/my-first-post.md

vim content/posts/my-first-post.md

Заменить на draft: false

  1. View post
hugo server -D

Переходим в браузер http://localhost:1313/

  1. Ace просматривает структуру вашего файла и автоматически превращает ее в меню. Структура выглядит следующим образом:
/content
├── _index.md      
├── page-top.md
└── /level-one    
    ├── _index.md
    ├── page-1-one.md 
    ├── page-1-two.md
    └── /level-two
        ├── _index.md
        ├── page-2-one.md
        ├── page-2-two.md
        └── /level-three
            ...

Ваша “домашняя страница” для каждого уровня - это _index.md файл. Подстраницы (например, page-1-one.md) автоматически добавляются в меню как дочерние страницы.

  • Создадим домашнюю страницу
hugo new _index.md

vim content/_index.md

hugo server -D
  • Создадим вложенный пост для проверки вложенности категория в меню слева
hugo new devops/my-devops.md

vim content/devops/my-devops.md

hugo server -D

  • Также попробуем с дочерними страницами

    Сначала домашняя страница для категории cicd

hugo new cicd/_index.md

vim content/cicd/_index.md

Вставим в шапку домашней страницы категории шорткод дочерних страниц:

* ВНИМАНИЕ! УБЕРИТЕ НИЖНЕЕ ПОДЧЕРКИВАНИЕ
{_{_< childpages >_}_}
  • ПОСЛЕ как посмотрите - можете решать нужны ли это ссылки в шапке

ТЕПЕРЬ ПОПРОБУЕМ 2 ВАРИАНТ:

  • Создаем обычную страницу в категории cicd
hugo new cicd/jenkins.md

vim content/cicd/jenkins.md
  • А ТЕПЕРЬ создадим вложенную категорию GITLAB с домашней страницей и доп about_gitlab.md
hugo new cicd/gitlab/_index.md  

* Вспоминаем наш шорткод (убрать подчеркивание) {_{_< childpages >_}_}, вставлять или нет - решать вам :)

vim content/cicd/gitlab/_index.md
hugo new cicd/gitlab/about_gitlab.md

vim content/cicd/gitlab/about_gitlab.md

И запустим hugo

hugo server -D
  1. Кастомизация темы

  • Открыть dev tool и показать как менять все

  • Копируем файл к себе ace.min.css в static/style.css. Тем самым мы перезапишем стили

Код файла https://pastebin.linuxlife.page/wataquqala.pl

  • Добавим также в config.toml
    [params]
      custom_css = ["style.css","style.css"]
  1. Кастомизация на максималках

ЭКСПЕРИМЕНТИРУЕМ С ДОМАШНЕЙ СТРАНИЦЕЙ

vim content/_index.md
  • Отключаем Read More
vim config.toml

disableReadmoreNav = true
  • Отключаем сортировку по весу наших статей (будем делать по алфавиту)
vim config.toml
orderSectionsby = "title"
  1. Читаем интересные shortcodes темы https://docs.vantage-design.com/ace/shortcodes/
  • Используем childpages в шапке поста
{_{_< childpages >_}_}
  • Шорт код для кода с выбором языка
* ВНИМАНИЕ - убрать нижнее подчеркивание!
{_{_< code lang="LANG" >_}_} [your code] {_{_< /code >_}_}
  • Дабл код
* ВНИМАНИЕ - убрать нижнее подчеркивание!
{_{< doublecode lang="LANG" >_}_} [your code] {_{_< /doublecode >_}_}
  • Выделение абзаца
* ВНИМАНИЕ - убрать нижнее подчеркивание!
{_{_< lead >_}_} [content] {_{_< /lead >_}_}
  • Отделить информацию от основной части с помощью “панели”
* ВНИМАНИЕ - убрать нижнее подчеркивание!
{_{_< panel title="TITLE" style="STYLE" >_}_} [content] {_{_< /panel >_}_}
  • Стили primary, secondary, danger, warning, success, info
  • Таблица
* ВНИМАНИЕ - убрать нижнее подчеркивание!
* 
{_{_< table style="STYLE" >_}_}
| Tables        | are           | cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
{_{_< /table >_}_}

*Стили table-striped, table-dark, table-bordered, table-hover

  • Алерты
* ВНИМАНИЕ - убрать нижнее подчеркивание!
{_{< alert style="STYLE" >_}_} [content] {_{_< /alert >_}_}
  • Стили danger, warning, success, info
  • Кнопки
{_{_< button style="STYLE" link="https://yourwebsite.com" >_}_} [content] {_{_< /button >_}_}
  • Стили primary, secondary, danger, warning, success, info Если нужна кнопка без заполнения, то используем вместе со словом outline-primary