个人博客搭建流程

个人网页搭建流程

gitee仓库链接：https://gitee.com/kidwjb/studyNotes/tree/master/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91

前期准备

公网服务器搭建

我选择使用的是阿里云的ESC轻量云服务器，用于平时的个人博客搭建戳戳有余，并且阿里云服务器可以新用户免费试用一两个月，然后学生认证后还可以领取300元的券，再次白嫖一年，笔者已经成功白嫖了一年多的时间

网站管理

关于网站的维护管理，我选择使用宝塔面板，提供可视化界面以及快速配置网页，对于宝塔面板的使用可自行查阅相关资料

阿里云云服务器在创建时就可以选择下载带有宝塔面板的选项，也可以创建干净的服务器自己下载，可以在云服务器终端上输入bt命令进行宝塔面板相关配置

“`

kidwjb@iZ2vcf7jiom6zlfj9x99msZ:~/my-blog$ sudo bt[sudo] password for kidwjb:Sorry, try again.[sudo] password for kidwjb:==================================宝塔面板命令行====================================(1) 重启面板服务                  (8) 改面板端口                                   |(2) 停止面板服务                  (9) 清除面板缓存                                 |(3) 启动面板服务                  (10) 清除登录限制                                |(4) 重载面板服务                  (11) 设置是否开启IP + User-Agent验证             |(5) 修改面板密码                  (12) 取消域名绑定限制                            |(6) 修改面板用户名                (13) 取消IP访问限制                              |(7) 强制修改MySQL密码             (14) 查看面板默认信息                            |(22) 显示面板错误日志             (15) 清理系统垃圾                                |(23) 关闭BasicAuth认证            (16) 修复面板(检查错误并更新面板文件到最新版)    |(24) 关闭动态口令认证             (17) 设置日志切割是否压缩                        |(25) 设置是否保存文件历史副本     (18) 设置是否自动备份面板                        |(26) 关闭面板ssl                  (19) 关闭面板登录地区限制                        |(28) 修改面板安全入口             (29) 取消访问设备验证                            |(30) 取消访问UA验证               (32) 开启/关闭【80、443】端口访问面板            |(0) 取消                                                                           |====================================================================================请输入命令编号：
```

输入命令14可以查看如何登录到宝塔web界面，输入命令5可以修改密码

初次进入宝塔会推荐一键部署一些网站部署相关的工具，根据自己的喜好选择即可，并且不需要后续可以在软件商店等地方卸载

在宝塔面板web界面，选择网站选项，可以根据不同的架构添加自己的网站，我选择最基础的HTML搭建一个静态网页先，根据弹窗输入自己的工程名，IP以及域名等，然后创建成功就能访问自己搭建的网页了

现在我们就有一个公网IP服务器以及部署网页的能力了，但是想要一个比较完善的博客网站，肯定不能使用HTTP和IP裸奔，于是我们需要一个帅气的域名和SSL证书应以支持HTTPS

HTTPS支持

参考链接：阿里云服务器购买、域名注册、备案和域名绑定全流程指南，图文教程参考-阿里云开发者社区

首先我们要获取一个域名，关于域名这里有点小tips贴上：

域名本质上是指向服务器的 IP 地址的，也就是说，域名解析到的是服务器本身（更准确地说，是服务器的某个网络接口的公网 IP）。域名本身不需要 HTTPS 就能使用，但是否使用 HTTPS 取决于你提供的服务类型和用户访问方式。

域名的作用是把人类可读的名字（如 example.com）转换成 IP 地址（如 123.123.123.123）。
这个过程叫 DNS 解析，和 HTTPS 无关。
所以：没有 HTTPS，域名照样能解析、能用。

获取域名

这里使用阿里云平台上购买域名为例，进入域名与网站，可以直接点击查询自己想要的域名，然后系统会显示出域名是否注册，以及其他域名的价钱

不过似乎网页上的域名有点偏贵，本人实际在手机阿里云APP上搜索域名与网站，在其中有许多优惠活动，在上面基本上可以算是白嫖一个域名，比如笔者的博客网站kidwjb.top，不过域名都是有时限的，到期了就会回收

添加域名解析

在购买到自己的域名之后，就可以在管理页面看到自己的域名

我们点击其中的解析选项，便会跳转到域名解析界面，点击添加记录，然后在表单中输入IP，以及类地址，可以根据笔者的配置输入

如主机记录为A，记录类型为@

添加域名解析成功后，就可以访问域名查看是否为自己创建的网页

获取证书

这里笔者选择获取SSL证书，阿里云为个人提供免费的个人测试证书，这样就可以不用花钱去买一个了

进入数字证书管理服务，点击个人测试证书，再点击未部署

进入即可点击购买证书，一个账户一年可以买一次，我的账号已经买过了，在购买证书中填写你自己的域名

购买成功之后就可以在SSL证书管理看到自己的证书了

部署证书

关于证书的部署，有两种方式

使用阿里云平台部署，就如上图中点击右侧的部署按钮
在宝塔面板上部署

