哈喽，大家好！我是海拥，今天我要和大家分享在华为云服务器上搭建网站的全过程。如果你也梦想拥有自己的网站，或者只是想学习如何在云端建立在线服务，那么你来对地方了。在这篇文章中，我将逐步引导你完成从服务器设置到网站建设的整个过程，不论你是初学者还是有一定经验，都能够轻松跟随。让我们一起开始这个激动人心的旅程吧！
首先我在华为云官网领取了一个2核2G 3M云耀云服务器L实例
用完券后只需要0.03元
一、初始化宝塔面板
1、设置服务器密码
购买云耀云服务器L实例后，先设置服务器密码并妥善保管。
2、配置安全组
访问应用需开通8888端口、访问phpMyAdmin数据库需开通9090端口、访问MySQL数据库需开通3306端口。
点击添加规则，然后输入端口号即可，这里我已经添加了8888端口，然后可访问应用：http://你的公网ip:8888/
3、获取宝塔面板登录账号及密码
获取宝塔管理界面的管理员用户名及密码。需登录云服务器，运行sudo cat /credentials/password.txt 命令行。
4、安装基础组合软件
选择LNMP（推荐）或者LAMP基础组合软件，单击“一键安装”，等待安装直至结束。
后续也可以在“软件商店”中自行选择并安装其他软件。
然后等待几分钟任务安装完成即可。
二、网站搭建流程
1、初始化网站
在宝塔面板后台点击网站，添加站点
如果有自己的域名可以解析一下，
放开80端口
此时已经可以通过域名 youxi.haiyong.site/ 访问网站
添加 Let's Encrypt SSL证书
2、上传代码
HTML 代码
HTML代码创建了一个前端案例作品合集页面，展示了各种类型的案例作品链接，并包括了访客统计功能。
在
中，页面分为左侧和右侧两个部分。
左侧部分：
<div class="musour-left">定义了左侧区域。- 包括了网站标题、子标题、描述、筛选按钮等信息。
<h2>访客明细</h2>标题。<script id="LA-DATA-WIDGET" ...>包含了一个用于访客统计的JavaScript脚本。<p>本站共有案例 232 个</p>显示了案例数量。
右侧部分：
<div class="musour-right">定义了右侧区域。- 包含了一系列作品的链接，每个链接包括图标和标题。
- 最后引入了一些JavaScript库和脚本文件，用于页面交互。
HTML部分代码：
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>海拥作品合集-游戏、工具、动画、网站模板</title> <link rel="shortcut icon" href="https://haiyong.site/img/favicon.png"> <meta name="description" content="前端案例作品合集展示页面（100+网页游戏、工具、动画、网站模版等）。" /> <meta name="keywords" content="前端,案例,作品,合集,展示,页面,网页,游戏,工具,动画,网站,模版" /> <link rel="stylesheet" href="./style.css"> </head> <body> <body><div class="musour"> <div class="musour-left"> <div class="musour-title"> <a href="https://haiyong.site" target="_blank"><div>HY</div> 资源库</div></a> <h1>海拥百宝箱</h1> <a href="https://code.haiyong.site" target="_blank"><div class="musour-title-2">获取源码</div></a> <div class="musour-blurb"> 由<b><a href="https://haiyong.site/moyu" target="_blank">游戏</a></b>、<b><a href="https://tools.haiyong.site/" target="_blank">工具</a></b>、<b><a href="https://haiyong.site/demo" target="_blank">动画</a></b>和<b><a href="https://haiyong.site/moban" target="_blank">网站模板</a></b>组成。点击右边图标可<b>直接进入</b>.使用以下按钮<b>筛选</b>图标进行选择。 </div> <div class="musour-filters filters"> <div class="button-group js-radio-button-group" data-filter-group="appearance"> <button class="button is-checked" data-filter="">展示所有</button> <button class="button" data-filter=".game">游戏</button> <button class="button" data-filter=".tools">工具</button> <button class="button" data-filter=".demo">动画</button> <button class="button" data-filter=".website">网站模版</button> </div> <h2>访客明细</h2> <script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/JxVJPIpe3UAQqoDx/quote.js?theme=0&col=true&f=12&display=0,1,1,1,1,1,1,0"></script> <p>本站共有案例 232 个</p></div> </div> <div class="musour-right"><div class="grid"> <a href="https://haiyong.site/moyu/sgbwz/" target="_blank"><div class="musour-icon game"> <img src="https://haiyong.site/img/moyu/sgbwz.png"> <div><b>仿燃烧的蔬菜《水果保卫战》</b> </div> </div></a> <a href="https://haiyong.site/moyu/bdxpg/" target="_blank"><div class="musour-icon game"> <img src="https://haiyong.site/img/moyu/bdxpg.png"> <div><b>暴打小苹果</b> </div> </div></a> <a href="https://haiyong.site/moyu/bdsjm/" target="_blank"><div class="musour-icon game"> <img src="https://haiyong.site/img/moyu/bdsjm.png"> <div><b>暴打神经猫</b> </div> </div></a> <a href="https://haiyong.site/moyu/bbjx/" target="_blank"><div class="musour-icon game"> <img src="https://haiyong.site/img/moyu/bbjx.png"> <div><b>马走日-步步惊心</b> </div> </div></a> <a href="https://haiyong.site/moyu/dmtjd/" target="_blank"><div class="musour-icon game"> <img src="https://haiyong.site/img/moyu/dmtjd.png"> <div><b>2.5D 游戏地面突击队</b> </div> </div></a> <a href="https://haiyong.site/tools/age-calculator.html" target="_blank"><div class="musour-icon tools"> <img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230326010158.png"> <div><b>年龄计算器</b> </div> </div></a> <a href="https://haiyong.site/tools/wenben.html" target="_blank"><div class="musour-icon tools"> <img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230328235142.png"> <div><b>文本转换为文件</b> </div> </div></a> <a href="https://code.haiyong.site/sousuotijiao/" target="_blank"><div class="musour-icon tools"> <img src="https://haiyong.site/img/img-blog.csdnimg.cn/20230725104322.png"> <div><b>搜索引擎sitemap提交入口</b> </div> </div></a> <a href="https://haiyong.site/tools/dice.html" target="_blank"><div class="musour-icon tools"> <img src="https://haiyong.site/img/img-blog.csdnimg.cn/b5428ba79b604e3a94283f54a98ed052.png"> <div><b>自定义骰子</b> </div> </div></a> <a href="https://haiyong.site/tools/todolist.html" target="_blank"><div class="musour-icon tools"> <img src="https://haiyong.site/img/img-blog.csdnimg.cn/15ae3051bc3a482480e8d49bc9365de6.png"> <div><b>待办事项清单</b> </div> </div></a> <a href="https://haiyong.site/tools/weather.html" target="_blank"><div class="musour-icon tools"> <img src="https://haiyong.site/img/img-blog.csdnimg.cn/94dae70f1cfa440285f076a0aa4725f4.png"> <div><b>天气实况</b> </div> </div></a> <a href="https://haiyong.site/demo/hacker/" target="_blank"><div class="musour-icon demo"> <img src="https://code.haiyong.site/wp-content/uploads/2022/11/hacker.png"> <div><b>黑客入侵</b> </div> </div></a> <a href="https://haiyong.site/demo/aixin/" target="_blank"><div class="musour-icon demo"> <img src="https://code.haiyong.site/wp-content/uploads/2022/11/aixin.png"> <div><b>爱心特效</b> </div> </div></a> <a href="https://haiyong.site/demo/yinghua.html" target="_blank"><div class="musour-icon demo"> <img src="https://haiyong.site/img/img-blog.csdnimg.cn/9d3630a9fb004ef4aee5a8c5faee4bc0.png"> <div><b>樱花</b> </div> </div></a> <a href="https://haiyong.site/demo/xiaxue" target="_blank"><div class="musour-icon demo"> <img src="https://haiyong.site/img/img-blog.csdnimg.cn/c522bb55cc4040a2bed8b86dbe8dd2de.png"> <div><b>下雪</b> </div> </div></a> <a href="https://haiyong.site/moban/9" target="_blank"><div class="musour-icon website"> <img src="https://code.haiyong.site/wp-content/uploads/2022/10/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20221015215429-300x141.png"> <div><b>婴儿用品商店</b> </div> </div></a> <a href="https://haiyong.site/moban/40" target="_blank"><div class="musour-icon website"> <img src="https://code.haiyong.site/wp-content/uploads/2023/06/20230605104722-700x465.png"> <div><b>html在线商城网站模板</b> </div> </div></a> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7056167681359419" crossorigin="anonymous"></script> </div></div> </div> <script src="https://code.jquery.com/jquery-1.7.2.js"></script> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> <!-- partial --> <script src="./script.js"></script> </body> </html>
CSS 代码
:root 定义了一些全局CSS自定义属性，用于存储颜色、字体等值，以便在整个样式表中重复使用。
- body 样式设置了页面的边距和背景颜色。
- a 样式设置了链接的文本装饰为无，即去掉下划线。
左侧区域（.musour-left）的样式：
- 设置了文本颜色、字体和其他样式属性。
- .musour-title 设置了标题的样式，包括字体大小和行高。
- .musour-title div 设置了标题中的字母的样式，包括字体大小、颜色和行高。
- .musour-title-2 设置了子标题的样式，包括背景渐变、字体粗细、字体大小等。
- .musour-blurb 设置了描述文本的对齐方式和行高。
- .musour-filters 设置了筛选按钮区域的样式，包括滚动条样式。
- .musour-color 设置了颜色按钮区域的样式，包括按钮的样式。
右侧区域（.musour-right）的样式：
- 设置了背景渐变、边框半径、内边距等样式属性。
- .musour-icon 设置了案例图标区域的样式，包括背景颜色、内边距、边框半径等。
CSS 完整代码：
:root { --accentOne: #A3B29F; --accentTwo: #D1D3B9; --accentThree: #D2BD76; --background: #eeeeee; --backgroundTwo: #e5e5e5; --text: #555555; --title: Oranienbaum, serif; --body: Open Sans, sans serif; } body { margin:0px!important;background-color:var(--background); } a { text-decoration:none!important; } .musour { display:grid;height:100vh;width:100vw;grid-template-columns:280px auto;overflow-y:hidden; } .musour-left { padding:50px;color:var(--text);font:12px var(--body);display:flex;height:calc(100vh - 100px);flex-direction:column; } .musour-title { font:40px var(--title);line-height:40px;padding-top:3px; } .musour-title div { font-size:99px;margin-left:-2px;line-height:80px;color:#75d25d; } .musour-title-2 { background:linear-gradient(to bottom left,var(--accentOne),var(--accentTwo));font:700 10px var(--body);line-height:10px;padding:14px 0px 16px 4px;text-align:center;color:var(--background);letter-spacing:4.2px;border-radius:10px;margin:15px 0px 30px 0px;cursor:pointer;transition:.3s all; } .musour-title-2:hover { transform:scale(1.05);opacity:.8; } .musour-blurb { text-align:justify;line-height:18px; } .musour-filters { margin-top:30px;flex-grow:1;overflow:auto; } .musour-filters::-webkit-scrollbar-thumb { border-left:solid 15px var(--background);background:linear-gradient(to bottom,var(--accentOne),var(--accentTwo)); } .musour-filters::-webkit-scrollbar { width:16px; } .musour-filters div { display:flex;flex-direction:column; } .musour-filters h1 { background-color:var(--backgroundTwo);font:700 10px var(--body);line-height:10px;padding:14px 0px 16px 4px;text-align:center;color:var(--text);letter-spacing:4.2px;border-radius:10px;margin:20px 0px;text-transform:uppercase;line-height:12px; } .musour-filters button { margin-top:0px;border:none;background:transparent;text-align:left;padding:0px;cursor:pointer;font:12px var(--body);color:var(--text);line-height:20px;transition:.3s all; } .musour-filters .is-checked { font-weight:700!important; } .musour-filters button::before { content:'+';color:var(--accentOne);padding-right:10px; } .musour-filters button:hover { color:var(--accentOne); } .musour-color { flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:8px; } .musour-color button { height:20px;width:20px;background:linear-gradient(to bottom left,var(--accentOne),var(--accentTwo));border-radius:3px; } .musour-color .red { background:#B45758!important; } .musour-color .orange { background:#AE8657!important; } .musour-color .yellow { background:#AAA95F!important; } .musour-color .green { background:#5C916B!important; } .musour-color .blue { background:#6599B0!important; } .musour-color .purple { background:#8564AD!important; } .musour-color .pink { background:#B9619D!important; } .musour-color .brown { background:#735E45!important; } .musour-color .black { background:#555555!important; } .musour-color .gray { background:#bbbbbb!important; } .musour-color .white { background:var(--backgroundTwo)!important; } .musour-color button::before { display:none; } .musour-right { background:linear-gradient(to bottom left,var(--accentOne),#41c8fb);border-radius:50px 0px 0px 0px;padding:20px;min-width:490px;box-shadow: 0px 0px 20px rgba(44,44,44,.1);box-shadow:none; } .musour-right .grid { max-height:calc(100vh - 15px);overflow:auto; } .musour-right .grid::-webkit-scrollbar-thumb { background-color:var(--background);border-radius:5px; } .musour-right .grid::-webkit-scrollbar { width:10px; } .musour-icon { background-color:var(--background);padding:10px;border-radius:15px;width:100px;margin:0px 25px 25px 0px;box-shadow: 5px 5px 10px -3px rgba(44,44,44,.05);height:110px;transform:scale(1);transition:.3s all; } .musour-icon img { height:70px;width:100px;border-radius:5px 5px 0px 0px;margin-bottom:0px!important;display:block;/* filter:grayscale(75%) contrast(100%); */opacity:1;transition:.3s all; } .musour-icon div { border-radius:0px 0px 5px 5px;background-color:var(--backgroundTwo);padding:10px;font:11px var(--body);color:var(--text);text-transform:lowercase;line-height:13px;font-style:italic;height:20px;display:flex;flex-direction:column;justify-content:center; } .musour-icon div b { display:block;font-style:normal!important;color:var(--accentOne);text-transform:uppercase; } .musour-icon:hover { transform:scale(1); } .musour-icon:hover img { opacity:1;filter:grayscale(0%) contrast(100%)!important; }
JS 代码
- 初始化了Isotope插件，将.grid元素中的.musour-icon作为项目，并设置筛选功能。
- 创建了一个filters对象，用于存储筛选条件。
- 当筛选按钮被点击时，通过点击事件处理程序更新filters对象的值，并将筛选条件应用于Isotope插件。
- 在每个筛选按钮组上添加事件监听器，以便在点击按钮时切换样式。
最后，concatValues函数用于将filters对象的值连接成一个用于Isotope筛选的字符串。
这些CSS和JS代码一起实现了页面的样式和筛选功能。
JS 完整代码：
// 初始化 isotope var $grid = $('.grid').isotope({ itemSelector: '.musour-icon' }); var filters = {}; $('.filters').on( 'click', '.button', function( event ) { var $button = $( event.currentTarget ); var $buttonGroup = $button.parents('.button-group'); var filterGroup = $buttonGroup.attr('data-filter-group'); filters[ filterGroup ] = $button.attr('data-filter'); var filterValue = concatValues( filters ); $grid.isotope({ filter: filterValue }); }); $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function( event ) { $buttonGroup.find('.is-checked').removeClass('is-checked'); var $button = $( event.currentTarget ); $button.addClass('is-checked'); }); }); function concatValues( obj ) { var value = ''; for ( var prop in obj ) { value += obj[ prop ]; } return value; }
将以上HTML、CSS、JS 上传到网站文件目录中
到此，网站已搭建完毕，在线访问地址：youxi.haiyong.site
总结
通过这篇文章，我们已经成功地搭建了一个强大的网站，而且整个过程简单易懂。首先，我们在华为云上获得了一个强大的云服务器，而且只需支付极少的费用。接着，我们学会了初始化宝塔面板，设置服务器密码，配置安全组，以及安装基础组合软件。最后，我们建立了一个漂亮的网站，展示了各种案例作品，同时还加入了筛选功能，使网站更具互动性。
无论是想要创建个人博客、展示作品集，还是构建电子商务平台，这篇文章都为你提供了必要的步骤和技能。希望你能够充分发挥创造力，打造出独具特色的网站，与世界分享你的想法和作品。继续努力，网络世界将为你敞开大门！
