记:之前已经搭建过一次个人网站,但是由于续费服务器价格较贵,加上没有时间去打理,所以就暂时没有继续做,这次是碰上618云服务器打折,所以买了一年域名和云服务器,加上需要整理平时的笔记,优快云上太多复制粘贴的了,还是放在个人博客上,独享一份清静吧,也顺便记录下生活,目前网站已经可以正常访问,内容还需完善。
一、域名
1. 购买域名
网站肯定需要域名才能访问,我一直都是在阿里云上购买的,貌似会比其他厂商便宜一点?如果只是个人用或者平时玩一下的,可以买类似
.space .top
之类的顶级域名,购买和续费相对都便宜一点,没这方面考虑的,可以直接上.com .cn
。
2. 域名备案
域名购买之后,需要进行IPC备案,各家云服务器厂商都可以进行备案,本人在百度云、华为云都进行过备案,流程都差不多,需要上传的资料也都差不多,厂商审核一般都很快,管局审核可能得一周吧,需要注意的是,
域名在进行备案前,一定要仔细查看注意事项,不然会审核失败
。
二、云服务器
1. 购买云服务器
域名有了,但是还需要一个IP地址指向这个域名进行解析,这个域名才可以在公网上被访问,云服务器,各个厂家都有卖,腾讯云有一款98一年的也还行,不知现在这个活动还有没有,个人用,1核2G就够用了,当然没这些考虑的,可以直接上更好的,华为云一直都有在搞活动,做一些类似免费试用的,不着急买的话,可以先去试用下,一般是3个月的,本人在618便在华为云入手了一款,价格还行,操作系统建议CentOS,虽然可以重装系统,但是要收费的= =,本人手滑选了
Ubuntu
,不过也能用,问题不大。
三、环境搭建
1. 使用宝塔面板
使用宝塔面板,需要保证系统是干净的,由于本人也是第一次,之前使用的是Window系统,IIS + .asp,不需要宝塔,服务器一般是Linux的,标准配置是宝塔 + CentOS,所以也是自己摸索了一下。
2. 不使用宝塔面板
①安装图形化界面
由于云服务器安装后是终端界面,对于小白来说可能不太友好,所以可以安装下图形化界面,但是对于云服务器资源较少的来说,略微有点占用资源,设置用户密码什么的就不再赘述。
- 首先更新下
sudo apt-get update
sudo apt-get upgrade
- 依次执行
sudo apt-get install xinit
sudo apt-get install gdm
或者
sudo apt-get install gdm3
sudo apt-get install ubuntu-desktop
此时重启设备后就出现了桌面。
②远程连接
由于控制台的远程连接有点卡,且不好操作,所以可以使用第三方工具,不需要界面可以使用XShell、Putty,需要界面可以使用VNC、Windows自带的远程桌面,此处讲解的是Windows使用远程桌面进行连接,后续如果熟练,可以使用无界面连接,卸载掉图形化界面,节省资源。
a. 打开设置->共享
b. 打开允许远程桌面
c. 打开允许远程登陆
c. 使用远程桌面连接
在Windows电脑上,按住 Win + r 键
,输入mstsc
,输入你服务器的公网IP
,点击连接
输入用户名,密码
点击登陆即可。【报错信息查看后文注意事项 问题①】
③搭建LAMP环境
所谓 LAMP环境就是: Linux(操作系统) Apache(网站服务器) MySQL(数据库) PHP(语言环境)
还有一种是LNMP: Linux(操作系统) Nginx (网站服务器) MySQL(数据库) PHP(语言环境)
二者差异,请查看LAMP和LNMP的区别
a.安装apach2
sudo apt install apache2 -y
b.安装php
sudo apt-get install php -y
下载好后启动apache2
sudo service apache2 restart
然后打开Ubuntu 浏览器,输入:http://localhost
即可看到我们apache 默认的页面,此时说明本地站点已经搭建好了。
c.加载测试页面
进入Apache默认服务器主目录路径,这个目录放的是想要让别人看到的资源,如一张图片,一个html页面等
sudo rm -rf index.html
设置一个html页面小游戏,创建名称为game.html的页面
sudo vim game.html
按i键 进入编辑模式,复制以下html代码进去(复制全部)
<!DOCTYPE html>
<html>
<head><h4>Take it Easy!Please playing Game</h4></head>
<body>
<div></div>
<!-- 4个board -->
<div id="board1" style="position: absolute; width:80px; height:10px; left:420px;
top:555px; background-color: cadetblue;"></div>
<div id="board2" style="position: absolute; width:80px; height:10px; left:520px;
top:555px; background-color: cadetblue;"></div>
<div id="board3" style="position: absolute; width:80px; height:10px; left:620px;
top:555px; background-color: cadetblue;"></div>
<div id="board4" style="position: absolute; width:80px; height:10px; le