小白教程 - 如何从0开始部署一个自己的静态网站

小政同学

于 2024-07-16 12:42:50 发布

阅读量401

点赞数 4

分类专栏：运维小白教程文章标签： nginx 运维 html5 javascript

本文链接：https://blog.csdn.net/m0_73909624/article/details/140444089

版权

运维同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

小白教程

1 篇文章 0 订阅

订阅专栏

1.准备环境

首先需要拥有一个云服务器（没有可以参考以下链接）
准备一个自己的静态网站
如何获取云服务器请参考：小白教程 - 如何拥有一台自己的阿里云服务器-CSDN博客
作者写的静态网站：lizi_time: 这是一个粒子时间的CSS效果，可以获取当前系统时间

2.使用xshell7工具连接阿里云服务器

xshell7工具不知如何下载可以参考：小白教程 - 如何拥有一台自己的阿里云服务器-CSDN博客

连接成功显示如下内容

3.更换系统下载源

阿里云源地址：阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区

选择对应版本更新源命令

CentOS7使用这个：wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo
Ubuntu命令如下：把这些源信息替换到/etc/apt/sources.list文件中

deb https://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse

deb https://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse

deb https://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse

# deb https://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
# deb-src https://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse

deb https://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
deb-src https://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse

然后更新一下系统的下载源

红帽/CentOS/Kylin系统更新命令：yum update
Debian/Ubuntu系统更新命令：apt update

我的系统是CentOS7，所以我使用yum update来更新源

提示这个内容，我们按y键表示允许安装这些内容

4.安装Nginx工具

Nginx一个用于连接我们和网站之间的一个通道，他并发性很强，模块也有一大堆，他主要是做静态网站的部署的，所以很适合我们~
详细的Nginx相关操作作者后续会继续更新

安装完成！

5.部署静态网站

部署操作

#1、创建/app/code/lzsz目录
mkdir -p /app/code/

#2、进入/app/code目录
cd /app/code/

#3、git命令拉取作者仓库的静态网站，（若是有自己的代码，也可以把他们放在一个目录中然后上传到/app/code/目录下）
git clone https://gitee.com/xiaoxing-classmate/lizi_time.git

#4、查看当前目录
ls -l 
#会有一个lizi_time的目录

#至此，部署静态网站代码就完成啦~

6.书写Nginx配置文件

Nginx子配置文件路径：/etc/nginx/conf.d/lizi_time.conf

#1.创建一个子配置文件
vim /etc/nginx/conf.d/lizi_time.conf

#2.进入界面，按i键表示输入内容，使用键盘<>^下键操作光标位置，光标的位置就是我们书写内容的位置

#3.将以下内容书写或粘贴进这个文件中

server {
   #指定浏览器访问的端口号（暂时使用80）
   listen 80;
   #指定接收的域名（暂时不需要知道如何配置）
   server_name time.test.cn;
   #指定访问日志路径
   access_log /var/log/nginx/lizi_time-access.log;
   #指定错误日志路径
   error_log /var/log/nginx/lizi_time-error.log;
   #指定代码目录
   root /app/code/lizi_time;

   #指定匹配规则，我们使用默认什么都不输入，/
   location / {
      #匹配代码目录下有个叫index.html的文件，必须要有，不然访问不了
      index index.html;
   }
}


#4.书写完毕后，在键盘按ESC键，在按:wq即可保存退出编辑

#5.检查我们配置文件是否书写正确
#命令：nginx -t    ，输出包含ok和successful表示配置无问题
 

#6.重启nginx，使配置生效
systemctl restart nginx