Создавать домашний сайт с заметками для себя и других на основе CMS wordpress и аналогичных довольно расточительно и понижает безопасность сервера. Главные плюсы это скорость загрузки страниц и безопасность. Поэтому буду использовать под эти цели один из лучших вариантов для создания статического сайта при помощи Hugo.
Установка Hugo в Windows 10
Скачать последнюю расширенную версию hugo_extended_0.110.0_windows-amd64.zip версия может отличаться в данном примере версия 0.110.0
Распаковать в папку с проектом сайта, например c:\_hugo\bin
Добавить в переменную PATH путь к Hugo открыть Мой компьютер в адресной строке набрать:
Панель управления\Система и безопасность\Система
Дополнительные параметры системы
Переменные среды
Выбрать строку с переменной Path нажать кнопку Изменить в открывшемся окне нажать Создать и в новую строчку вставить путь до исполняемого файла hugo, в примере это c:\_hugo\bin во всех трех окошках нажимать кнопку ОК
Теперь можно вызывать hugo из любого каталога. Для проверки запустить cmd или PowerShell набрать
hugo version
В результате будет отображена версия hugo
Про самостоятельную сборку читать официальный сайт.
Установка Git в Windows 10
Так же для удобства создания сайтов и не только, установить git
Перейти по ссылке и скачать понравившуюся версию https://git-scm.com/download/win
Во время установки все щелкать по умолчанию. Единственный момент это выбор редактора, нужно выбрать Visual Studio Code , поскольку пользоваться буду им.
Быстрое создание сайта при помощи Hugo в Windows 10
Теперь можно протестировать, создать тестовый сайт. Половина работы будет делаться из командной строки, так быстрее. Запустить PowerShell . Поменять директорию на ту где будут проекты с сайтами . Создать папку sites перейти в нее.
cd c:\_hugo
mkdir sites
cd 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 jnrhsnm открыть файл конфигурации в текстовом редакторе c:\_hugo\sites\test\config.toml в конце добавить строчку :
theme = 'PaperMod'
Из инструкции по теме следует создать файл конфигурации в формате yml , т.к. считается он проще для восприятия и понимания. Создадим такой файл в текстовом редакторе с содержимым:
baseURL: http://example.org/
languageCode: en-us
title: My New Hugo Site
theme: PaperMod
Сохранить файл с именем config.yml
Но проще изначально создать сайт командой:
hugo new site test -f yml
Запуск сервера Hugo
Запускаем локальный сервер:
hugo server
Если нужно отобразить все созданные страницы, даже те которые помечены, как неопубликованные или запланированные к публикации нужно добавить ключ -D
hugo server -D
Наблюдаем следующую картинку:
Start building sites …
hugo v0.110.0-e32a493b7826d02763c3b79623952e625402b168+extended windows/amd64 BuildDate=2023-01-17T12:16:09Z VendorInfo=gohugoio
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 0
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Built in 38 ms
Watching for changes in С:\_hugo\sites\test\{archetypes,assets,content,data,layouts,static,themes}
Watching for config changes in E:\_hugo\sites\test\config.yml
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 в Windows 10
Для более удобной работы по созданию сайта нужно установить рабочую среду Visual Studio Code.
Идем по ссылке и качаем установочный файл для виндовс https://code.visualstudio.com/ . Запускаем скачанный файл. После установки, если нужно меняем язык интерфейса на русский. Нажать сочетание клавиш Ctrl+Shift+X откроется окошко с магазином расширений в строке поиска начать набирать russian увидим найденное расширение Russian Language Pack for Visual Studio выбираем его, жмем install после установки внизу справа появится окошко с кнопкой Change Language and Restart нажать. После перезапуска программы наступит счастье.
Так же включим облачные изменения, если есть аккаунт на гитхабе. Слева внизу над шестеренкой значок человека в кружке при наведении высвечивается надпись Учетные записи жмем и выбираем Включить облачные изменения наверху выбрать Вход с помощью GitHub если в браузере выполнен вход в аккаунт гитхаба, то вход и программы произойдет автоматически, если нет то откроется окно браузера с запросом о входе в учетку гитхаба, выполнить.
Далее по ходу создания сайта будем отрабатывать навыки работы в Visual Studio Code. И более подробно разбираться с механизмами создания сайта при помощи Hugo.
Комментарии