一文搞定网站上线:从零到一的实战指南

本文最后更新于:9 个月前

岁月或许会改变我们的容颜,但那份对生活的热爱与追求,却会愈发坚定。

  • 如何快速上线一个网站,让别人能访问?

正文

静态网站

CodeOpen

  • 在线写 HTML+CSS+JS 代码,即时查看效果:

image-20230730231243469

  • 在视图选项中,选择 Full Page View 还可以开启新网页查看(需验证邮箱):

image-20230730231501126

image-20230730231155766

  • 你可以复制这个网址,发送给你的好朋友,大家都能看到你的网站了

Vercel

GitHub Pages

🔥 详情可见《大道至简:快速搭建博客与文档站点的终极指南 2.0》中的 Vdoing 文档站点部署(2023/12/15 午)

  • Github 不想多说,太他妈吃网速了,访问慢不说,好不容易推送成功,还老是显示部署失败,发了十几条邮箱信息都没咋注意:

image-20231128175139846

image-20231128175234867

  • 呐,上面就是 Github Pages 服务了,太卡了,部署不了,不过网速好的话是没有问题的(2023/11/28 晚)

  • 这里放一个部署成功的案例吧,是我第一次成功部署的个人网站:回忆如初 (deng-2022.github.io)

Gitee Pages

  • 新建一个仓库,开启 Pages 服务

image-20230909142132664

  • 将本地的静态网页代码上传至仓库,注意页面文件命名为 index.html

image-20230909142249799

  • 更新 Gitee Pages 服务,访问网站

image-20230909142140015

  • 现在就可以分享这个网址,让别人欣赏你的网页了~

image-20230909142430828

七牛云

  • 注册登录七牛云,在空间管理下,可以查看空间占用情况:

image-20230731184047632

  • 创建一个空间,直接上传文件:

image-20230731183945926

Nginx

🥣 推荐阅读:nginx 配置静态静态资源服务器-腾讯云开发者社区-腾讯云 (tencent.com)

  • 之前尝试了 Nginx 的反向代理和负载均衡,了解了相关配置,今天尝试一下使用 Nginx 部署静态网站

Nginx 的下载安装

  • 有关 Nginx 的详细的下载安装步骤,可以在《Nginx 入门指南:理解、配置和优化》一文中了解学习

🥣 这里仅给出 windows 版本的下载地址:

Nginx 官网下载:nginx: download

准备静态页面文件

  • 使用 HTML + CSS 编写一个简单的静态页面,这边静态文件已经准备好了
  • nginx.exe 同级目录下,新建一个文件夹 memory,并将编写好的静态文件放入该文件夹中

image-20231215133850996

image-20231215133938861

做好相关配置

  • 在 nginx.conf 同级目录下,新建一个 memory.conf 配置文件:

image-20231215131207907

  • 在 memory.conf 配置文件中,作如下配置:

image-20231215131236902

检查配置是否成功

  • nginx 目录下,执行以下命令:
1
nginx -t
  • 看到如下结果,则说明 nginx.conf 配置文件配置无误

image-20231215131354326

启动 Nginx,部署页面

  • nginx 目录下,继续执行以下命令,启动 nginx
1
nginx

image-20231215131311759

访问静态网站

  • 根据 memory.conf 配置文件中的配置内容,使用本机 ip 地址 + 目的端口号访问:

image-20231215131620046

  • 访问成功,使用 Nginx 部署静态页面成功!(2023/12/15 午)

查询本机 IP 地址

  • 可以观察到,上面访问 Nginx 部署的静态网页时,使用了 192.168.152.1 的 IP 地址

  • 其实这里也可以使用 localhost 代替该 IP 地址,也能实现本机访问该静态网站

🔥 那么这个 IP 地址可以怎样查询呢?

  • 我使用了我最近使用 Python 开发的 MemoryTools 工具集软件中的 本机信息查询 功能,查询得到的 IP 地址如下:

image-20231215132138775

  • 还可以在管理员模式命令行中,执行 ipconfig 命令查询得到:

image-20231215132316268

  • 可以发现,使用以上两种方法查询得到的 ip 地址是不相同的,这说明一台主机对应的 ip 地址并不一定是唯一的
  • 一台主机中可能有多张网卡,而每张网卡对应各自的唯一的 ip 地址(如下图所示):

image-20231215132717925

  • 可以参考下 文心一言 的回答:(2023/12/15 午)

是的,每个网卡通常对应一个 IP 地址

但是也有例外情况,例如家用路由器,1 张物理网卡,五个网口但是有两个 IP 地址。

家用路由器 lan 侧和 wan 侧各有一个网卡,但是它给集成到一张物理网卡里了(不管它是芯片设计上集成还是直接用的虚拟网卡,反正就是集成了)。

然后 lan 侧还相当于串上了个二层交换机,lan 侧四个网口都是一个 IP 地址,wan 侧那个网口自己一个 ip 地址。

动态网站

云服务器

  • 试用云服务器部署上线网站是最稳定的,详细的部署流程,请转至《揭秘项目部署上线之路:流程、挑战与解决方案》

Webify


一文搞定网站上线:从零到一的实战指南
https://test.atomgit.net/blog/2023/07/30/一文搞定网站上线:从零到一的实战指南/
作者
Memory
发布于
2023年7月30日
更新于
2023年12月15日
许可协议