The following is the author during the process of building this website a record, including a local deployment and [coder template] (https://github.com/luizdepra/hugo-coder), a personalized exploration

Prerequisites Link to heading

First, you must have a github account and download git locally! Create a github account You can refer to [this article] (https://blog.csdn.net/m0_67906358/article/details/128808210).

Download git Link to heading

Reference [this article] (https://blog.csdn.net/weixin_44406127/article/details/137540031), download after multiple command lines can be used, but the author still tend to use the terminal to run Windows

Basic configuration Link to heading

Configure the environment Link to heading

First, we need to download Hugo and configure the relevant environment variables. Specific steps you can refer to [this article] (https://zhuanlan.zhihu.com/p/440175312). When you are done, make sure that no errors are reported when you run ‘hugo version’ in the terminal. Suggestions here are installed the extend version of Hugo, namely/Hugo’s official website (https://github.com/gohugoio/hugo/releases/tag/v0.144.0)

hugo_extended_0. 144.0 _windows - amd64. Zip

I got stuck here yesterday and haven’t seen the website work yet. Today (2025.2.15) it was discovered that the reason was because the extend version was not installed.

Configure the theme Link to heading

Then create your own site root folder using ‘hugo new site < your local blog folder name >’ where hugo is installed. I chose the [Hugo - coder] (https://github.com/luizdepra/hugo-coder) theme. However, there were some problems in grasping the warehouse. An error was reported when running the warehouse crawl command. After asking the AI, I learned that the local warehouse needs to be initialized first. To do this, we need to run:

git init
` ` `
Next, run the following command to grab the theme repository:

```bash
git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder
` ` `
After running the 'git submodule add' command, Hugo will add the 'hugo-coder' theme to your project under the 'themes' folder.
Then run the command
```bash
hugo server
` ` `
You can see the results of your website. See my other tutorial on how to deploy it to githubpage.
# Personalized template website
Coder this template is really beautiful and I decided to explore further how to personalize it.
In the following process, it is recommended that everyone try the 'hugo server' command all the way to open the local preview of the website, to facilitate the implementation of the change


First, I copy the files in the 'exampleSite' directory directly into the site root, overwriting the existing files. Through these steps, we can successfully complete the construction of Hugo website and the localization of Coder template. Next, I will continue to personalize the design and adjust the content of the site to suit my needs.

## Change the language

Most of the changes are concentrated in the 'hugo.toml' file, so it is recommended to install Even Better TOML plug-ins before you start, which will be easier to view and modify.

The first thing to change is the language configuration. hugo-coder templates are bilingual in Portuguese and English by default, but I want to use Chinese. The specific steps are as follows:

### Change the English name

Search for 'John Doe', 'Full Stack DevOps', and' Magician 'in' config.toml ', three lines of sample text in the template, respectively. Change them to the English name you want (such as Tsui) and a brief introduction.

### Change the Chinese name

Also search for 'Joao Ninguem', 'Full Stack DevOps e' and 'Magico' to modify them to the Chinese name and introduction. Note that 'Full Stack DevOps e' and 'Full Stack DevOps' in English are repeated, so this part will be overwritten when you modify it in English. You can locate directly to:

```toml
[languages.zh-cn.params]
` ` `
To modify.
### Change Chinese jump link
Modify the Chinese jump link, that is, the top right corner about, blog,...... Such as the Chinese part and toggle button Settings, locate to
```toml
[[languages.pt-br.menu.main]]
` ` `
You can see below the Portuguese jump text Sobre Blog Projetos Contato, first you need to put all
```toml
[[languages.pt-br.menu.main]]
` ` `
Change into
```toml
[[languages.zh-cn.menu.main]]
` ` `
Then change the Portuguese to Chinese.
Finally, you need to add '[languages.zh-cn]'
Change this to 'languageName = ":cn:"'.
This step is suitable for expanding more jump links as well as languages.
Write relevant documents in Chinese
In fact, just the modification is not enough, you will find that the modified language points into the Chinese menu display 404, this is because there is no corresponding Chinese document, we enter '\content', will find
'about.md', 'about.pt-br.md' and the corresponding other documents, we need to add the 'about.zh-cn.md' document to give the jump target! For the '.pt-br.md 'suffix of the document can be deleted or not deleted, but may occasionally pop out some Portuguese links.
## Change your avatar
Finally, you can also change your avatar through avatarURL (in fact, we even change the website logo, but this part has not been explored yet).
## Modify the default language directly
In fact, you can directly change the priority display language, you can change the preferred language from English to Chinese. At this time, note that if you want to write English articles, you need to add suffixes, for example, if the file name of an article is' bulid.md ', then he will automatically put it in the Chinese display blog, at this time if you want to have its translation in the English blog. Need to create a 'bulid.en.md', and fill in the English version of this article, this process needs to be completed manually, although there are many unchanged, but there is stronger flexibility, for example, you can let the Chinese and English blog display different content or even completely different articles.
### Writing
Basically, if you are familiar with markdown grammar, you can do some basic writing!

# More Features
1. For information on how to deploy a blog to github, see the article: [Guide to Deploying a Website to github](./ Guide to Deploying a Website to github.md)
2. For details on how to adjust pdf embedding Settings, see the article: [Embedding pdf Guide](./ Embedding pdf Guide /index.md)