In my Windows 11 environment, I prefer to use the Microsoft-provided package manager, winget, to install open-source software:

Open PowerShell and enter:
winget install Hugo.Hugo.Extended Git.Git
Wait patiently for the installation to complete.
(Of course, you can also use cmd for the aforementioned and subsequent steps.)

This step's duration depends on your internet connection. If you find winget too slow, you can also download the compressed package and configure system environment variables according follow the Hugo doc: prebuilt instructions. (Personally, I don't prefer this less manageable approach.)

After the installation is complete, enter the following in PowerShell:
hugo version
If you see a similar output like below, it indicates that Hugo has been successfully installed.

hugo v0.117.0-b2f0696cad918fb61420a6aff173eb36662b406e+extended windows/amd64 BuildDate=2023-08-07T12:49:48Z VendorInfo=gohugoio

Similarly, validate the installation of Git using the same method:
git version
If you receive a version output like below, it indicates that Git has been successfully installed.

git version 2.38.1.windows.1

After creating the Mysite folder to store your website, navigate to the folder and right-click on a blank space. Choose Open in Terminal .
(Alternatively, you can also use the cd command in cmd or PowerShell to navigate to this folder.)

PS C:\Users\NicEu\OneDrive\Documents\_00PersonalDocuments\Mysite>

Following the instructions from the Hugo doc: create a site, enter the following command to create the necessary files for your website:
(Note that "Limewolf.top" is my website name; replace it with your own.)
hugo new site Limewolf.top

Navigate to the folder where your website is located:
cd Limewolf.top
Currently, the terminal should display a path similar to:

PS C:\Users\NicEu\OneDrive\Documents\_00PersonalDocuments\Mysite\limewolf.top>

Note: I use Monochrome as my website theme, which is different from the themes used in the Hugo doc.

1. Initialize a Git project in the website folder (Git is a distributed version control tool):
   git init
2. Download the theme file package as a submodule and add it to the Git project of your website:
   git submodule add https://github.com/kaiiiz/hugo-theme-monochrome.git themes/hugo-theme-monochrome
3. Modify the website configuration file to use the newly downloaded theme:
   echo "theme = 'hugo-theme-monochrome'" >> hugo.toml

Run the website with local server: (In this mode, the website will update in real-time as you make changes):
hugo server

Alternatively, package the website for publishing by placing it in the public folder within its directory, for future deployment online:
hugo

This step offers a lot of flexibility. Following the steps outlined in the Hugo doc: add content, you can use the default template with title and date attributes to create articles:
hugo new content posts/my-first-post.md

In addition, you can also create articles completely manually, but you'll need some understanding of the preset attributes in the template files.

For example, the attributes for this article include:

#+title: Creating a Personal Blog with Hugo and Vercel
#+author: "Limewolf"
#+description: "A Guide on How to Build a Website from Scratch Using Hugo and Vercel"
#+date: 2023-08-26T02:56:54+08:00
#+keywords[]: hugo vercel github
#+tags[]: hugo vercel blog
#+categories[]: Blog_Technology
#+series[]: Hugo_Adventure Exploring_Vercel

Some of them are used for categorizing and filtering articles, while others help search engines discover this article.

Of course, the functionality of attributes goes beyond just this, and the Hugo doc: all setting provides detailed explanations.

This step is highly personalized and can be explored almost infinitely. I won't go into detail here. For the journey of this website in this regard, you can read about it in the Story section.

As mentioned earlier, we've already created a Git project inside the website folder. Now, the next step is to create a repository on GitHub and link the local Git project to the GitHub repository.

⚠️ Note: If you're new to using Git, you may need to perform some basic configurations. You can refer to the GitHub doc: set up Git to complete the following two steps:

1. Configure your Git username and email.
2. Configure either HTTPS or SSH authentication.

For further reading, you can explore the GitHub doc: about Git and the Git cheat sheet.

After registering and logging in to GitHub, you can follow the GitHub doc: create a repo to quickly create a repository. Here are the steps:

