Hugo + PaperMod Establish website

0.Brief description

Writing Methods

1. local computer connects to the server via vscode’s remote ssh, then writes the blog in vscode, then compiles it via hugo when it’s done
2. sometimes I write on my local computer, push it to github, and then pull the code from the server and compile it with hugo.

The rough order of events is as follows (a quick diagram)

1.Environmental information

2.Deployment method

Foolproof site building through 1Panel panel

About update

Install SSH on both local computer and server, adjust website (new/updated) via Visual Studio Code + SSH on local computer.

3.About Backup

Backups are mainly through Github private storage, blog images are stored on the server, and then set to automatically back up once a week.

4.Website prelude (preparation)

4.1 Github

1. Visit Github and register for an account.
2. Create a new personal repository (it is recommended to create a private repository)

4.2 local computer

The process of downloading and installing Git and Visual Studio Code is very simple, just follow the prompts in the ‘Installation screen’ and click ‘Next’, so I won’t go into details.

4.2.1 SSH

Windows 11 installs SSH by default, if you are not sure you can use the following command to confirm.

Open PowerShell as administrator and run

Right mouse click on the Win icon in the bottom left corner of the screen to see “Terminal Administrator”

# Checking the Installation Status of OpenSSH
Get-WindowsCapability -Online | Where-Object Name -like  'OpenSSH*'

If SSH is already installed, the terminal will print:

# An OpenSSH.Client status of Installed means that the OpenSSH client has been successfully installed.
# If the status is NotPresent, then it is not yet installed.
Name  : OpenSSH.Client~~~~0.0.1.0
State : Installed

Name  : OpenSSH.Server~~~~0.0.1.0
State : NotPresent

If it is not installed, it can be installed with the following command

Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0

4.2.2 Hugo

There are many ways to install Hugo, but I chose the Prebuilt binaries installation method.

1. Download hugo_extended_withdeploy_0.145.0_windows-amd64.zip
2. Extract the package to D:/hugo/hugo_extended_withdeploy_0.145.0, create a new directory if you don’t have one.
3. Add the directory to the PATH environment variable.
4. Open a terminal and type hugo version to verify that the installation was successful.

hugo version

If the installation is successful, it will print:

hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended+withdeploy windows/amd64...

One more thing: if there is no particular Hugo bug, it is recommended not to upgrade the Hugo version.

Because Hugo’s authors don’t consider whether to ‘fit’ with commercially available themes when iterating Hugo, if you update Hugo’s version, it may appear that the blog won’t compile (generating public folders)

4.2.3 Github Key Pairs

（1）Open a terminal and enter the following command to generate the key

ssh-keygen -t ed25519 -C "your-email@example.com"

（2）View and copy the public key (copy the long string inside)

（3）Login to GitHub and add SSH key –> Click New SSH key –> Fill in a name (e.g.: mykey), then paste the content of the public key you just copied into it and save it.

（4）Open a terminal and enter the following command to verify completion

ssh -T git@github.com

If the configuration is OK, it will print something similar:

Hi Your GitHub username! You've successfully authenticated, but ...

4.3 Server

4.3.1 Installing 1Panel

1Panel official documentation is quite clear, you can check it, if you have Dabian 12 system like me, you can directly refer to the following installation steps.

(1) Make sure that the Debian 12 system is brand new (reinstalled)

(2) Enter the following installation commands in the command console and wait patiently

curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh

During the installation process, you will be asked to choose the language, select Chinese Chinese (Simplified) that is, the rest can be directly default (press enter)

After successful installation, please record your login information (address, panel user, panel password).

