Как создать блог с 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 .

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 ..

Похожие

Как создать свой блог | Здесь растут юные информатики
сначала необходимо создать электронный ящик , которая заканчивалась
Как создать анимированный GIF-баннер в Photoshop
... как использовать программу для создания анимаций и их экспорта, используя веб-сайты и программное обеспечение, которое автоматизирует создание. Они являются частичными решениями, поскольку они предлагают несколько вариантов настройки в конечном продукте. В Photoshop можно создать анимированный GIF- файл, который будет использоваться как любое другое изображение, с таким же размером или даже меньшим, чем у ударной волны. И лучше: GIF не зависит от работы плагинов.
Ведьмак 3 - Как запустить игру на бюджетных системах
Пользователь NexusMod Hasukiii создал мод для The Witcher 3: Wild Hunt, который делает игру доступной на системах с низкими характеристиками. Несмотря на то, что в остальном великолепная игра выглядит довольно плохо. Это выглядит довольно нелестно для красивого названия, такого как The Witcher 3, но для пользователей, которые действительно хотят испытать замечательную RPG с открытым миром, и не имеют навороченных спецификаций, требуемых для этого должным образом, этот мод может быть достойной
Как начать бесплатный блог на платформе Blogspot Blogger
... блог , На это есть несколько причин. Во-первых, это бесплатная альтернатива блоггинга, и она также принадлежит Google. Этих двух причин более чем достаточно, чтобы кто-то захотел начать вести блог прямо сейчас. Однако есть несколько недостатков в создании блога на платформе Blogspot, например, отсутствие полного владения вашим контентом и тем, что вы можете разместить на своем сайте, а также отсутствие профессионального доменного имени в качестве URL-адреса вашего блога. Несмотря
Как использовать Skype через 3G на вашем iPhone
... пользовать Skype для совершения звонков, когда вы находитесь вне точек доступа WiFi? Представьте, что вы могли бы использовать Skype В ЛЮБОЕ, ВСЕГДА, используя свой тарифный план Rogers / Fido! Вы можете сделать это, следуя инструкциям ниже ... 1. Джейлбрейк вашего iPhone ( следуйте нашему руководству здесь ). Если вы используете iPhone 3GS, я бы очень рекомендовал
Как сделать свои собственные GIF-файлы для использования в Twitter
Вчера Twitter объявил, что теперь он позволит пользователям обмениваться и просматривать анимированные GIF-файлы как в Интернете, так и в приложениях для Android и iOS. Объявление было сделано в учетной записи службы поддержки Twitter и, как вы уже догадались, включало GIF: Когда открылись шлюзы GIF, почти все и каждый публиковали GIF-файлы со своих аккаунтов в Twitter. К счастью, GIF-файлы не воспроизводятся автоматически на вашей временной шкале, но пользователю нужно только один раз
Как и зачем использовать приватный просмотр в iOS
... как это исправить. Короткий ответ заключается в том, что читатель случайно включил приватный просмотр в Safari, но это заставило нас задуматься о том, что, возможно, более подробный взгляд на эту полезную, но малоизвестную функцию iOS был в порядке. Что такое приватный просмотр? Private Browsing, представленный Apple как часть
Как легко поместить видео с iPhone в Windows Movie Maker
IPhone, как iPhone 6, iPhon 6 Plus, iPhone 5S, iPhone 5, iPhone 4S и т. Д., Способен записывать видео до 1080p. Вы можете носить iPhone с собой везде, где бы вы ни находились, благодаря чему вы никогда не пропустите достойные фильма моменты. Захват видео на камеру - это только первый шаг. После того, как вы
Класс веб-дизайна: Как добавить фотогалерею в Joomla!
Вебинар: По запросу, по требованию Настольный компьютер как услуга, разработанный для любого облака? Рамка Нутаникс Возможно, вы использовали фотогалерею, которая позволяла вам легко просматривать несколько изображений на веб-сайте, и задавались вопросом, как вы можете добавить эту функцию на свой собственный веб-сайт. В этой статье мы рассмотрим процесс добавления фотогалереи в Joomla! используя расширение. Как и во всех расширениях, мы начинаем
... сем нам знаком старое изречение: «Связи решают все». Он объясняет, почему племянника босса взял...
... сем нам знаком старое изречение: «Связи решают все». Он объясняет, почему племянника босса взяли на работу или почему партнер по теннису директора получил повышение. Большинство людей считает, что профессиональные и личные связи - это важнейший инструмент поиска работы. Наши связи могут сыграть большую роль, когда мы пытаемся сделать карьеру, улучшить нынешнюю ситуацию на работе или получить повышение. Что же такое связи? Это всего лишь сеть полезных знакомств i лучше начинать строить
Расширения PP - Что такое .pp и как его воспроизвести? - ReviverSoft
Вы находитесь здесь, потому что у вас есть файл с расширением, оканчивающимся на .pp. Файлы с расширением .pp могут запускаться только некоторыми приложениями. Возможно, что файлы .pp являются файлами данных, а не документами или носителями, что означает, что вы не должны их просматривать вообще. Файлы, размещенные в формате PP или в формате постобработки, представляют собой файлы данных, разработанные Met Office, официальной британской национальной службой погоды. Метеорологическое