• Repository name: This is the name of your repository. I named mine as Limewolf.top.
• Description: You can provide a brief description for the repository, but it's optional.

• Repository visibility: I chose Public for the repository. The reasons are:

  1. All the technologies used for this site are open source. If I make any personalized changes to these technologies in the future, I want them to remain open source.
  2. The content I put on the website is meant to be publicly accessible.
• .gitignore: In a Git project folder, not all files need to be included in the Git repository. The gitignore file serves as a blacklist to exclude certain files.
  I chose None because I needed a completely new empty repository. I configured this file locally, and I'll upload it to the GitHub repository later. Depending on your needs, you can find various templates for this file. Here's the .gitignore file for this site (modified from themes\hugo-theme-monochrome\exampleSite.gitignore): GitHub, Onedrive.
• README file: For creating an empty repository, I didn't check this option. I'll manually create the README file locally.

• License: For creating an empty repository, I didn't check this option. The choice of license depends on the nature of your website's content and code. You can refer to this or Google for specific licenses. I chose the CC-BY-NC-SA 4.0 license (Creative Commons) for this site, because:

  1. All the technologies used for this site are open source. If I make any personalized changes to these technologies in the future, I want them to remain open source.
  2. I allow others to reuse, remix, and build upon my publicly shared articles, works, images, etc., under the condition of attribution and non-commercial use. I also hope that derivative works follow the same license.

  For more details about choosing a CC license version and using CC licenses, you can explore the CC license website and the detailed information about CC licenses.

In the local Git project directory of your website, you should configure the README.md, .gitignore, and license.txt files as needed. With PowerShell open in the current directory, you can use the following commands: Use
git status
to view the files that have been modified but not yet saved to Git. Use
git add .
to mark all the modified but unsaved files in the current directory. Use
git commit -m 'first commit'
to save the changes of the files to Git, with the message 'first commit' as a comment.\\

Finally, in GitHub, navigate to your newly created repository, and follow the prompts. In PowerShell, enter the following commands in sequence:

git remote add origin git@github.com:<Your-github-id>/<Your-repo>.git
git branch -M master
git push -u origin master

If everything goes smoothly, after you've completed the push in the command prompt, you can refresh the GitHub repository page. There, you should be able to see the website source files that you've just uploaded.

  git add
  git commit
  git push

Each time you need to update the website, you just need to follow these three steps: "Stage the changes to be saved", "Save the changes", and "Upload the changes".

Clearly, in the above method, I uploaded all the source code of the website to the git repository.

The reason for uploading the source code is as follows:

1. Multi-platform authoring: I want the platform to generate the website, so even if the device I'm currently using (such as a mobile phone, tablet, etc.) doesn't have the environment required to run the website, I can focus on content creation. I can upload the edited content to GitHub via Git or the web to update the webpage.
2. Backup and version control: One repository manages and backs up both the website's configuration files and content.

Of course, everyone's needs are different. Besides the method used by this site, you can also choose to only upload the files generated by Hugo in the /public directory of the website. This approach may offer stronger code and API privacy, and the repository would be more streamlined.

Alternatively, you can combine both approaches. Store configuration files in one repository and webpage files in another…

In conclusion, choose according to your own needs. Corresponding solutions can be found publicly available on the internet.

Register and log in to Vercel. Follow the instructions from Vercel doc: overview and Vercel doc: deploying git to create a Vercel project. Log in with your GitHub account and import the source code repository of your website.

1. Change the parameter of Configure Project -> Framework Preset to Hugo.
2. Add a key-value pair in Configure Project -> Environment Variables: key: HUGO_VERSION, Value: 0.117.0. (The version number should match the Hugo version you use.)
3. (This command is provided by the Monochrome theme)
   Check Configure Project -> Build Command -> Override: and change this parameter to hugo --environment production --minify.
4. (This command is provided by the Monochrome theme)
   Check Configure Project -> Development Command -> Override: and change this parameter to hugo server --environment production.
5. Press Deploy, grab a cup of coffee, and wait a bit. Your website will be deployed shortly.