阿里云服务器 篇二:搭建静态网站

文章目录

      • 系列文章
      • 获取静态网站模板
      • 应用静态网站模板
        • 解压zip文件
        • SCP命令上传文件
        • 其他上传文件的方法

系列文章

阿里云服务器 篇一:申请和初始化
阿里云服务器 篇二:搭建静态网站

获取静态网站模板

  • 站长素材:网站中包括大量的免费模板,可任意下载。
  • 模板之家:国内外优质网站模板,免费下载和预览。
  • html5学习平台:一个不错的入门级网站,提供演示和下载。
  • js代码网:有一些有趣的代码,同样支持免费下载和网页预览。
  • AB模板网:专注于分享静态HTML网站源码下载、静态网站模板下载以及静态网页模板,适合有不同需求的用户选择。
  • 格展网络:提供上千种静态网站模板、企业静态HTML模板、HTML网页模板及HTML5手机静态网站模板,支持下载和仿站服务。
  • 17素材网:包含多种类型的静态HTML设计,如企业网站、商城网站、个人网站、专题模板、后台模板、响应式模板、手机网站和单页模板,按类别和标签进行分类,方便用户筛选和下载。
  • 凡科建站:提供一站式网站建设服务,其中包括免费静态网站模板、HTML静态网页模板免费下载等选项,适用于快速搭建网站的用户。
  • GitHub搜索:虽然不是传统的模板网站,但在GitHub上可以找到大量的开源静态网站模板项目,这些模板通常由社区维护,既有简单HTML/CSS模板,也有基于框架(如Jekyll、Hugo等)的复杂项目。
  • Templated:提供免费、高质量的HTML5/CSS3网站模板,适用于个人、创业公司到大型企业等多种场景。
  • HTML5 UP!:专注于现代、响应式、免费 HTML5/CSS3 网站模板,设计风格独特且易于定制。
  • BootstrapMade:提供基于Bootstrap框架的精美网站模板,包括静态模板,适用于各类企业、个人博客、作品集展示等场景,有免费和付费版本可供选择。

应用静态网站模板

阿里云服务器已经安装了Nginx,并配置好了静态Web服务器,并使用默认网站根目录:/usr/share/nginx/html。(参见系列文章 篇一)

