[{"content":"Introduction Why a static website generator and why Hugo?\nbecause it\u0026rsquo;s a simple solution that works. For business card sites or blogs, you don\u0026rsquo;t need a complex backend. All settings in one file hugo.toml or hugo.yaml in a declarative style, so everything is very concise. The TOML and YAML formats are so simple that you can set up a site without even delving into learning these formats. You don\u0026rsquo;t need to delve into HTML, CSS, and JS to create content. Content is created in Markdown .md files. Markdown format is much simpler. There are plenty of Markdown syntax guides on the internet. For example, here. The Hugo program is just a single binary file written in Go and has no additional dependencies. Hugo generates a site very quickly. Installation The Hugo website has a great guide on how to install Hugo for different operating systems and different package managers. But there is one caveat.\nOperating systems like Debian or MX Linux are focused on stability, so some packages in their repositories may be outdated.\nAnd the first thing you will do after creating a project using Hugo will be to install a site theme. And if Hugo is an outdated version, a significant number of themes will not work correctly.\nTherefore, for operating systems like Debian or MX Linux, I recommend downloading the latest stable version of Hugo as a .deb file from the Hugo GitHub repository and installing it.\nAdditionally, you will need Git for your operating system.\nCreating a project It\u0026rsquo;s very simple. Open a terminal and run the command\nhugo new site \u0026lt;ProjectName\u0026gt; Hugo will create a folder named after your project \u0026lt;ProjectName\u0026gt; with all the necessary files and folders inside, as well as the hugo.toml configuration file.\nTo have Hugo create a project with a settings file in YAML format, you need to run the following command.\nhugo new site \u0026lt;ProjectName\u0026gt; --format yaml Some templates for Hugo provide sample site theme settings in YAML format on their websites, so you may want to use this format.\nInstalling the theme You can choose a theme on the Hugo website. Then, go to the theme page and follow the installation instructions. There are several installation methods.\nIt is worth choosing the one recommended in the instructions.\nFor example, for the PeperMod theme:\nOpen a terminal and go to the root of the project folder cd \u0026lt;ProjectName\u0026gt; Initialize a local Git repository git init Install the theme as a Git submodule (recommended method for this theme) git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod git submodule update --init --recursive Next, add the line to the hugo.yaml configuration file theme: [\u0026#34;PaperMod\u0026#34;] Settings Settings for the entire site are in the hugo.toml or hugo.yaml file. (There are also settings for each page of the site in a Markdown file. The \u0026ldquo;front matter\u0026rdquo; metadata block in this case is placed at the beginning of the .md file.)\nThe baseURL parameter in the hugo.yaml file specifies the address of your published site.\nFor example, to run the site locally, the settings would be as follows:\nbaseURL: http://localhost:1313 After that, you can generate the site.\nhugo And start the server locally.\nhugo server # або \u0026#39;hugo server --baseURL=\u0026#34;http://localhost:1313/\u0026#34;\u0026#39; Next, open your site in the browser at the address specified in the settings.\nhttp://localhost:1313\nSettings specific to each theme are set by the parameter - params.\nThere are a lot of configuration options, so I won\u0026rsquo;t describe them all. You can find detailed information on the Hugo website\nAlso on the PeperMod theme page there is a sample site with settings for this theme.\nContent filling All content is stored in the content folder. Let\u0026rsquo;s create a new page for the site with the command\nhugo new content/FirstPage.md Hugo will create a file with the default.md template, which is stored in the archetypes folder.\nNext, edit the FirstPage.md file, regenerate the site, and start the server.\nhugo hugo server -D The -D option means \u0026ldquo;Include content marked as draft\u0026rdquo;. When you finish editing the FirstPage.md file, you should change the draft parameter in the metadata block of the same file, \u0026ldquo;front matter\u0026rdquo;.\ndraft: false After that, the page will be displayed on the website.\nAdding an image All images are stored in the static or assets folders.\nThe cover image for a single page is specified in the .md metadata block of the file.\ncover: image: cover.png caption: \u0026#34;Page cover\u0026#34; Site-wide images are configured in 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; The images parameter specifies which image will be used for the cover when publishing the link on social networks. For this setting to work, you need to set env:production.\nThe label parameter specifies the site logo.\nThe favicon, favicon16x16 and favicon32x32 parameters set the site icon in the browser tab.\nPlease note that favicon, favicon16x16 and favicon32x32 must all be specified, even if there is only one image!\nThe value of the hidden: false parameter in the configuration is -\nparams: cover: hidden: false means to show page cover images by default. For an individual page, you can disable this behavior in the page\u0026rsquo;s .md file.\nWebsite publishing You can publish a site for free, for example on GitHub Pages.\nTo do this, you need to create an account on GitHub with your UserName and a repository named UserName.github.io.\nThis is necessary so that your site gets the URL - UserName.github.io.\nAfter that, upload your site from the public folder in your project to this repository. There are several ways to do this. Let\u0026rsquo;s consider the option with two repositories.\nWe create one in the root of the project for the source code.\ncd mywebsite git init # if the repository is not yet initialized echo \u0026#34;public/\u0026#34; \u0026gt;\u0026gt; .gitignore git add . git commit -m \u0026#34;Initial commit.\u0026#34; The second one is in the public folder.\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 Important --force is necessary because the contents of public/ are regenerated each time hugo is run.\nAnother option is to use one repository for source code and for publishing the site.\nIn this case, create a separate repository branch for the generated code git checkout -b gh-pages.\nAlso in this case, in the repository settings on GitHub Settings -\u0026gt; Pages, in the Source -\u0026gt; Deploy from a branch section, specify the gh-pages branch and the folder where the site is located in this branch (/ is the root of the project).\n","permalink":"https://serhiinosov.codeberg.page/en/posts/hugo-quick-reference/","summary":"\u003ch1 id=\"introduction\"\u003eIntroduction\u003c/h1\u003e\n\u003cp\u003eWhy a static website generator and why \u003cem\u003eHugo\u003c/em\u003e?\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003ebecause it\u0026rsquo;s a simple solution that works. For business card sites or blogs, you don\u0026rsquo;t need a complex backend.\u003c/li\u003e\n\u003cli\u003eAll settings in one file \u003ccode\u003ehugo.toml\u003c/code\u003e or \u003ccode\u003ehugo.yaml\u003c/code\u003e in a declarative style, so everything is very concise.\nThe \u003cem\u003eTOML\u003c/em\u003e and \u003cem\u003eYAML\u003c/em\u003e formats are so simple that you can set up a site without even delving into learning these formats.\u003c/li\u003e\n\u003cli\u003eYou don\u0026rsquo;t need to delve into \u003cem\u003eHTML\u003c/em\u003e, \u003cem\u003eCSS\u003c/em\u003e, and \u003cem\u003eJS\u003c/em\u003e to create content.\nContent is created in \u003cem\u003eMarkdown\u003c/em\u003e \u003ccode\u003e.md\u003c/code\u003e files. \u003cem\u003eMarkdown\u003c/em\u003e format is much simpler. There are plenty of \u003cem\u003eMarkdown\u003c/em\u003e syntax guides on the internet. For example, \u003ca href=\"https://www.markdownguide.org/basic-syntax/\"\u003ehere\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eThe \u003cem\u003eHugo\u003c/em\u003e program is just a single binary file written in \u003cem\u003eGo\u003c/em\u003e and has no additional dependencies. \u003cem\u003eHugo\u003c/em\u003e generates a site very quickly.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch1 id=\"installation\"\u003eInstallation\u003c/h1\u003e\n\u003cp\u003eThe \u003ca href=\"https://gohugo.io/getting-started/quick-start/\"\u003eHugo website\u003c/a\u003e has a great guide on how to install \u003cem\u003eHugo\u003c/em\u003e\nfor different operating systems and different package managers. But there is one caveat.\u003cbr\u003e\nOperating systems like \u003cem\u003eDebian\u003c/em\u003e or \u003cem\u003eMX Linux\u003c/em\u003e are focused on stability, so some packages in their repositories may be outdated.\u003cbr\u003e\nAnd the first thing you will do after creating a project using \u003cem\u003eHugo\u003c/em\u003e will be to install a \u003ca href=\"https://themes.gohugo.io/\"\u003esite theme\u003c/a\u003e.\nAnd if \u003cem\u003eHugo\u003c/em\u003e is an outdated version, a significant number of themes will not work correctly.\u003cbr\u003e\nTherefore, for operating systems like \u003cem\u003eDebian\u003c/em\u003e or \u003cem\u003eMX Linux\u003c/em\u003e, I recommend downloading the latest stable version of \u003cem\u003eHugo\u003c/em\u003e as a \u003ccode\u003e.deb\u003c/code\u003e file from the \u003ca href=\"https://github.com/gohugoio/hugo/releases\"\u003e\u003cem\u003eHugo GitHub repository\u003c/em\u003e\u003c/a\u003e and installing it.\u003cbr\u003e\nAdditionally, you will need \u003ca href=\"https://git-scm.com/downloads\"\u003e\u003cem\u003eGit\u003c/em\u003e\u003c/a\u003e for your operating system.\u003c/p\u003e","title":"Hugo Quick Reference"},{"content":" There will be more information here later. \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/en/about/","summary":"\u003cimg \n  src=\"/images/profile.jpg\" \n  alt=\"Profile photo\" \n  width=\"142\" \n  height=\"180\" \n  loading=\"lazy\" \n  style=\"display:block; margin: left;\"\u003e\n\n\u003cp\u003eThere will be more information here later. \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":"About"}]