[{"content":"Вступ Чому генератор статичних сайтів і чому саме Hugo?\nбо це просте рішення, яке працює. Для сайтів візитка або блогів не потрібен складний бекенд. Всі налаштування в одному файлі hugo.toml або hugo.yaml у декларативному стилі, а тому все дуже лаконічно. Формати TOML та YAML настільки прості, що ви зможете налаштувати сайт навіть значно не заглиблюючись в вивчення цих форматів. Для створення контенту не потрібно заглиблюватись в HTML, CSS та JS. Контент створюється в Markdown файлах .md. Формат Markdown значно простіший. В інтернеті вдосталь посібників по синтаксису Markdown. Ось, наприклад тут. Програма Hugo це всього лише один бінарний файл написаний на Go і не має додаткових залежностей. Hugo дуже швидко генерує сайт. Встановлення На сайті Hugo є чудова інструкція з встановлення Hugo для різних операційних систем і різних пакетних менеджерів. Але є один нюанс.\nОпераційні системи на кшталт Debian або MX Linux, орієнтовані на стабільність, тому деякі пакунки в їх репозиторії можуть бути застарілими.\nІ перше що ви зробите після створення проєкту за допомогою Hugo буде встановлення теми сайту. А якщо Hugo буде застарілої версії, значна кількість тем не буде працювати коректно.\nТому для операційних систем на кшталт Debian або MX Linux я раджу завантажити останню стабільну версію Hugo у вигляді .deb файлу з GitHub репозиторію Hugo і встановити її.\nОкрім того, вам знадобиться Git для вашої операційної системи.\nСтворення проєкту Тут все дуже просто. Відкриваєте термінал і запускаєте команду\nhugo new site \u0026lt;ProjectName\u0026gt; Hugo створить теку з назвою вашого проєкту \u0026lt;ProjectName\u0026gt; зі всіма необхідними файлами й теками всередині, а також файлом налаштувань hugo.toml.\nЩоб Hugo створив проєкт з файлом налаштувань у форматі YAML необхідно виконати таку команду.\nhugo new site \u0026lt;ProjectName\u0026gt; --format yaml Деякі шаблони для Hugo на своїх сайтах наводять зразки налаштування теми сайту у форматі YAML, тому у вас може виникнути бажання використовувати саме цей формат.\nВстановлення теми Обрати тему можна на сайті Hugo. Після цього переходите на сторінку теми та слідуєте інструкції з встановлення. Способів встановлення є декілька.\nВарто обрати рекомендований в інструкції.\nНаприклад для теми PeperMod:\nВідкриваємо термінал і переходимо в корінь теки проєкту cd \u0026lt;ProjectName\u0026gt; Ініціюємо локальний Git репозиторій git init Встановлюємо тему як підмодуль Git (рекомендований для даної теми спосіб) git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod git submodule update --init --recursive Далі в файл налаштувань hugo.yaml додаєте рядок theme: [\u0026#34;PaperMod\u0026#34;] Налаштування Налаштування для всього сайту знаходяться в файлі hugo.toml або hugo.yaml. (Також є налаштування для кожної сторінки сайту в Markdown файлі. Блок метаданих \u0026ldquo;front matter\u0026rdquo; у такому випадку розміщується на початку .md файлу.)\nПараметром baseURL в файлі hugo.yaml задається адреса вашого опублікованого сайту.\nПриміром для запуску сайту локально, налаштування будуть наступні:\nbaseURL: http://localhost:1313 Вже після цього можна згенерувати сайт.\nhugo І запустити локально сервер.\nhugo server # або \u0026#39;hugo server --baseURL=\u0026#34;http://localhost:1313/\u0026#34;\u0026#39; Далі відкриваєте в браузері Ваш сайт за адресою вказаній в налаштуваннях\nhttp://localhost:1313\nНалаштування специфічні для кожної теми задаються параметром - params.\nПараметрів налаштування дуже багато, тому я всі їх описувати не буду. Детальну інформацію можна знайти на сайті Hugo\nТакож на сторінці теми PeperMod є зразок сайту з налаштуваннями для даної теми.\nНаповнення контентом Весь контент зберігається в теці content. Створимо нову сторінку сайту командою\nhugo new content/FirstPage.md Hugo створить файл за шаблоном default.md, який зберігається в теці archetypes.\nДалі редагуєте файл FirstPage.md, заново генеруєте сайт і запускаєте сервер.\nhugo hugo server -D Параметр -D означає \u0026ldquo;Включіть вміст, позначений як чорновий\u0026rdquo;. Коли Ви завершите редагування файлу FirstPage.md, в блоці метаданих цього ж файлу \u0026ldquo;front matter\u0026rdquo; слід змінити параметр draft.\ndraft: false Після цього сторінка буде відображатись на сайті.\nДодавання зображення Всі зображення зберігаються в теках static або assets.\nЗображення для обкладинки окремої сторінки задається в блоці метаданих .md файлу\ncover: image: cover.png caption: \u0026#34;Обкладинка сторінки\u0026#34; Зображення для всього сайту налаштовуються в hugo.yaml\nparams: env: production images: [\u0026#34;og-default.png\u0026#34;] cover: hidden: false label: icon: \u0026#34;logo.svg\u0026#34; iconHeight: 45 assets: favicon: \u0026#34;favicon.ico\u0026#34; favicon16x16: \u0026#34;favicon.ico\u0026#34; favicon32x32: \u0026#34;favicon.ico\u0026#34; Параметр images задає яке зображення буде використовуватись для обкладинки під час публікації посилання в соціальних мережах. Для того, щоб це налаштування спрацювало потрібно встановити env: production.\nПараметр label задає логотип сайту.\nПараметри favicon, favicon16x16 та favicon32x32 задають іконку сайту на вкладці браузера.\nЗверніть увагу, favicon, favicon16x16 та favicon32x32 треба задати всі обов\u0026rsquo;язково, навіть якщо зображення одне!\nЗначення параметра hidden: false в налаштуванні -\nparams: cover: hidden: false означає за замовченням показувати зображення обкладинки сторінок. Для окремої сторінки можна вимкнути цю поведінку в .md файлі сторінки.\nПублікація сайту Безплатно опублікувати сайт можна, наприклад на GitHub Pages.\nДля цього на GitHub потрібно створити акаунт з вашим UserName і репозиторій з назвою UserName.github.io.\nЦе потрібно для того, щоб ваш сайт отримав URL - UserName.github.io.\nПісля цього завантажуєте ваш сайт з теки public у Вашому проєкті в цей репозиторій. Це можна зробити декількома способами. Розглянемо варіант з двома репозиторіями.\nСтворюємо один в корені проєкту для вихідного коду.\ncd mywebsite git init # якщо репозиторій ще не ініціалізовано echo \u0026#34;public/\u0026#34; \u0026gt;\u0026gt; .gitignore git add . git commit -m \u0026#34;Initial commit.\u0026#34; Другий в теці public.\ncd public git init git remote add origin git@github.com:username/username.github.io.git cd .. hugo cd public git add . git commit -m \u0026#34;Deploy $(date)\u0026#34; git push origin main --force Важливо --force необхідний, тому що вміст public/ генерується заново при кожному запуску hugo.\nІнший варіант це використовувати один репозиторій для вихідного коду та для публікації сайту.\nУ такому випадку створюють окрему гілку репозиторію для згенерованого коду git checkout -b gh-pages.\nТакож у цьому випадку необхідно в налаштуваннях репозиторію на GitHub Settings -\u0026gt; Pages вказати в розділі Source -\u0026gt; Deploy from a branch гілку gh-pages і теку де знаходиться сайт в цій гілці (/ - це корінь проєкту).\n","permalink":"https://serhiinosov.codeberg.page/uk/posts/hugo-quick-reference/","summary":"\u003ch1 id=\"вступ\"\u003eВступ\u003c/h1\u003e\n\u003cp\u003eЧому генератор статичних сайтів і чому саме \u003cem\u003eHugo\u003c/em\u003e?\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eбо це просте рішення, яке працює. Для сайтів візитка або блогів не потрібен складний бекенд.\u003c/li\u003e\n\u003cli\u003eВсі налаштування в одному файлі \u003ccode\u003ehugo.toml\u003c/code\u003e або \u003ccode\u003ehugo.yaml\u003c/code\u003e у декларативному стилі, а тому все дуже лаконічно.\nФормати \u003cem\u003eTOML\u003c/em\u003e та \u003cem\u003eYAML\u003c/em\u003e настільки прості, що ви зможете налаштувати сайт навіть значно не заглиблюючись в вивчення цих форматів.\u003c/li\u003e\n\u003cli\u003eДля створення контенту не потрібно заглиблюватись в \u003cem\u003eHTML\u003c/em\u003e, \u003cem\u003eCSS\u003c/em\u003e та \u003cem\u003eJS\u003c/em\u003e.\nКонтент створюється в \u003cem\u003eMarkdown\u003c/em\u003e файлах \u003ccode\u003e.md\u003c/code\u003e. Формат \u003cem\u003eMarkdown\u003c/em\u003e значно простіший. В інтернеті вдосталь посібників по синтаксису \u003cem\u003eMarkdown\u003c/em\u003e. Ось, наприклад \u003ca href=\"https://www.markdownguide.org/basic-syntax/\"\u003eтут\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eПрограма \u003cem\u003eHugo\u003c/em\u003e це всього лише один бінарний файл написаний на \u003cem\u003eGo\u003c/em\u003e і не має додаткових залежностей. \u003cem\u003eHugo\u003c/em\u003e дуже швидко генерує сайт.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch1 id=\"встановлення\"\u003eВстановлення\u003c/h1\u003e\n\u003cp\u003eНа \u003ca href=\"https://gohugo.io/getting-started/quick-start/\"\u003eсайті Hugo\u003c/a\u003e є чудова інструкція з встановлення \u003cem\u003eHugo\u003c/em\u003e\nдля різних операційних систем і різних пакетних менеджерів. Але є один нюанс.\u003cbr\u003e\nОпераційні системи на кшталт \u003cem\u003eDebian\u003c/em\u003e або \u003cem\u003eMX Linux\u003c/em\u003e, орієнтовані на стабільність, тому деякі пакунки в їх репозиторії можуть бути застарілими.\u003cbr\u003e\nІ перше що ви зробите після створення проєкту за допомогою \u003cem\u003eHugo\u003c/em\u003e буде встановлення \u003ca href=\"https://themes.gohugo.io/\"\u003eтеми сайту\u003c/a\u003e.\nА якщо \u003cem\u003eHugo\u003c/em\u003e буде застарілої версії, значна кількість тем не буде працювати коректно.\u003cbr\u003e\nТому для операційних систем на кшталт \u003cem\u003eDebian\u003c/em\u003e або \u003cem\u003eMX Linux\u003c/em\u003e я раджу завантажити останню стабільну версію \u003cem\u003eHugo\u003c/em\u003e у вигляді \u003ccode\u003e.deb\u003c/code\u003e файлу з \u003ca href=\"https://github.com/gohugoio/hugo/releases\"\u003e\u003cem\u003eGitHub репозиторію Hugo\u003c/em\u003e\u003c/a\u003e і встановити її.\u003cbr\u003e\nОкрім того, вам знадобиться \u003ca href=\"https://git-scm.com/downloads\"\u003e\u003cem\u003eGit\u003c/em\u003e\u003c/a\u003e для вашої операційної системи.\u003c/p\u003e","title":"Стислий довідник Hugo"},{"content":" Згодом тут буде більше інформації. \u0026#x23f3;\n\u0026#x2709;\u0026#xfe0f; E-mail: sergey.nosov@tutanota.com \u0026#x260e;\u0026#xfe0f; tel: +4915123365063 \u0026#x1f4ac; WatsApp: +380671428168 \u0026#x1f310; Xing \u0026#x1f310; Codeberg \u0026#x1f310; Stackoverflow ","permalink":"https://serhiinosov.codeberg.page/uk/about/","summary":"\u003cimg \n  src=\"/images/profile.jpg\" \n  alt=\"Фото профілю\" \n  width=\"142\" \n  height=\"180\" \n  loading=\"lazy\" \n  style=\"display:block; margin: left;\"\u003e\n\n\u003cp\u003eЗгодом тут буде більше інформації. \u0026#x23f3;\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u0026#x2709;\u0026#xfe0f; E-mail: \u003ca href=\"mailto:sergey.nosov@tutanota.com\"\u003esergey.nosov@tutanota.com\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u0026#x260e;\u0026#xfe0f; tel: +4915123365063\u003c/li\u003e\n\u003cli\u003e\u0026#x1f4ac; WatsApp: +380671428168\u003c/li\u003e\n\u003cli\u003e\u0026#x1f310; \u003ca href=\"https://www.xing.com/profile/Serhii_Nosov0675/web_profiles\"\u003eXing\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u0026#x1f310; \u003ca href=\"https://codeberg.org/SerhiiNosov/\"\u003eCodeberg\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u0026#x1f310; \u003ca href=\"https://stackoverflow.com/users/4436189/serhii-nosov\"\u003eStackoverflow\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e","title":"Про мене"}]