Как создать блог с Hugo

Hugo - это такой генератор статических сайтов. Статические сайты - это сайты состоящие из набора фиксированных страниц и не генерируются из шаблонов и запросов к базе данных при каждой загрузке. Это с одной стороны менее удобно потому что нет возможности например опубликовать то автоматически установив время публикации, а с другой - менее требовательно к ресурсам, и лучше с точки зрения компьютерной безопасности. Кроме того, wordpress.com со своими обновлениями интерфейса начинает немного раздражать. Хочется markdown, своего javascript и стилей. А еще он не подсвечивается синтаксис go. 🙂 Но эта статья публикуется на WordPress, какая ирония ... Потому что я еще не решил что публиковать там.

До этого, мой статический сайт на github генерировался самопишущим скриптом на python , Который превращал шаблоны Mako в HTML, позволял вставлять javascript вместе с зависимостями И так как я когда это придумывал не знал ни о каком node.js с npm (точнее знал, но не очень интересовался), то зависимости у меня описывались не в package.json, а в external_assets.py И собирал их webpack или gulp, или browserify или bower, а requirejs.py .

Юный я и мой велосипед.

Но это я удаляюсь от темы. Речь о том что велосипеды надо не изобретать, нужно брать и ездить. Поэтому поехали!

Если у вас установлено go, я сейчас расскажу как установить hugo, иначе читайте инструкцию для своей системы .

выполняем:

go get github.com/magefile/mage go get -d github.com/gohugoio/hugo cd $ {GOPATH: - $ HOME / go} /src/github.com/gohugoio/hugo mage vendor HUGO_BUILD_TAGS = extended mage install

HUGO_BUILD_TAGS = extended требует установленных gcc, и g ++, чтобы скомпилировать libsass. Я сам писать простое CSS без всяких там SASS, но не знаю каким темам его не надо будет, поэтому на всякий случай скомпилировал с его поддержкой.

Проверяем версию:

$ Hugo version Hugo Static Site Generator v0.48-DEV-FFF13253 / extended linux / amd64 BuildDate: 2018-08-22T22: 49: 10 + 0300

Свежий только збилджене.

$ Cd ~ / projects # или где вы там свой код держите $ hugo new site blog # создаем новый сайт который называется "blog". $ Cd blog

Добавляем тему. Выбрать можно здесь .

git init # можно конечно и без git ее скачать, но так удобнее git submodule add https://github.com/Vimux/Mainroad.git themes / mainroad echo 'theme = "mainroad"' >> config.toml

Добавляем какую публикацию:

hugo new posts / my-first-post.md

запускаем сервер

hugo server -D

Можно запускать без -D, но тогда чтобы увидеть публикацию, надо убрать из нее строку "draft: true" (его рано или поздно нужно будет убрать, а то зачем сайт, если на нем нет законченных публикаций?). Все публикации находятся в директории content (ну а потом posts / my-first-post.md).

В браузере смотрим как выглядит наш сайт. В теме Mainroad вы публикаций сначала не увидите, потому что она их почему-то по умолчанию ищет в директории content / post, хотя документация Hugo говорит создавать в posts. Это не страшно, в файле config.toml добавляем еще секцию "Params" с последующим содержанием:

[Params] postSections = [ "posts"] # the section pages to show on home page and the "Recent articles" widget

Было бы хорошо еще добавить какую-то страницу about и т.п. Это тоже просто:

hugo new about / _index.md

Редактируем content / about / _index.md и добавляем сверху menu: main, иначе ссылки на наш сайт не будет в меню. Теперь есть меню с одной пункта, но нет ссылки обратно на главную списку публикаций.

Чтобы исправить это - добавьте следующее в конфиг:

[Menu] [[menu.main]] identifier = "home" name = "Home" url = "/" weight = -110

Можно ссылку еще куда-то, добавив еще секцию:

[[Menu.main]] identifier = "bunyk" name = "Блог одного Кибер" url = "https://bunyk.wordpress.com/" weight = 100

"Weight" (вес) - это число по которому сортируются пункты меню в возрастающем порядке.

Еще, мне не нравится что в этой теме ссылки красные и не подчеркнуты. Я люблю чтобы были синие с подчеркиванием . Для этого создаем файл static / style.css, который перегружать стиле нашей темы:

.content a {color: blue; text-decoration: underline; }

Правда его существования еще ничего не меняет, потому что тема о нем не в курсе. Чтобы была в курсе, надо скопировать файл темы themes / mainroad / layouts / _default / baseof.html в layouts / _default / baseof.html, и добавить там после строки:

<Link rel = "stylesheet" href = "{{" css / style.css "| relURL}}">

строку:

<Link rel = "stylesheet" href = "{{" style.css "| relURL}}">

Теперь достаточно играть на localhost, давайте опубликуем все где-то в интернете. Я попробую на Github Pages, там у меня уже был велосипед.

Оказывается, это почти элементарно. Если в вас нет репозитория что называется .github.io - создайте. Там будет публиковаться отрендеренное сайт. Тогда удалите из проекта директорию public (потом hugo ее перестворить), и создайте на ее месте подмодуль указывающим на репозиторий сайта:

git submodule add -b master [email protected] <USERNAME> / <USERNAME> .github.io.git public

Подмодуль - это такая ссылка на конкретный Коммит в другом git репозитории. Чтобы его обновить - перестраиваем сайт (команда hugo без параметров), переходим в public, Комит и пушимо. Готово. Можно автоматизировать последние действия таким скриптом:

#! / Bin / bash echo -e "\ 033 [0; 32mDeploying updates to GitHub ... \ 033 [0m" hugo cd public git add. msg = "rebuilding site` date` "if [$ # -eq 1] then msg =" $ 1 "fi git commit -m" $ msg "git push origin master cd ..

Похожие

Комментарии