从零开始搭建你的个人网站!

Wyyyy included in 网站开发

2025-09-03 2516 words 6 minutes

Contents

写在前面

Emm怎么开头呢…对，欢迎来到我的个人博客，这是我的第一篇文章——毕竟花一个下午搭好自己的网站，不写点东西也不太好…

所以就先复盘下这个博客是怎么诞生的(趁我还没忘了)，因为是第一次摸索，也遇到了不少问题，记录于此，如果有人看到这篇文章或许会有一点微小的帮助（？

(不过感觉不如问AI效率高啊，AI真是太好用了.jpg)

OK不扯远了，创建这个博客主要是受到好友@XTZ206的启发，使用了Hugo生成前端页面，同时他用Github Actions自动部署也对网站后续维护有很多帮助。

总之，让我们开始吧！

准备工作

需要用到的知识
当然，作为一个新手，完全可以边学边做，但是有一些基础知识会让你事半功倍：
- 基本的Linux命令
- Hugo静态网站生成器
- Git和Github
- AI使用
一台Linux服务器
开始搭建网站之前, 你需要一台Linux服务器来托管你的网站。可以选择云服务器提供商，如阿里云、腾讯云等，购买一台适合自己需求的服务器。
个人是在阿里云上购买的ECS，配置选最基本的2核2GB即可，适合新手入门，以下教程也均以阿里云为例。
有关购买具体步骤可以参考此文章
管理你的服务器
当你成功购买服务器后，可以在ECS控制台中找到你的服务器实例，你可以点击“远程连接”通过Workbench进入服务器终端，当然，个人认为这个方法的输入延迟比较高。
笔者建议在本地使用SSH直接连接服务器，当然，如果你拥有VSCode，可以安装Remote - SSH插件直接在VSCode中操作服务器，十分方便。
关于SSH连接的具体步骤可以参考此文章
特别提醒，记得在ECS控制器->安全组->入方向规则中检查是否添加了SSH的端口（默认22端口），否则无法远程连接。(最好也把80端口添加进去,方便http访问)
域名
目前，你的网站只能通过公网IP地址访问，你不能指望你的朋友记住那串数字。因此，购买一个域名是非常有必要的。你可以在阿里云、腾讯云等平台购买域名，选择一个简短易记的域名，有助于用户访问你的网站。
记得在购买时候仔细阅读续费政策，笔者就是被首年低价坑了/(ㄒoㄒ)/~~

部署LNMP

什么是LNMP？
LNMP是Linux, Nginx, MySQL, PHP的缩写，是一种常见的Web服务器环境。
在继续之前，我们需要了解什么是动态网站和静态网站。
- 动态网站是指网站的内容可以根据用户的请求而变化，通常需要后端服务器的支持，如PHP、Node.js等。动态网站可以提供个性化的用户体验，如用户登录、评论等功能，也就是说，页面内容是实时生成的。
- 静态网站是指网站的内容在服务器上是固定的，用户请求的页面是预先生成好的HTML文件，不会根据用户的请求而变化。
Hugo是一个快速的静态网站生成器，所以不需要用到MYSQL，PHP等动态网站技术。
但是，为了后续的扩展性和灵活性，建议还是部署一个完整的LNMP环境。
Aliyun为手动部署LNMP提供了详细的官方文档。
(笔者在根据文档操作时通过不了最后的PHP测试，发现是因为没有打开**端口80**…)

我只想要Nginx

等一下，什么是Nginx？
Nginx是一个高性能的HTTP和反向代理服务器，同时也是一个IMAP/POP3/SMTP代理服务器。简单来说，Nginx的作用是将客户端的请求转发到后端服务器，并将后端服务器的响应返回给客户端。
部署Nginx
首先，更新软件包列表并安装Nginx：
```
sudo yum update
sudo yum install nginx
```
安装完成后，启动Nginx并设置为开机自启：
```
sudo systemctl start nginx
sudo systemctl enable nginx
```
现在，你可以通过访问服务器的公网IP地址来检查Nginx是否成功安装。如果看到Nginx的欢迎页面，说明安装成功。

安装Hugo并建站

安装Hugo 和@XTZ206一样，我选择使用loveit主题，有关该主题的使用可以参考这里。
很不幸，笔者采用Windows进行本地开发，如果安装最新版(0.149)Hugo会出现模板问题，最终，笔者选择在本地安装v0.145.0 extended for Windows版本。
解压文件到你想要的路径，并将其添加到系统环境变量中，以便在命令行中直接使用Hugo命令。
之后，你可以通过以下命令来检查Hugo是否安装成功：
```
hugo version
```
如果看到Hugo的版本信息，说明安装成功。
创建新站点使用以下命令创建一个新的Hugo站点：
```
hugo new site <site-name>
```
将<site-name>替换为你想要的站点名称。创建完成后，你可以进入站点目录并添加主题：
```
cd <site-name>
git init
git submodule add https://github.com/loveit/loveit.git themes/loveit
```
配置Hugo,toml 在hugo.toml中，你可以配置站点的基本信息，如标题、描述、作者等。例如配置：
```
baseURL = "http://example.com/"
languageCode = "zh-CN"
title = "我的个人博客"
theme = "loveit"
```
第一篇博客！你可以使用以下命令创建一篇新的博客文章：
```
hugo new posts/my-first-post.md
```
这将在content/posts目录下创建一个名为my-first-post.md的文件。你可以使用文本编辑器打开这个文件，添加你的内容。
注意：在使用loveit主题时，建议将文章的front matter设置为YAML格式，并添加一些必要的字段，如标题、日期、标签等。例如：
```
---
title: "My First Post"
date: 2024-06-11T00:00:00+08:00
tags: ["personal", "blog"]
draft: false 
---
```
同样注意 loveit默认不显示draft为true的文章。
本地构建和预览站点 你可以使用以下命令在本地预览网站：
```
hugo server -D
```
这将在本地启动一个开发服务器，你可以通过访问http://localhost:1313来查看你的网站效果。

Github Actions自动部署

当然，你可以通过scp手动部署首先查看你网站文件在服务器上的路径(path to your site),也就是你的Nginx配置文件指向的root目录：

sudo grep root /etc/nginx/nginx.conf /etc/nginx/conf.d/*.conf

然后将本地public中的内容scp到服务器上：

scp -r public/* user@your-server:/path/to/your/site

或者通过Github Actions自动部署,你可以参考这篇文章来配置Github Actions实现自动部署。

结语

到这里，你已经成功搭建了一个个人博客网站，并且可以通过Github Actions实现自动部署。如果你在搭建过程中遇到任何问题，欢迎通过邮箱或者GitHub与我联系。