腾讯云 + 宝塔：网站搭建小白快速上手秘籍,包括实战-CSDN博客

本文链接：https://blog.csdn.net/zjmdsb/article/details/148109076

一.服务器免费获取

注册与登录

打开腾讯云官网：腾讯云产业智变·云启未来 - 腾讯。
点击右上角的 “免费注册”，按照提示完成注册流程。如果已有账号，直接登录。
登录后，点击控制台右上角的头像，选择 “实名认证”，按要求完成实名认证，这是获取免费服务器的必要步骤。

申请免费服务器

登录成功后，在首页或是专门针对新用户的推广页面中寻找 “免费体验” 或类似字样的入口。也可以直接访问腾讯云免费产品体验页面。
在免费试用专区找到云服务器，依据自己的情况选择个人认证来进行试用。
选择符合自己需求的云服务器配置，一般会有多种配置可供选择，如不同的 CPU、内存、存储和带宽组合。确认订单，点击 “立即支付”，由于是免费试用，费用为 0 元。

查看与管理服务器

支付成功后，点击页面右上角的 “控制台”，然后在左上角选择 “云服务器”，进入云服务器管理页面2。
在这里可以查看自己申请到的云服务器的相关信息，包括服务器的 IP 地址、状态等。如果需要使用 SSH 或者远程登录软件连接 Linux 实例，需要先重置密码。点击所属服务器进入详情页面，点击 “重置密码”，按照规则提示，输入新密码及确认密码，并同意强制关机，进行密码重置。
若想将刚刚免费获取的域名进行备份,请看服务器购买38rmb1年.

二.服务器购买

1.服务器购买

精选特惠拼团嗨购_腾讯云优惠活动

这里面有38RMB一年的特惠服务器,很有优惠

2.存在的疑问

为什么要购买这个?

购买原因:

I .因为购买一年可以"域名(如www.baidu.com)"备案,但是备案要求就是服务器时长超过3个月

II.国际域名注册规则和中国互联网络信息中心（CNNIC）的相关规定，新注册的域名在 60 天内是不允许进行转入操作的

III.也可以这样体验1个月,但是其他人只能通过ip地址对你的网页进行访问

三.网站实际搭建

1.免费网站模版下载

I.为啥要模版?

后续就更改html文件就可

II.pb2345网站里面提供了大量免费模版免费模板_PB2345模板网

1.通过刚刚获取到服务器,

找不到点击这个链接https://console.cloud.tencent.com/lighthouse/instance/index?rid=16

2.接下来,将服务器重装系统如图(更多下面重装系统)

建议和主播选择一样,方便宝塔的安装以及后续操作

3.打开对应的端口防火墙,允许宝塔端口通过,方便后续宝塔正常运行

建议先放开全端口

原因 8888 端口：宝塔面板访问默认端口，不过新版本安装后可能会使用随机的五位数端口作为默认入口。

下载好后安装强大的软件宝塔

宝塔面板下载，免费全能的服务器运维软件

干啥用？
管理服务器就像用手机 APP，点一点就能装网站环境（如 Nginx、PHP、MySQL）、建网站、管文件、防攻击。
有多简单？
不用记复杂命令，网页上点按钮就能完成搭建网站、备份数据、设置防火墙等操作，新手也能快速上手。
核心功能：
- 一键装环境（网站运行必备的服务器软件）。
- 轻松管网站（绑定域名、传文件、装 WordPress 等）。
- 实时看状态（CPU、内存用了多少，一目了然）。
- 安全防护（防黑客攻击、防数据泄露）。
  总结：宝塔就像服务器的 “智能管家”，帮你省心省力搞定技术活，无论是个人博客还是企业网站，都能用它管得明明白白
- 复制下面的代码

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

III.操作服务器

运行代码后输入 y 确认下载等待一会下图表示安装完成

复制外网 IPv4 网址打开输入账号密码

登录后

忘记密码怎么办?

使用推荐即可

打开后就会出现

接下来看视频

通过宝塔安装pb2345模版,访问后台管理

忘记密码怎么办?将作者的密码重置压缩包,通过视频那样

重置密码http://你的公网ip/resetpw.php

按要求输入你对应的信息即可重置

四.关于

1.里面文件夹分别有哪些

template更改这个文件夹里面的.html文件即可访问到自己写的html

apps：存放应用相关代码，像不同功能模块的业务逻辑代码，比如企业官网中新闻发布模块、产品展示模块的 PHP 代码，处理数据的增删改查及页面渲染逻辑。
config：存储系统和网站配置信息，涵盖数据库配置（数据库类型、地址、端口、用户名、密码）、网站基本信息配置（网站标题、关键词、描述）、服务器相关配置等。
core：核心代码文件夹，有框架核心类库、公共函数文件等。这些核心代码是系统运行基础，负责处理请求、路由分发、加载模块等关键操作。
data：用于存储数据，像缓存数据、日志数据、临时数据等。缓存数据可提升系统访问速度，日志数据记录系统运行和用户操作情况，方便排查问题。
doc：放置文档类文件，比如系统使用手册、开发文档、接口文档等，帮助开发者了解和使用系统。
m：可能存放模型相关代码，定义数据结构和数据操作方法，比如在开发电商功能时，商品模型代码定义商品数据字段及与数据库交互获取、更新商品信息的方法。
rewrite：或许包含 URL 重写规则相关代码或配置，用于实现友好的 URL 地址，利于 SEO 和用户记忆访问。
runtime：运行时产生的数据存放处，比如临时生成的文件、脚本运行中间数据等，运行结束后部分数据可能被清理。
static：存放静态资源，像图片、CSS 样式文件、JavaScript 脚本文件、字体文件等，是网站页面展示和交互的重要组成部分。
style：主要是网站的样式文件，控制页面布局、颜色、字体等外观显示，一般是 CSS 文件，也可能有 LESS、SASS 等预处理样式文件。
template：存放模板文件，定义网站页面结构和展示方式，通常是 HTML 文件，结合模板引擎语法，将数据动态展示在页面上。

五.更改为自己写的html

如跳动的心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>散开聚合的爱心</title>
    <style>
        .heart {
           width: 100px;
           height: 100px;
           position: relative;
           margin: 50px auto;
           background-color: red;
           transform: rotate(-45deg);
           animation: scatter-gather 2s infinite;
        }

        .heart::before,
        .heart::after {
           content: '';
           width: 100px;
           height: 100px;
           background-color: red;
           border-radius: 50%;
           position: absolute;
        }

        .heart::before {
           top: -50px;
           left: 0;
        }
        body {
           display: flex;
           justify-content: center;
           align-items: center;
           height: 100vh;
           margin: 0;
        }
        .heart::after {
           left: 50px;
           top: 0;
        }

        @keyframes scatter-gather {
           0%, 100% {
              transform: scale(1) rotate(-45deg); /* 初始和结束状态：正常大小 */
           }
           50% {
              transform: scale(1.5) translateY(-20px) rotate(-45deg); /* 中间状态：放大并散开 */
           }
        }
    </style>
</head>
<body>
    <!-- 标题 -->
    <div>
       <!-- <h1>散开聚合的爱心</h1>
       <p>这是一个散开和聚合的爱心动画</p> -->
       <div class="heart"></div>
    </div>
</body>
</html>

注意:这个适用于双端

template/default/wap 这里面的是手机端显示的哦

template/default/ 这里面是电脑端显示的

将上面的代码复制到 template/default/index.html 里面就可以看到跳动的心