hugo-github-pages.md

Back to Readme

Hosting on github.io

Use Github actions to automatically host the website from a Hugo theme put up as a repository.
Follow the instructions here: https://gohugo.io/hosting-and-deployment/hosting-on-github/

If you want to test the site locally, then follow the instructions in this page: https://gohugo.io/getting-started/quick-start/

The old way

Once your website made using Hugo, is ready and you have tested in local host, to host it on GitHub pages:

1. Create an empty repository named .github.io

2. cd <mysite> #(note: here should be 'cd' + the full path to <mysite>) # here is your website name created using Hugo

3. hugo # this builds your website files into the public folder

4. Go to the directory of the public folder and push the files into the repository you created:

    cd public  
    git init  
    git add .
    git remote add origin https://github.com/USERNAME/USERNAME.github.io.git  
    git commit -m “commit message”  
    git push origin master  
   

   Note: if you face brange merge issues, you might want to check this out.

5. Your website should be up and running in a few moments.

Source

Back to Readme

In-line html

If you need to do things like right-aligned text, which is not availabe in native markdown, you can use html tags like this:
<div style="text-align: right"> your-text-here </div>
But hugo doesn't render html tags. So, set the unsafe parameter to true in your project’s config.toml to output HTML entered in a Markdown content file:

[markup.goldmark.renderer]
unsafe= true

Source

Notes

All the pages are defined by the layouts directory in the theme being used. You may modify those files if needed. Alternately, you can override any layout or rule by creating a file with the same name in the layouts directory of your project.
For example, if you want to change the layout of the home page, create a file named index.html in the layouts directory of your project. Then make a new page named index.md in the content directory of your project. This page will be rendered as the homepage.

{{ define "content" }}
  <section class="container page">    
     /*Add the layout code here*/
     /* I added the code from the page.html file in the theme  
     so that the homepage can be like any other page.*/
  {{ end }}

Hugo Coder Theme

Changing global settings

themes/hugo-coder/assets/scss/_base.scss This is the file that contains the global settings for the theme.

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

REM is a relative value, based on the root font size. Keeping the font-size to 62.5% will make 1rem = 10px. This is useful for setting any size in rem units.

Body font size

If you want the font size in body to be 16px, Under the body calss set it to 1.6rem. (Default is 1.8rem)

Page width

Under the .container class, change the max-width from the default 90rem.