[1Panel 2025-04-27 09:01:50 install Log]: ======感谢您的耐心等待，安装已完成====== 
[1Panel 2025-04-27 09:01:50 install Log]:  
[1Panel 2025-04-27 09:01:50 install Log]: 请使用您的浏览器访问面板:  
[1Panel 2025-04-27 09:01:50 install Log]: 外部地址:  http://199.245.100.177:27951/97c02939d9 
[1Panel 2025-04-27 09:01:50 install Log]: 内部地址:  http://199.245.100.177:27951/97c02939d9 
[1Panel 2025-04-27 09:01:50 install Log]: 面板用户:  2cc9b06c55 
[1Panel 2025-04-27 09:01:50 install Log]: 面板密码:  2538407029 
[1Panel 2025-04-27 09:01:50 install Log]:  
[1Panel 2025-04-27 09:01:50 install Log]: 官方网站: https://1panel.cn 
[1Panel 2025-04-27 09:01:50 install Log]: 项目文档: https://1panel.cn/docs 
[1Panel 2025-04-27 09:01:50 install Log]: 代码仓库: https://github.com/1Panel-dev/1Panel 

[1Panel 2025-04-27 09:01:50 install Log]:  
[1Panel 2025-04-27 09:01:50 install Log]: 如果您使用的是云服务器，请在安全组中打开端口 27951 
[1Panel 2025-04-27 09:01:50 install Log]:  
[1Panel 2025-04-27 09:01:50 install Log]: 为了您的服务器安全，离开此屏幕后您...
[1Panel 2025-04-27 09:01:50 install Log]:  
[1Panel 2025-04-27 09:01:50 install Log]: ======

(3) Open external access ports (as needed), for example, the above port is 27951.

(4) Login to the 1Panel panel and install OpenResty.

Click Confirm and wait for the installation to complete…

4.3.2 Install SSH

(1) Open a terminal and update the software source

sudo apt update

(2) Install OpenSSH Server

sudo apt install openssh-server

(3) Check the SSH status (to make sure the SSH service is running)

sudo systemctl status ssh

(4) Start SSH

sudo systemctl enable ssh

(5) Set up a bootloader

sudo systemctl enable ssh

Other commands

# Restart the service (used after modifying the configuration)
sudo systemctl restart ssh

4.3.3 Installing Git

(1) Update the package index

sudo apt update

(2) Install Git

sudo apt install git

(3) Verify the installation

git --version

(4) Configure Git (username, email)

git config --global user.name "yourName"
git config --global user.email "yourEmail@example.com"

4.3.4 Install Hugo

（1）Install

wget https://github.com/gohugoio/hugo/releases/download/v0.145.0/hugo_extended_0.145.0_Linux-64bit.tar.gz

（2）Decompression (in digital technology)

tar -xzf hugo_extended_0.145.0_Linux-64bit.tar.gz

（3）Installation to the system path

sudo mv hugo /usr/local/bin/

（4）Verify that the installation was successful

hugo version

4.3.5 Github key pairs

Refer to 4.2.3 to configure the key pair.

Tip: If you are a root account, the path to the generated key pair is usually /root/.ssh.

4.4 vscode SSH login

What you are doing here is to use a key pair to log in securely.

4.4.1 Local computer

（1）vscode install remote ssh extension

（2）PowerShell Generating Key Pairs

ssh-keygen -t rsa -b 4096 -C "my_hugo_papermod_blog"

Description:

• -t rsa: indicates that the RSA algorithm is used.
• -b 4096: the length of the key is 4096 bits.
• -C: you can fill in the comment to identify the key.

You will be prompted to enter the save path:

Enter file in which to save the key (/home/youruser/.ssh/id_rsa):

Enter directly to use the default path (it is recommended to use the default)

You will then be prompted to set the key passphrase (which can be left empty for easy, secret-free login)

Enter passphrase (empty for no passphrase):

（3）Generated documents

(It is recommended to change the filename, as there may be other applications where you will generate key pairs later to avoid confusion)

4.4.2 Server

Upload the public key:

（1）Go to /root/.ssh and create a new authorised_keys file.

（2）Open the authorised_keys file, copy and paste the public key into it, and save it.

Note:

1. If there is no authorized_keys file, you need to create it manually, and then copy and paste the public key generated by your local computer into it.
2. If there is an authorized_keys file, copy and paste the public key generated by your local computer, that is, append the public key.

4.4.3 vscode ssh connection test