Комментарии

Как бы вы оценили функциональность нашего магазина?
Как бы вы оценили функциональность нашего магазина? УНЕВЫЙ УРОВЕНЬ 300x1400 747 Вт БЕЛЫЙ
Как решить эту проблему?
Как решить эту проблему? Очистите кеш Google Play так же, как ошибка 492. Вы также можете выйти из Google Plays. После этого перезагрузите телефон и снова войдите в Google Play. Google Play Store Ошибка 927
«Если [версия Facebook всегда будет бесплатной], как вы поддерживаете бизнес-модель, при которой пользователи не платят за ваш сервис?
«Если [версия Facebook всегда будет бесплатной], как вы поддерживаете бизнес-модель, при которой пользователи не платят за ваш сервис?» Сенатор Оррин Хэтч, 84-летний республиканец из Юты, спросил рано на пятичасовом слушании. Цукерберг остановился на мгновение,
Интернет-реклама и Adblock - как это согласовать?
Интернет-реклама и Adblock - как это согласовать? На написание этой записи меня вдохновило множество комментариев, появившихся на сайте Wykop (точно здесь ) в каком материале цена рекламы в интернете , Жаль, что в моем блоге также
Как это сделать?
Как это сделать? Полная анимация занимает около 19 секунд; если вы хотите проверить, перетащите маркер времени в конец строки и посмотрите - точнее, он имеет 19 секунд + 23 кадра). Я хочу, чтобы текст, который занял три секунды, чтобы добраться до центра, оставался там до тех пор, пока не осталось три секунды, а затем вышел влево. Итак, 19 (общее количество секунд) - 3 (секунды, которые текст занимал, чтобы добраться до центра баннера) = 16 секунд (плюс оставшиеся 23 кадра,
Как выглядит личность покупателя вашего идеального покупателя (например, демография, характеристики, симпатии, антипатии, привычки)?
Как выглядит личность покупателя вашего идеального покупателя (например, демография, характеристики, симпатии, антипатии, привычки)? Какова основная цель вашего веб-сайта (например, привлечь потенциальных клиентов, повысить узнаваемость бренда, продавать товары)? Каково уникальное торговое предложение вашего сайта по сравнению с вашими конкурентами (например, опыт, инвентарь, цены)? Какую информацию вы считаете самой сильной (например, информацию о продукте, историю
Итак, как вы можете запрыгнуть на подножку и сделать свои собственные GIF для своего аккаунта в Twitter?
Итак, как вы можете запрыгнуть на подножку и сделать свои собственные GIF для своего аккаунта в Twitter? Twitter объединился с компанией Freshout и предоставил им доступ к их API. Используя их Запиши это Теперь пользователи Интернета могут записывать свои собственные GIF-файлы. Это просто случай, когда вы нажимаете «запись» и используете мышь, чтобы нарисовать контент, который вы хотите захватить.
Как вы думаете, это удобно?
Как вы думаете, это удобно? 5.0 Можете ли вы увидеть экран под сильным солнцем? 6,0 Питание и оборудование Antutu Рейтинг 41.500 Производительность лучше, чем у 54% устройств емкость Емкость 64 ГБ (Емкость в зависимости от операционной системы, зависит от производителя и ПЗУ: 57-63 ГБ) Приблизительно 11636 песен, 25600 фотографий и 914 видео Можно увеличить? (SD) Да Доступ к SD-карте или второй SIM-карте
Как перенести фотографии с iPhone на USB?
Как перенести фотографии с iPhone на USB? Как перенести фотографии с iPhone на Flash Drive С его удивительной встроенной камерой люди очень любят фотографировать с помощью своего iPhone. Со временем и использованием фотографии становятся одним из крупнейших потребителей вашего ограниченного хранилища
Как работает API Карт Google?
Как работает API Карт Google? Когда вы показываете карту из Карт Google на странице своего веб-сайта, при каждом посещении устанавливается соединение с API Карт Google. Это бесплатный сервис от Google, который создает эту карту для вас, поэтому он быстро загружается. Чрезмерное использование этого инструмента обходится Google в большие деньги, потому что их серверам приходится
Как вы думаете, у Airtime есть шанс в мире видеочата?
Как вы думаете, у Airtime есть шанс в мире видеочата? И есть ли еще претенденты, чтобы добавить в список, кроме AOL , бахрома, Google Microsoft Kinect, ooVoo , Raketu , Skype , а также Танго ?

Его рано или поздно нужно будет убрать, а то зачем сайт, если на нем нет законченных публикаций?
?пользовать Skype для совершения звонков, когда вы находитесь вне точек доступа WiFi?
Что такое приватный просмотр?
Вебинар: По запросу, по требованию Настольный компьютер как услуга, разработанный для любого облака?
Что же такое связи?
Pp и как его воспроизвести?
Как бы вы оценили функциональность нашего магазина?
Как решить эту проблему?
«Если [версия Facebook всегда будет бесплатной], как вы поддерживаете бизнес-модель, при которой пользователи не платят за ваш сервис?
Интернет-реклама и Adblock - как это согласовать?