文章目录
系列文章
阿里云服务器 篇一:申请和初始化
阿里云服务器 篇二:搭建静态网站
获取静态网站模板
- 站长素材:网站中包括大量的免费模板,可任意下载。
- 模板之家:国内外优质网站模板,免费下载和预览。
- 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。(参见系列文章 篇一)
接下来,按照如下步骤来应用一个静态网站模板:
-
准备静态网站模板:
- 下载所需的静态网站模板。可以从上述列出的资源网站中选择合适的模板并下载到本地计算机。
-
解压模板文件:
- 解压缩模板文件,确保得到包含HTML、CSS、JavaScript、图片等所有必要文件的目录结构。
-
预处理模板文件:
- 文件重命名:根据实际需求,对模板中的主要文件(如
index.html
、about.html
等)进行重命名,使其更符合自己的网站结构和内容。同时,确保在重命名后更新内部链接(如导航菜单、页面间跳转等)以保持其有效性。 - 修改关联文件内容(该部分内容比较复杂,对于一些下面未列出的细节,建议可以在展示和交互出现问题时再排查问题并修改):
- 替换模板中特定占位符或变量:很多模板提供了易于定制的内容区域,如网站标题、logo、版权信息等。查找并替换这些占位符或变量为实际内容。
- 调整样式(CSS)和脚本(JavaScript):根据个人喜好或网站规范,修改模板的CSS文件以调整颜色、字体、布局等视觉元素。同样,如果有需要,也可以优化或扩展JavaScript代码以增强网站功能。
- 检查并更新资源路径:确保图片、字体、视频等资源文件的引用路径正确无误。如果在重命名或移动文件时更改了资源的相对路径,需同步更新HTML、CSS、JavaScript中相关的URL引用。
- 清理无关文件:删除模板中不必要的示例内容、文档、第三方库(如果不需要或打算使用其他版本)等,以精简项目结构和减小文件大小。
- 文件重命名:根据实际需求,对模板中的主要文件(如
-
上传模板文件至服务器:
- 建议先将模板文件压缩为zip包后再上传,在上传到阿里云服务器后可以在终端的命令行中再进行解压。
- 模板文件需要上传至Nginx默认网站根目录
/usr/share/nginx/html
之下,确保将整个模板目录结构完整上传,保持文件间的相对路径不变。。 - 使用SSH工具(如PuTTY、Xshell等)连接到阿里云服务器,并通过工具的选项选择本地预处理后的模板文件上传至服务器。
- (推荐)在终端命令行中,通过SCP等命令将模板文件上传至服务器。
-
检查文件权限:
- 确保上传的文件具有正确的读权限,以便Nginx能够访问。如果需要,可以使用
chmod
命令调整权限。例如,赋予所有文件和目录递归的完全控制权限(如果为了方便自己编辑就赋予777的权限,否则,至少需要赋予644权限):
sudo chmod -R 777 /usr/share/nginx/html/*
- 确保上传的文件具有正确的读权限,以便Nginx能够访问。如果需要,可以使用
-
验证模板部署:
- (可选)在服务器上重启Nginx服务,使配置生效:
sudo systemctl restart nginx
- 打开浏览器,输入阿里云服务器公网IP地址(或已绑定的域名),查看是否正常显示部署的静态网站模板。
解压zip文件
-
安装
unzip
工具:
CentOS 系统默认不带unzip
命令行工具。可以通过yum
包管理器进行安装:sudo yum install -y unzip
-
解压 ZIP 压缩包:
安装完unzip
后,假设要解压名为example.zip
的压缩包,且该压缩包位于当前工作目录下,执行以下命令:unzip example.zip
否则,需要提供其完整路径,例如:
unzip /path/to/example.zip
执行命令后,
unzip
会将压缩包中的文件解压到当前工作目录。
SCP命令上传文件
-
检查并确保SSH连接畅通:
使用ssh
命令测试能否成功连接到云服务器。例如,如果使用默认端口和用户名ecs-user
:ssh ecs-user@<server_ip>
如果连接成功并能进行交互,说明SSH连接设置无误。退出SSH会话(使用
exit
命令)后继续下一步。如果连接失败,请检查网络设置、防火墙规则、SSH服务状态以及用户权限等。 -
使用
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/
- 输入密码或使用密钥认证:
- 如果使用密码认证,命令执行后会提示输入云服务器的用户密码。输入后,文件将开始上传。
- 如果已设置SSH密钥对认证,确保本地机器的公钥已添加到云服务器的
~/.ssh/authorized_keys
文件中。这样在执行scp
命令时无需手动输入密码。