Создавать домашний сайт с заметками для себя и других на основе CMS wordpress и аналогичных довольно расточительно и понижает безопасность сервера. Главные плюсы это скорость загрузки страниц и безопасность. Поэтому буду использовать под эти цели один из лучших вариантов для создания статического сайта при помощи Hugo.
Установка Hugo в Debian
Для установки расширенной версии Hugo
sudo apt install hugo
При помощи Snap - это решение предотвращает от установки недостающих пакетов при использовании более старой ОСи.
sudo apt install snapd
sudo snap install hugo
Так же можно скачать последнюю версию deb пакет с официальность сайта, выбрать версию extended для amd64. Запустить терминал в папке с файлом и набрать:
sudo dpkg -i hugo_extended_0.110.0_linux-amd64.deb
hugo_extended_0.110.0_linux-amd64.deb указан для примера версия может отличаться. В данном примере версия 0.110.0
Проверка установки и версии Hugo
hugo version
Про самостоятельную сборку читать официальный сайт.
Установка Git
Так же для удобства создания сайтов установить git
sudo apt install git-all
Так же можно собрать самому, если есть желание обладать самой свежей версией, хотя это не факт.
Возможно будут ошибки, тогда выполнить следующую команду, если все гладко, то ничего делать больше не надо:
sudo apt -f install git-all
Быстрое создание сайта при помощи Hugo в Debian
Теперь можно протестировать, создать тестовый сайт. Половина работы будет делаться из командной строки, так быстрее. Запустить Терминал . Создать каталог для проекта _hugo . Создать каталог sites перейти туда.
mkdir _hugocd
mkdir _hugocd/sites
cd _hugocd/sites
Сделать сайт с помощью Hugo
Тестовый сайт при помощи Hugo.
hugo new site test
В каталоге sites будет создана директория test в которой автоматически созданы все файлы и каталоги для начала работы по созданию сайта при помощи Hugo
Перейти в каталог test и сделать инициализацию пустого репозитория git. Будет создана скрытая директория .git
cd test
git init
Назначения директорий сайта Hugo
Краткое описание назначения каталогов созданных Hugo
└───test
│ config.toml
│
├───archetypes
│ default.md
│
├───assets
├───content
├───data
├───layouts
├───public
├───static
└───themes
Чтобы вывести дерево каталогов используется команда tree
- config.toml : Конфигурационный файл. Содержит настройки сайта
- archetypes : Для шаблонов, часто используемых элементов на страницах сайта.
- assets : Хранит все файлы, которые должны быть обработаны Hugo Pipes . Только файлы, чьи
.Permalinkили.RelPermalinkбудут опубликованы в public каталоге. - content : Контент одним словом. Тексты постов.
- data : Этот каталог используется для хранения файлов конфигурации, которые используются Hugo при создании веб-сайта. Файлы должны быть в формате YAML, JSON или TOML. В дополнение к файлам, которые размещаются в этой папке, можно создавать шаблоны данных , которые извлекаются из динамического содержимого.
- layouts : Хранит шаблоны в виде файлов .html, которые определяют, как просмотры вашего контента будут отображаться на статическом веб-сайте.
- public : Здесь будет находится готовый сайт, файлы этой папки необходимо размещать на своем хостинге. Любым удобным способом скопировать на сервер.
- static : Любые статические файла изображения, видео, css, html и т.д. и т.п.
- themes : Папка для хранения тем, которые скачиваем или клонируем. Их может быть множество, но использоваться может только одна.
Выбор темы сайта Hugo
Зайти на сайт https://themes.gohugo.io/ выбрать понравившуюся.
Добавить тему Hugo
Есть несколько вариантов установки темы для сайта: clone, submodule add, или просто скачать архив и распаковать в директорию themes. В любом случае у автора темы есть описание, как устанавливать и обновлять его тему на GitHub. Пока еще невкурил разницу между между клонированием и субмодулем.
Для примера установка темы PaperMod подробное описание установки, возможностей, настройки по ссылке https://github.com/adityatelange/hugo-PaperMod
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
Обновить тему Hugo
Обновление любой темы происходит по следующей схеме, перейти в папку с темой и выполнить команду обновления.
cd themes/PaperMod
git pull
Теперь нужно активировать тему, для этого нужно добавить файл конфигурации. Файл конфигурации по умолчанию уже есть, просто добавить имя темы. Если еще не установлен Visual Studio Code открыть файл конфигурации в текстовом редакторе:
nano _hugo/sites/test/config.toml
в конце добавить строчку :
theme = 'PaperMod'
Сохранить файл Cntr+O *Enter, закрыть Cntrl+X
Из инструкции по теме следует создать файл конфигурации в формате yml , т.к. считается он проще для восприятия и понимания. Создадим такой файл в текстовом редакторе :
nano _hugo/sites/test/config.yml
с содержимым :
baseURL: http://example.org/
languageCode: en-us
title: My New Hugo Site
theme: PaperMod
Сохранить файл Cntr+O *Enter, закрыть Cntrl+X
Но проще изначально создать сайт командой:
hugo new site test -f yml
Запуск сервера Hugo
Запускаем локальный сервер:
hugo server
Если нужно отобразить все созданные страницы, даже те которые помечены, как неопубликованные или запланированные к публикации нужно добавить ключ -D
hugo server -D
Наблюдаем следующую картинку:
Start building sites …
hugo v0.110.0-e32a493b7826d02763c3b79623952e625402b168+extended linux/amd64 BuildDate=2023-01-17T12:16:09Z VendorInfo=snap:0.110.0
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 0
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Built in 49 ms
Watching for changes in /home/user/_hugo/sites/test/{archetypes,assets,content,data,layouts,static,themes}
Watching for config changes in /home/user/_hugo/sites/test/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Заходим в браузер, в строке адреса вставляем или жмем по этой ссылке [http://localhost:1313/](http://localhost:1313/) и наблюдаем свой сайт.
Регистрация на GitHub
Лишним не будет завести аккаунт на гитхабе перед установкой визуал студио коде идем github.com жмем Sign Up следуем инструкциям по регистрации.
Установка Visual Studio Code в Debian
Для более удобной работы по созданию сайта нужно установить рабочую среду Visual Studio Code.
Установить ключи репозиторий:
curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo install -o root -g root -m 644 microsoft.gpg /usr/share/keyrings/microsoft-archive-keyring.gpg
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/usr/share/keyrings/microsoft-archive-keyring.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
Обновить кэш и установить пакет:
sudo apt install apt-transport-https
sudo apt update
sudo apt install code # or code-insiders
Возможно после выполнения sudo apt update будут такие предупреждения:
N: Пропускается получение настроенного файла «main/binary-armhf/Packages», так как репозиторий «https://packages.microsoft.com/repos/vscode stable InRelease» не поддерживает архитектуру «armhf»
N: Пропускается получение настроенного файла «main/binary-arm64/Packages», так как репозиторий «https://packages.microsoft.com/repos/vscode stable InRelease» не поддерживает архитектуру «arm64»
Решается редактированием файла sudo nano '/etc/apt/sources.list.d/vscode.list' все нежелательные архитектуры удалить между квадратных скобок. Было:
deb [arch=amd64 , armhf , arm64 signed-by=/usr/share/keyrings/microsoft-archive-keyring.gpg] https://packages.microsoft.com/repos/vscode stable main
Стало:
deb [arch=amd64 signed-by=/usr/share/keyrings/microsoft-archive-keyring.gpg] https://packages.microsoft.com/repos/vscode stable main
Запуск Visual Studio Code в Debian
Из терминала в нужном каталоге
code .
Русский язык в Visual Studio Code
После установки, если нужно меняем язык интерфейса на русский. Нажать сочетание клавиш Ctrl+Shift+X откроется окошко с магазином расширений в строке поиска начать набирать russian увидим найденное расширение Russian Language Pack for Visual Studio выбираем его, жмем install после установки внизу справа появится окошко с кнопкой Change Language and Restart нажать. После перезапуска программы наступит счастье.
Синхронизация Visual Studio Code с GitHub
Так же включим облачные изменения, если есть аккаунт на гитхабе. Слева внизу над шестеренкой значок человека в кружке при наведении высвечивается надпись Учетные записи жмем и выбираем Включить облачные изменения наверху выбрать Вход с помощью GitHub если в браузере выполнен вход в аккаунт гитхаба, то вход и программы произойдет автоматически, если нет то откроется окно браузера с запросом о входе в учетку гитхаба, выполнить.
Далее по ходу создания сайта будем отрабатывать навыки работы в Visual Studio Code. И более подробно разбираться с механизмами создания сайта при помощи Hugo.
Комментарии