Idea

The project of building a personal website is an idea that has been in my head for a long time. As an IT person, creating a private space to share the things that I am passionate about, the knowledge that I accumulate, and the experiences that I have gone through is always an attractive idea for me. However, due to busy work and lack of frontend programming skills, this project has been postponed for quite some time.

However, recently, due to the opportunity to research and learn about Hugo, and I feel very excited and confident to implement my idea again.

Hugo was introduced to Hugo by a comrade in the VietAWS UG admin team a long time ago, but recently I have had the opportunity to contact and learn about it, as seeing this as an opportunity to implement the idea, I decided to apply it immediately. build this website.

Build websites with hugo

To build a website with Hugo, the first step is still to master an overview of it (The article is only an overview, not a technical one, so if you want to understand it, please read the document carefully).

Install Hugo

I use ubuntu to host, so I use apt package manager and the following command:

Everyone can find out how to install it on the hugo installation page

Create a frame for hugo

After installation, go to create your first website with hugo

Hugo will create a folder called mysite and this is the structure of the folder that hugo just created

Themes

So there is a frame for hugo. The next job is to find themes for him. So where to find themes? on this page Hugo themes

After searching for a while, I found hugo-profile theme

After looking through the interface and displaying Vietnamese, I still think this theme looks too good, so I’m going

Hugo configuration

Once the theme is selected, add it to the hugo project. Regarding the command, because there is a slight difference in the themes, I use a slightly different command from the Hugo quickstart page, so anyone who has an error can refer to Hugo’s document.

First post

In order to post the first post, the first thing to do is to research through the structure of a blog that I use

If you want to learn more about this part, you can read about Hugo page bundles in hugo’s documentation.

Learn how to configure theme author single page

So, it looks like you have created a basic hugo project.

Problems encountered and solutions

It looks so simple, but because I’m a newbie in this field, I encounter a lot of bugs

config.toml

This is because I copied Hugo’s document without reading carefully, so I created the hugo project with the following commands:

So created 2 config files, but hugo it took the configuration in the config.toml file, so the homepage of the web no matter how I fix it, it won’t show anything.

After struggling for a while, I found the problem, so I had to delete the config.toml file.

People who want to better understand this configuration can read Hugo configuration

Show cover photo

Displaying the image in the article is normal, but displaying the cover image is a bit different.

If you put the banner link in the image attribute of the page as images/banner.png , then when displaying the list of articles, you will not see the cover image, and if you leave it as <post>/images/banner.png , you will see it inside the article. Cover image display error. So I had to go through the original post of the author and he used the absolute address of the form /images/banner.png to find the images folder and found it in the static folder in the hugo project’s root directory. Check now and see everything is ok. And I have created a blogs folder inside images to store banners of articles.

I removed the git link to the author’s resource

Instead of using git submodule add https://github.com/gurusabarish/hugo-profile.git themes/hugo-profile , I used git clone https://github.com/gurusabarish/hugo-profile.git then rm -rf .git .

I have edited a bit through the author’s theme source, so I will not use git submodule add ... because then github will recognize other people’s git repo and will create a link there for my edits. I become useless.

It’s a bit disrespectful to the author’s copyright, but that’s all for now  Sincere apologies h.

Deploy website to github and configure Github Action

That’s it, the local web part is done, let’s put it online

Create thachpham2k.github.io

This part is written by github a bit easy to understand, so everyone can refer to Create a static website with github

To summarize, what to do here is to create a github repository of the form <username>.github.io .

Create website-src

Similar to the previous step, but this time you can name it whatever you like, this will be the source of the hugo project.

Create Personal Token

What is Personal Token? Why create it? When is it used?

• GitHub Personal Access Token (also known as GitHub Personal Token) is a type of access token provided by GitHub to authenticate and authorize activities on GitHub. It allows users to perform operations like create, read, update and delete repositories, manage issues, pull requests, manage settings and other activities related to GitHub accounts.
• PAT will be used in Github Actions. In the last step, when you want to push content inside hugo’s public folder through thachpham2k.github.io repository, you must give Github bot permission to allow it to push code there. And that permission will be configured with PAT and github bot will use it to have permission to push code to the repo.

To create a PAT then:

1. Go to Github Personal Access Token or go to github -> setting -> developer setting -> Personal Access Token -> Tokens (classic)
2. Create Token by clicking Generate new token and then select Generate new token (classic) and enter a name, set expiration date and permissions for it.

After creating, it will be time to add the Token to secret environment so that the bot can know and use it.

1. Access hugo project repository
2. Settings -> Secrets and variables -> Actions
3. Here select New repository secret The application will be directed to the environment creation page
4. On the environments page create a new environment named GITHUB_TOKEN
5. Inside the interface of Environment create an environment secret named TOKEN and enter the previously created PAT and the value
6. Going back to the Settings -> Secrets and variables -> Actions interface, you will see an Enviromnet token created named GITHUB_TOKEN

In the github action configuration file, if you want to use github PAT, you must declare the form

Generate Github Deploy key

If you do not want to use PAT, there is another option that is to use the ssh key. To be able to use this method first you need to have an ssh key that can be used for github.

Use ssh-keygen to generate key

in step Enter file in which to save the key (C:Usersphamt/.ssh/id_ed25519): abcde if you don’t enter anything then ssh will generate a key named id_ed25519 and id_ed25519.pub and here I enter abcde will generate key files named id_abcde and id_abcde.pub .

After creating the key, proceed to configure it on github

• Upload private key

1. Access the hugo project repo (website-src)
2. Settings -> Secrets and variables -> Actions
3. Here select New repository secret
4. Enter the name as PRIVATEKEY and the value as the content of the newly created id_adcde file

• Upload public key

1. Visit the repo website ( thachpham2k.github.io )
2. Settings -> Deploy key
3. Add deploy key
4. Enter the title as PUBLICKEY and the Key as the content of the file id_abcde.pub
5. Click on Allow write access

• Usage: In the github action configuration file, if you want to use github PAT, you must declare the form

Create Github action

The first is to find the source repo (website-src) and select the Action tab

Here find workflow search and enter Simple workflow

Inside the blank.yml file edit the content to look like this

This part has quite a lot of things, too lazy to explain. Everyone commits the file and waits for the results.

Problems encountered and solutions

This item appears almost naturally, newbie, how to avoid this error

Using github tokens

First I used github token (recommended for security) but in this project Github token doesn’t meet enough permissions (write permission) so I have to switch to using PAT.

Using PAT

Because Github token did not meet the needs, I switched to using PAT, but the same problem happened that I configured the token and when I ran it, I kept getting Permission deny. I’m too lazy to test the permissions, so I switched to using Deploy key so that I can go back to test the PAT today (it’s a bit far today).

Build build file for github action

I’m having a little problem creating the git action config file.

Specifically, when getting the token value, I used personal_token: ${{ secrets.TOKEN }} instead of personal_token: ${{ secrets.GITHUB_TOKEN }} I was confused and didn’t know where it was wrong (admittedly it was a bit silly at the time) .

Epilogue

The article partially records the process of creating this website. It’s also my first time playing with Hugo as well as git action and haven’t spent a lot of time researching it, so my knowledge will be a bit sketchy or maybe wrong. Hope everyone can comment on my fb or gmail at the bottom of the website.

Thank you very much for reading the whole article. BYE