接下来,按照如下步骤来应用一个静态网站模板:

  1. 准备静态网站模板

    • 下载所需的静态网站模板。可以从上述列出的资源网站中选择合适的模板并下载到本地计算机。
  2. 解压模板文件

    • 解压缩模板文件,确保得到包含HTML、CSS、JavaScript、图片等所有必要文件的目录结构。
  3. 预处理模板文件

    • 文件重命名:根据实际需求,对模板中的主要文件(如index.htmlabout.html等)进行重命名,使其更符合自己的网站结构和内容。同时,确保在重命名后更新内部链接(如导航菜单、页面间跳转等)以保持其有效性。
    • 修改关联文件内容(该部分内容比较复杂,对于一些下面未列出的细节,建议可以在展示和交互出现问题时再排查问题并修改)
      • 替换模板中特定占位符或变量:很多模板提供了易于定制的内容区域,如网站标题、logo、版权信息等。查找并替换这些占位符或变量为实际内容。
      • 调整样式(CSS)和脚本(JavaScript):根据个人喜好或网站规范,修改模板的CSS文件以调整颜色、字体、布局等视觉元素。同样,如果有需要,也可以优化或扩展JavaScript代码以增强网站功能。
      • 检查并更新资源路径:确保图片、字体、视频等资源文件的引用路径正确无误。如果在重命名或移动文件时更改了资源的相对路径,需同步更新HTML、CSS、JavaScript中相关的URL引用。
      • 清理无关文件:删除模板中不必要的示例内容、文档、第三方库(如果不需要或打算使用其他版本)等,以精简项目结构和减小文件大小。
  4. 上传模板文件至服务器

    • 建议先将模板文件压缩为zip包后再上传,在上传到阿里云服务器后可以在终端的命令行中再进行解压。
    • 模板文件需要上传至Nginx默认网站根目录/usr/share/nginx/html之下,确保将整个模板目录结构完整上传,保持文件间的相对路径不变。。
    • 使用SSH工具(如PuTTY、Xshell等)连接到阿里云服务器,并通过工具的选项选择本地预处理后的模板文件上传至服务器。
    • (推荐)在终端命令行中,通过SCP等命令将模板文件上传至服务器。
  5. 检查文件权限

    • 确保上传的文件具有正确的读权限,以便Nginx能够访问。如果需要,可以使用chmod命令调整权限。例如,赋予所有文件和目录递归的完全控制权限(如果为了方便自己编辑就赋予777的权限,否则,至少需要赋予644权限):
    sudo chmod -R 777 /usr/share/nginx/html/*
    
  6. 验证模板部署

    • (可选)在服务器上重启Nginx服务,使配置生效:
    sudo systemctl restart nginx
    
    • 打开浏览器,输入阿里云服务器公网IP地址(或已绑定的域名),查看是否正常显示部署的静态网站模板。
解压zip文件
  1. 安装 unzip 工具
    CentOS 系统默认不带 unzip 命令行工具。可以通过 yum 包管理器进行安装:

    sudo yum install -y unzip
    
  2. 解压 ZIP 压缩包
    安装完 unzip 后,假设要解压名为 example.zip 的压缩包,且该压缩包位于当前工作目录下,执行以下命令:

    unzip example.zip
    

    否则,需要提供其完整路径,例如:

    unzip /path/to/example.zip
    

    执行命令后,unzip 会将压缩包中的文件解压到当前工作目录。

SCP命令上传文件
  1. 检查并确保SSH连接畅通
    使用 ssh 命令测试能否成功连接到云服务器。例如,如果使用默认端口和用户名 ecs-user

    ssh ecs-user@<server_ip>
    

    如果连接成功并能进行交互,说明SSH连接设置无误。退出SSH会话(使用 exit 命令)后继续下一步。如果连接失败,请检查网络设置、防火墙规则、SSH服务状态以及用户权限等。

  2. 使用 scp 命令上传文件
    格式化 scp 命令如下,将 <local_file> 替换为本地文件的完整路径,将 <server_ip> 替换为实际的云服务器公网IP地址:

    scp <local_file> ecs-user@<server_ip>:/usr/share/nginx/html/
    

    示例:

    scp /path/to/local_website_files/web_template.zip ecs-user@11.22.33.44:/usr/share/nginx/html/
    

如果需要上传的是整个目录,请添加 -r 参数以进行递归上传:

scp -r /path/to/local_website_directory ecs-user@<server_ip>:/usr/share/nginx/html/
  1. 输入密码或使用密钥认证
    • 如果使用密码认证,命令执行后会提示输入云服务器的用户密码。输入后,文件将开始上传。
    • 如果已设置SSH密钥对认证,确保本地机器的公钥已添加到云服务器的 ~/.ssh/authorized_keys 文件中。这样在执行 scp 命令时无需手动输入密码。
其他上传文件的方法

参见:linux服务器之间传输文件的几种方式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/796851.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

上传视频的核心代码

/*** 上传学习视频信息*/Log(title "上传学习视频信息", businessType BusinessType.INSERT)PostMapping("/uploadVideo")public AjaxResult add(HttpServletRequest request) {return toAjax(videoInfoService.insertVideoInfo(request));}/*** 上传学习…

PHP实现网站微信扫码关注公众号后自动注册登陆实现方法及代码【关注收藏】

在网站注册登陆这环节&#xff0c;增加微信扫码注册登陆&#xff0c;普通的方法需要开通微信开发者平台&#xff0c;生成二维码扫码后才能获取用户的uinonid或openid&#xff0c;实现注册登陆&#xff0c;但这样比较麻烦还要企业认证交费开发者平台&#xff0c;而且没有和公众号…

如何控制Docker容器退出后的自动重启行为?

在Docker中&#xff0c;可以通过以下两种方式来控制容器退出后的自动重启行为&#xff1a; 使用docker run命令时&#xff0c;通过设置--restart参数来指定容器退出后的重启策略。可以使用以下值之一&#xff1a; no: 默认值&#xff0c;容器退出后不会自动重启。always: 容器…

什么是EL表达式?怎么使用?

文章目录 一、什么是EL表达式1、命令格式&#xff1a;${作用域对象别名.共享数据} 二、EL表达式与作用域对象别名1、JSP文件可以使用的作用域对象2、EL表达式提供作用域对象别名3、EL表达式将引用对象属性写入到响应体4、EL表达式简化版 三、EL表达式与运算表达式四、EL表达式提…

【SQL】1890. 2020年最后一次登录(简单写法;窗口函数写法)

前述 sql 中 between 的边界问题 ---- between 边界&#xff1a;闭区间&#xff0c;not between 边界&#xff1a;开区间 在 sql 中&#xff0c; between 边界&#xff1a;闭区间not between 边界&#xff1a;开区间 题目描述 leetcode题目&#xff1a;1890. 2020年最后一…

【leetcode面试经典150题】16.接雨水(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

aardio教程五) 写Python风格的aardio代码(字符串篇)

前言 熟悉一个新的语言最麻烦的就是需要了解一些库的使用&#xff0c;特别是基础库的使用。 所以我想给aardio封装一个Python风格的库&#xff0c;Python里的基础库是什么方法名&#xff0c;aardio里也封装同样的方法名。 这样就不需要单独去了解aardio里一些方法的使用细节…

Lanelets_ 高效的自动驾驶地图表达方式

Lanelets: 高效的自动驾驶地图表达方式 附赠自动驾驶学习资料和量产经验&#xff1a;链接 LaneLets是自动驾驶领域高精度地图的一种高效表达方式&#xff0c;它以彼此相互连接的LaneLets来描述自动驾驶可行驶区域&#xff0c;不仅可以表达车道几何&#xff0c;也可以完整表述车…

.NET9 PreView2+.AOT ILC 的重大变化

RyuJIT 增强功能 1. 环路优化 (循环优化) 这种优化实际上是一种 for 循环叠加态的优化&#xff0c;for 循环叠加计算的过程中&#xff0c;会对其中部分变量进行感应。比如循环中放置 0 扩展 (第一个索引为 0)&#xff0c;这种优化灵感来源于 LLVM 标量演化。下面看例子&#…

每天一个数据分析题(二百五十四)

在大数据时代背景下&#xff0c;我们使用的数据主要包含两种类别&#xff0c;一种称为结构化数据&#xff0c;另一种称为非结构化数据。请问以下哪个选项属于非结构化数据&#xff1f; A. 利润表 B. 短视频 C. 产品库存表 D. 产品进货表 题目来源于CDA模拟题库 点击此处获…

LeetCode 每日一题 2024/4/1-2024/4/7

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 4/1 2810. 故障键盘4/2 894. 所有可能的真二叉树4/3 1379. 找出克隆二叉树中的相同节点4/4 2192. 有向无环图中一个节点的所有祖先4/5 1026. 节点与其祖先之间的最大差值4/…

8种专坑运维的 SQL 写法,性能降低100倍,您不来看看?

1、LIMIT 语句 分页查询是最常用的场景之一&#xff0c;但也通常也是最容易出问题的地方。比如对于下面简单的语句&#xff0c;一般 DBA 想到的办法是在 type&#xff0c;name&#xff0c; create_time 字段上加组合索引。这样条件排序都能有效的利用到索引&#xff0c;性能迅…

AIGC实战——ProGAN(Progressive Growing Generative Adversarial Network)

AIGC实战——ProGAN 0. 前言1. ProGAN2. 渐进式训练3. 其他技术3.1 小批标准差3.2 均等学习率3.3 逐像素归一化 4. 图像生成小结系列链接 0. 前言 我们已经学习了使用生成对抗网络 (Generative Adversarial Network, GAN) 解决各种图像生成任务。GAN 的模型架构和训练过程具有…

真实的招生办对话邮件及美国高校官网更新的反 AI 政策

这两年 ChatGPT 的热度水涨船高&#xff0c;其编写功能强大&#xff0c;且具备强大的信息整合效果&#xff0c;所以呈现的内容在一定程度上具备可读性。 那么&#xff0c;美国留学文书可以用 ChatGPT 写吗&#xff1f;使用是否有风险&#xff1f;外网博主 Kushi Uppu 在这个申…

C++20 semaphore(信号量) 详解

头文件在C20中是并发库技术规范&#xff08;Technical Specification, TS&#xff09;的一部分。信号量是同步原语&#xff0c;帮助控制多线程程序中对共享资源的访问。头文件提供了标准C方式来使用信号量。 使用环境 Windows&#xff1a;VS中打开项目属性&#xff0c;修改C语…

基于卷积神经网络的天气识别系统(pytorch框架)【python源码+UI界面+前端界面+功能源码详解】

功能演示&#xff1a; 天气识别系统&#xff0c;vgg16&#xff0c;mobilenet卷积神经网络&#xff08;pytorch框架&#xff09;_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于卷积神经网络的天气识别系统是在pytorch框架下实现的&#xff0c;系统中有两个模型可选…

vue+elementUI实现表格组件的封装

效果图&#xff1a; 在父组件使用表格组件 <table-listref"table":stripe"true":loading"loading":set-table-h"slotProps.setMainCardBodyH":table-data"tableData":columns"columns.tableList || []":ra…

快速创建Python库文档:pdoc的简便之道

快速创建Python库文档:pdoc的简便之道 什么是pdoc&#xff1f; pdoc 是一个用于自动生成 Python 模块文档的库,它可以根据代码中的 docstrings 自动生成漂亮的文档网页. 为什么选择使用pdoc库&#xff1f; 简单易用: pdoc不需要复杂的配置,只需运行一个命令即可生成文档。 …

项目管理工具对比:甘特图与看板

许多项目管理工具都能帮助你规划、管理和跟踪项目&#xff0c;比如甘特图和看板。如果比较一下甘特图和看板&#xff0c;会发现两者在不同方面都对项目有价值。 让我们来看看看板与甘特图的区别&#xff0c;了解它们是如何工作的&#xff0c;以及各自的优缺点&#xff0c;看看…

基于Springboot的Java学习平台

采用技术 基于Springbootjava学习平台的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 系统功能模块 后台管理 用户注册 课程信息 作业信息 资料信息…