笔者选择在宝塔面板上部署，因为在宝塔面板上部署只需要复制粘贴就好了，详细的可以查看链接关于宝塔上部署证书的说明 – Linux面板 – 宝塔面板论坛

在这里分别输入证书pem和自己的私钥，即可完成部署操作

域名备案

由于证书是绑定域名的，而HTTPS想要公网使用域名那么就需要进行域名备案，否则就会出现下面警察叔叔拦截的尴尬

我们可以使用阿里云备案系统快捷备案，

我的域名当前已经在备案流程中了，并且备案也就是跟着流程填写个人信息等，这里就不赘述了

公安备案

在域名备案完成后，还需要进行最后的公安备案

域名备案完成后会收到邮箱，其中主要内容如下：

请登录阿里云ICP备案系统查看您的互联网信息服务备案号：

若您此次备案含有网站，请您按照《非经营性互联网信息服务备案管理办法》要求，在您的网站首页底部中间位置，放置您的网站备案号并链接至”http://beian.miit.gov.cn/“。
若您此次备案含有App，请在App的“设置”或“介绍“等显著位置标注备案编号。

根据上述前往填写备案即可

网站初建(自己开发前后端)

由于笔者并不是专业的前后端技术人员，也没有系统学习过前后端知识，所以对于前后端架构知之甚少，如有错误请大家谅解并及时帮忙指出😊

网站架构

由于之前做的项目用到过网页，当时使用的是nodejs，所以对这块熟悉一丢丢，对于个人博客网站也准备使用nodejs架构。

但是我们的云服务器肯定不能只是拿来做一个博客网站吧，或许未来有更多不同网站部署需求，那么这样的话直接使用域名主体当作一个网站入口就感觉有点不太对，笔者于是想要把博客网站单独用一个路径作为网站入口，例如笔者博客：kidwjb.top/blogs

但是由于只有宝塔部署网页然后后端编写js文件的经验，于是我想把前端网页就放在宝塔上代理，然后后端Node.js 托管 /blogs，但是和AI沟通一番后觉得有些麻烦，最后采用AI建议全部由Node.js托管/blogs，而我的顶端网页kidwjb.top仍然放在宝塔上代理

于是整体架构大致如下：

宝塔创建一个80端口网站kidwjb.top
修改宝塔面板上的Nginx配置，加上location /blogs 代理，通过本地回环到Node.js后端服务

路径	由谁提供	说明
`http://IP/`（或 `https://IP/`）	宝塔面板管理的静态网站	文件在 `/www/wwwroot/blogs/`（或其他目录），由 Nginx 直接托管
`http://IP/blogs`（或 `https://IP/blogs`）	你自己的 Node.js 服务	运行在 `127.0.0.1:3001`，通过 Nginx 反向代理接入

🔁 用户访问 /blogs 时，Nginx 把请求转发给你的 Node.js，但用户不知道背后是 Node.js，只看到干净的 URL。

大致流程

创建博客项目mkdir -p ~/my-blog/{public}cd ~/my-blog
初始化项目npm init -ynpm install express
编写后端服务server.js“`// ~/my-blog/server.jsconst express = require(‘express’);const path = require(‘path’);const app = express();const PORT = 3001; // 博客专用端口，避免冲突// 静态资源：托管前端文件（HTML/CSS/JS）app.use(express.static(path.join(__dirname, ‘public’)));// 示例 API（后续可扩展）app.get(‘/api/hello’, (req, res) => { res.json({ message: ‘Hello from your blog backend!’ });});// SPA 支持：所有未匹配路径返回 index.html（支持 Vue/React 前端路由）app.get(‘*’, (req, res) => { res.sendFile(path.join(__dirname, ‘public’, ‘index.html’));});// 启动服务（只监听本地，安全！）app.listen(PORT, '127.0.0.1', () => { console.log(✅ 博客服务已启动: http://127.0.0.1:${PORT});});
创建前端文件 public/index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的博客</title></head><body> <h1>🎉 欢迎来到我的动态博客！</h1> <p>本页面由 Node.js 后端提供，路径为 <code>/blogs</code></p> <button id="fetchBtn">获取 API 数据</button> <pre id="output"></pre> <script> document.getElementById('fetchBtn').onclick = async () => { const res = await fetch('/blogs/api/hello'); const data = await res.json(); document.getElementById('output').textContent = JSON.stringify(data, null, 2); }; </script></body></html>
找到宝塔生成的配置文件sudo ls /www/server/panel/vhost/nginx/# 找到对应你站点的 .conf 文件，比如：# blogs.conf 或 IP.conf编辑配置文件，在 server { ... } 块内添加以下内容（放在 location / 之后）# 博客动态服务：代理 /blogs 到 Node.jslocation /blogs { proxy_pass http://127.0.0.1:3001; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade';}这里让Node.js监听回环的3001端口
重载Nginx# 测试配置sudo /www/server/nginx/sbin/nginx -t# 重载（不中断服务）sudo /www/server/nginx/sbin/nginx -s reload