阿里云服务器 篇二：搭建静态网站_阿里云部署静态网站

系列文章

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

获取静态网站模板

• 站长素材：网站中包括大量的免费模板，可任意下载。
• 模板之家：国内外优质网站模板，免费下载和预览。
• 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.html、about.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/*
   1

6. 验证模板部署：

   • （可选）在服务器上重启Nginx服务，使配置生效：

   sudo systemctl restart nginx
   1

   • 打开浏览器，输入阿里云服务器公网IP地址（或已绑定的域名），查看是否正常显示部署的静态网站模板。

解压zip文件

1. 安装 unzip 工具：
   CentOS 系统默认不带 unzip 命令行工具。可以通过 yum 包管理器进行安装：

   sudo yum install -y unzip
   1

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

   unzip example.zip
   1

   否则，需要提供其完整路径，例如：

   unzip /path/to/example.zip
   1

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

SCP命令上传文件

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

   ssh ecs-user@<server_ip>
   1

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

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

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

   示例：

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

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

scp -r /path/to/local_website_directory ecs-user@<server_ip>:/usr/share/nginx/html/
1

3. 输入密码或使用密钥认证：
   • 如果使用密码认证，命令执行后会提示输入云服务器的用户密码。输入后，文件将开始上传。
   • 如果已设置SSH密钥对认证，确保本地机器的公钥已添加到云服务器的 ~/.ssh/authorized_keys 文件中。这样在执行 scp 命令时无需手动输入密码。

其他上传文件的方法

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