（1）Open vscode on the local computer, click on the lower left icon, select Connect to Host, and click on the Connect to Host icon**.

（2）Option +Add new SSH host, then enter Server IP !

（3）Select the ssh configuration file, open the configuration file, and modify the configuration file

Host 1.1.1.1
  HostName 1.1.1.1
  User root
  IdentityFile "C:/Users/donghai/.ssh/id_rsa_my_hugo_papermod_blog"

• Host, HostName: replace it with your own IP.
• IdentityFile: fill in the path of the private key.

（4）Click the icon in the lower left corner of ****, select Connect to Host, select the host you just added

If xxx fingerprints appears, select [Yes] then

If everything goes well, the icon in the lower left corner will show the IP address of the host you are currently connected to.

5. Building a website

5.1 Github Private Position Building

（1）Log in to Github, and create a private bin.

（2）Fill in the name of the repository, tick private, tick the README.md file, and finally click Create repository.

（3）Clone to local computer

In D drive directory, run ‘Terminal’ to clone the project (in other drive is also OK, depends on your needs)

# Fill in your own warehouse address
git clone https://github.com/rickeygong/gdh-papermod-blog.git

REP Url:

5.2 Hugo new site

（1）In the D drive directory, run ‘Terminal’ and enter the following command to create a blog

# gdh-papermod-blog --> Write your own warehouse name
hugo new site gdh-papermod-blog

（2）Refer to hugo-PaperMod installation document for installation (very detailed)

（3） Once the blog is ready, submit it to the GitHub repository

git add .
git commit -m "Feat: Blog build"
git push origin main

5.3 Adding a blog to the server

（1） Login to 1Panel panel –> Click Website in the menu bar –> Click Create –> Select Static Website –> Fill in Primary Domain Name (domain name if you have domain name, IP if you don’t have domain name) –> Fill in Description (as needed) –> Click Confirm.

（2）Open website directory –> delete all files in the directory (normally there are only 2 files: 404.html and index.html)

Record the path, we will clone the blog to this path later.

My site path is /opt/1panel/apps/openresty/openresty/www/sites/199.245.100.177/index

（3）Set the host, fill in the IP and root password –> Click Connect Test –> Click Confirm.

（4）Open Terminal

（5）Enter the site path –> Enter the command to clone the blog project (5.2 has been uploaded to Github)

# Access to the site path
cd /opt/1panel/apps/openresty/openresty/www/sites/199.245.100.177/index

# Clone the project (replace with your own project clone address)
git clone https://github.com/rickeygong/gdh-papermod-blog.git

（6）Add a new blog-imgs folder to store images used in blog posts.

（7）Compile the blog: generate public file, open terminal –> go to blog project –> type hugo.

# Enter the blog project
cd /opt/1panel/apps/openresty/openresty/www/sites/199.245.100.177/index/gdh-papermod-blog

# Enter `hugo`
hugo

（8）Configure the Web Directory path (important)

Click on Configuration

Select gdh-papermod-blog/public in the run directory –> click Save Reload.

（9） Configure ‘blog-imgs’ mapping (important)

Because the server only exposes the public folder, and the blog-imgs folder is listed alongside public, the server can’t find blog-imgs at all when accessing it, resulting in a 404, so we need to change the server configuration to map it separately.

1. Click Website.
2. In the Actions column, click Configuration. 3.
3. Click Configuration Files.
4. In the server configuration block, add location /blog-imgs/ after the root line.

root /www/sites/199.245.100.177/index/gdh-papermod-blog/public; 
location /blog-imgs/ {
  alias /www/sites/199.245.100.177/index/blog-imgs/;
}
error_page 404 /404.html; 

6.Access

If all goes well, visit the set address in your browser and you will see your blog!

7.About Optimisation/Adjustment

For space reasons, I’ll start a separate post to document each optimisation/adjustment or blog tweak going forward, so please refer to it:

8. Conclusion

If you have encountered problems in the deployment process do not know how to solve (provided that you have thought about),

you can contact me by e-mail or WeChat, build a station, figure a fun, make a friend, help each other!