上篇讲了网址导航，这一篇来到网页的最后一课，实现一个静态网站。...第三课： 静态网站 任务拆分： 任务1：网站规划思路（网页内容分类） 任务2：网页布局（上下、左右等） 任务3：样式编写 任务4：网页内容填 最终主页代码：（其它子页代码省略） 黄色飞船 叶子陪你玩个人网站
搭建静态网站可以不用花钱买服务器，静态网站生成器（如 Hugo, VuePress, Hexo 等）+ GitHub Pages 服务 嫌 GitHub 慢可以换成码云 Pages 等，不过 GitHub...Pages 可以通过 CNAME 换域名，而且 GitHub 有免费的 GitHub Action 可以实现自动化部署更新网站
#access_log logs/host.access.log main; location /src { root F:/测试静态网站...index.htm; # } #} } 主要关注http的location节点其配置如下: location /src { root F:/测试静态网站.../; index index.html index.htm; } 这里设置了根路径是 F:/测试静态网站/,并且首页设置了index.html、index.htm...这里需要注意的是如下: location / { root F:/测试静态网站/src/; index index.html index.htm...; } 其实两者的效果是一样的.第一个和第二个指向的绝对路径不一样,但是第一个nginx会做拼接操作,相当于F:/测试静态网站/+src=root.
搭建Http静态服务器环境 ? 搭建静态网站，首先需要部署环境。下面的步骤，将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务。...外网用户访问服务器的 Web 服务由 Nginx 提供，Nginx 需要配置静态资源的路径信息才能通过 url 正确访问到服务器上的静态资源。...现在我们需要重启 Nginx 让新的配置生效，如： nginx -s reload 重启后，现在我们应该已经可以使用我们的静态服务器了，现在让我们新建一个静态文件，查看服务是否运行正常。 ?...首先让我们在 /data 目录 下创建 www 目录，如： mkdir -p /data/www 创建第一个静态文件 在 /data/www 目录下创建我们的第一个静态文件 index.html 示例代码...到此，一个基于 Nginx 的静态服务器就搭建完成了，现在所有放在 /data/www 目录下的的静态资源都可以直接通过域名访问。 如果无显示，请刷新浏览器页面 完成实验 ?
上面这种方法繁琐且慢，不推荐大家用怎样的方式安装docker。建议使用官网上的安装步骤：https://docs.docker.com/install/linu...
Jekyll 是一个简单的免费的静态网页生成工具，不需要数据库支持，可以配合第三方服务，可以免费部署在 Github 上，而且可以绑定自己的域名。...简介 Jekyll 是一个简单的博客形态的静态站点生产机器。...它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...官方网站：http://jekyllcn.com/ 中文文档：https://www.wenjiangs.com/doc/jekyll-home 依赖 安装 Jekyll 相当简单，但是你得先做好一些准备工作
软件环境： CentOS 7.4 参考文档： 腾讯云开发者实验室：https://cloud.tencent.com/developer/labs 搭建Http静态服务器环境 搭建静态网站，首先需要部署环境...下面的步骤，将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务。...外网用户访问服务器的 Web 服务由 Nginx 提供，Nginx 需要配置静态资源的路径信息才能通过 url 正确访问到服务器上的静态资源。...现在我们需要重启 Nginx 让新的配置生效，如： nginx -s reload 重启后，现在我们应该已经可以使用我们的静态服务器了，现在让我们新建一个静态文件，查看服务是否运行正常。...到此，一个基于 Nginx 的静态服务器就搭建完成了，现在所有放在 /data/www 目录下的的静态资源都可以直接通过域名访问。 敲黑板！！！
使用docker测试静态网站 创建目录 mkdir sample cd sample/ touch Dockerfile cd sample/ mkdir nginx cd nginx 文件复制，最终格式
如果你打算长时间使用，可以推荐你使用腾讯云的建站主机进行配置，独享 CPU、内存、带宽、硬盘等资源，拥有独立 IP 和超大空间，预装网站开发所需的应用环境，并且提供域名绑定、部署 SSL 证书等便捷操作
说到静态网站的动态化，其实就跟想减肥又不愿多运动一个道理，那到底鱼和熊掌能不能兼得呢？静态网站确实有诸多优点但它的部署发布流程太繁琐了，之前我为了偷懒写了一个脚本每次写完文章一键发布！...后来在一次team分享会上cc同学提出了一个小创意说现在静态网站+markdown的组合非常流行，我们可不可以做一个移动版的app随时把写好的文章以静态网站的形式发布出去？...最近在看持续集成相关的文章，然后发现完全可以通过CI+静态网站生成器+github手机客户端完成之前的idea，于是google了一下发现很多文章都有讲如何通过Travis、flow.ic等持续集成工具来发布由...hexo、Jekyll等等静态网站生成器构建的博客，这仿佛也印证了那句话“当你想到一个idea的时候，可能有1000个人已经想到了，100个人在计划了，10个人准备全力去做了，一个人已经干出来了" 不过关键还是看执行力...关于持续集成和静态网站生成器之类的概念在这里就不重复讲了，有问题自行google。 我的博客框架 我的博客系统是用Hexo+Travis CI+Github搭建的。
注意 1、github pages 仅支持静态网页 2、仓库里面是.html文件 3、个人主页也可以设置主题 Project Pages 项目站点 访问 https://用户名.github.io...Github可以托管各种git库，并提供一个web界面（用户名.github.io/仓库名） 当访问自己GitHub上仓库里的其他项目的静态页面时或者其他人的仓库项目时先 fork 到自己的仓库下 在settings...这时就会出现一个访问静态页面的网址，直接在线访问即可。 ?
一、简介 Hugo 是Go语言实现的一款静态网站生成器。它简单、易用、高效、易扩展、快速部署。...相比较其他静态网站生成器，它的优点有这几点： 项目构建特别快 主题目录与站点目录结构一样 配置文件为*.toml 格式，语法常简单易懂，没有缩进的要求 二、快速搭建 2.1 安装 Hugo 下载地址：https...hugo new post/firstArticle.md 2.3.2 添加主题 执行下面命令，就可以下载主题到本地，运行项目就可以查看自己的静态网站了。...有的伙伴可能会问这样的网站也太low了，谁会用？其实上面将的这些内容只是让搭建感受一下最原始的方式搭建自己的站点，接下来就讲讲高阶一些的方法。 三、切换主题 官方网站有很多主题，任由我们选择。...每个主题都有 layouts 目录，这里就是一些静态模板，上手改就对了。
老规矩，先看效果图 简单起见，我这里写一个最简单的html静态网页 ? 然后把这个网页部署到云开发静态网站上 微信上访问效果如下 ? 手机浏览器上访问如下 ?...二，开通静态网站功能 ? 我们上面云开发开通好以后，就可以在这里快速开通静态网站了。 ? 点击以后，直接点击开通即可 ? 这时候开通有个条件 ?...这个时候我们的静态网站功能就开通成功了。 ? 开通成功以后如下图。 ? 这个时候我们就可以把我们开发好的静态网页上传到网站供别人访问了。 三，部署网站 我们的静态html如下 ?...我们以当前最主流的vue网站的项目部署为例，来给大家讲讲如何把一个实战项目部署到云开发的静态网站来。...这里都配置好以后，我们就可以直接通过自己的域名访问网站了。 ? 大家也可以去访问下石头哥的云开发静态网站试一试。
1、概述 在大型网站中，如京东和当当商品详情界面，看到的页面基本上是静态页面。为什么都要把页面静态化呢？把页面静态化，好处有很多。例如：访问速度快，更有利于搜索引擎收录等。...比如：网站头尾等公共数据块可以独立成一个文件。...对于大型网站而言，这种方法将带来不可忽视的问题。...比如：网站头尾等公共数据块可以独立成一个文件。 5、总结 对于一个大型网站来说，生成的页面数据会非常多，管理这些页面文件又是一个问题。...在web开发里，除了需要浏览器处理的，其他技术都可以当做服务端来理解，如果我们网站使用到了CDN，使用到了静态web服务器例如apache，以及服务端的web容器例如jboss，那么按请求的行进路径，我们结果处理越早那么网站响应效率也就越高
近期发现腾讯云的COS服务竟然支持部署静态网站了，故写本文记录分享最新版COS部署静态网站过程。...COS的优势很明显，首先是不用自己部署静态网站服务器，其次是免费，这里的免费额度优惠很大，每月50G免费空间，10G CDN下行流量，每月100万次读写请求。...打开静态页面设置 接下来，我们要打开COS的静态页面访问功能，请选择页面菜单栏中的基础配置，拉取页面到最下方，然后找到静态网站设置。...现在打开基础菜单配置页，然后找到静态网站设置，关掉强制HTTPS。 注：使用自定义域名一定要关闭静态网站的强制HTTPS按钮，不然无法正常加载自定义域名网站。...总结 静态部署网站你学会了吗？当然COS应用不只这些，还可以应用到数据处理、大数据分析、容灾与备份等多个场景。
Frieforx web developer tools:ctrl+shift+i -- HTTP响应头部 image.png 配置高性能静态网站 1、js jpg等缓存 image.png...image.png 2\压缩 image.png 3、图片防盗链 image.png 4、IMAGEMAGICK对图片进行剪裁 image.png 5、静态网站不要使用cookie image.png
使用容器部署静态（HTML）网站 学习如何使用Nginx来创建一个用于运行静态HTML网站的Docker镜像,会解释如何构建一个运行Nginx与HTML网站的Docker镜像,目的是了解如何创建和运行我们自己创建的.../usr/share/nginx/html Build Docker镜像 使用下面的build命令构建我们的静态HTML镜像。
2.3增强用户体验 • 设置 favicon.ico • 网站如果不设置 favicon.ico，控制台会报错，另外页面加载过程中也没有图标 loading 过程，同时也不利于记忆网站品牌...没有网络连接的情况下使用（比如 Google Doc、石墨文档） • 将冗余、很少修改、但经常访问的数据，以避免随时从服务器获取数据 5.4LocalStorage • 本地存储 • 应用于： 缓存静态文件内容...9、静态文件压缩工具介绍 • HTML 压缩工具 • html-minifier https://www.npmjs.com/package/html-minifier • CSS 压缩工具 •...JavaScript 压缩工具： uglify-js https://www.npmjs.com/package/uglify-js • 使用方法：uglifyjs in.js -o out.js 10、静态...a.js,b.js 内容 11、静态⽂件版本号更新策略 • 缓存更新 • CDN 或 ng 后台刷新文件路径，更新文件header头 • 文件 name.v1-v100
nginx 是一个web服务器,需要持久运行的服务器,而且我们一般选择在后台运行.
[1] 由于hexo为静态博客，因此不需要具备推送功能（其实是我没搞懂）。因此PWA的特性包括其渐进式、可离线，可以作为提高网站体验和提高网站家在速度的一个方法。...渐进式web应用可以同时运行在传统的浏览器上，像普通的网站一样进行浏览和操作；其同时也可以运行在现代功能完善的浏览器中，可以使其具备更多的效果和功能。...hexo为静态博客，因此只需要实现离线使用即可，不需要进行消息推送，因此可以使用固定服务注册脚本，在hexo中服务注册脚本有着专门的插件进行生成： hexo-offline hexo-pwa hexo-service-worker...runtimeCaching 缓存选项 urlPattern 文件的正则匹配 handler 缓存模式 origin 网站访问域名(代理域名) 如此支持离线的PWA即配置成功。...使用新版的chrome访问网站，打开控制台的Audits点击生成报告，就能看到网站是否支持PWA啦，如下图所示： 发布之后可以先访问一下网站的一些页面，然后就可以拿把大剪子网线访问你的网站啦~ 关于消息推送
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
