Hugo usage

Hugo deploy on Github

Created two repositories, blog and actual blog with the github name (githubname.io). Set the repositories to public, the second one is actual blog with the githubname url. The first repository can be set as private if we need to use it in different platforms.

1. clone the blog repo to the local

2. create the new hugo site using hugo new site [. (current direcoty)] or [name of folder]

3. cd themes and clone specific theme from github, and config toml file to set theme

4. hugo server or hugo server -D to test local blog server

5. using hugo new posts/post_name.md to add content

6. Set the production repo with main branch, add the a readme file to this repo.

   git checkout -b main

   touch README.md

7. add submodule to public folder

   git submodule add -b main [https production repo url] public

8. build content with the theme before deploy

   hugo -t [theme name]

9. cd public folder and push all content to github

   git add .

   git commit -m "init"

   git push origin main

   github wil automatically deploy the site from the main branch, the production repository is the whole content in the public folder.

10. Test the new feature of youtube video Ask about this video

refer to https://www.youtube.com/watch?v=LIFvgrRxdt4&t=83s

Configure the toml file

Added the last edited date behind the date created of each post

enableGitInfo = true

[frontmatter]
lastmod = [':git', ':fileModTime']

Repository test

The method for moving all folders in the first repository to new platform.

1. git pull the first blog repository
2. check the remote repository in public folder
3. if the remote repository is not production reposition, then remove the folder, and add submodule through the production reposition url again.
4. also check the theme folder if it is empty, and clone it from github as needed.

Image rendering

Image rendering issue solved by created a static folder under the root directory,then put all images to a img folder in static folder and check the base url in toml file, it the baseURL is https://xxx.xxx.com, the markdown syntax would be written as

![text](/../img/imagename.png)

if the baseURL is https://xxx.xxx.com/xxx.xxx.xxx. try

![text](/../../imgimagename.png)

the local markdown preview in vscode doesn’t work for this syntax, and it can be used to assist viewing the content when browser isn’t rendering the images. Based on the above solution, the browser works well.