Node.js、Sublime text3、HTML5模板搭建基本简单静态web网站

最新推荐文章于 2023-08-28 23:21:50 发布
最新推荐文章于 2023-08-28 23:21:50 发布
阅读量2.2k 收藏
点赞数
分类专栏： HTML5 文章标签： node.js express html5 sidebar Chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NEET007/article/details/51674309
版权
本文介绍了如何使用Node.js、Express和HTML5模板搭建一个基本的静态web网站。首先，通过Node.js环境搭建和Express框架安装创建web项目。接着，使用HTML5 Boilerplate模板替换public文件夹内容，并在Sublime Text3中建立项目进行编辑。同时，配置SideBarEnhancements插件以在Chrome中预览页面。最后，通过Emmet LiveStyle和LiveReload实现CSS实时刷新预览，提高开发效率。
摘要由CSDN通过智能技术生成

1.Node.js基本环境搭建 略/参考前文
2.express/Node.js经典官方推荐web服务器框架
3.安装 express
*cmd默认提示符为C:\Users\sarsers，Node.js、Sublime text3及相关项目文件夹均在D:盘，相关命令操作，最好切换到相应目录下，以免操作路径不是预期且产生垃圾文件
这里写图片描述

这里写图片描述

这里写图片描述

检查express是否安装成功，需安装express-generator
这里写图片描述

安装 express-generator
这里写图片描述

这里写图片描述

最低0.47元/天 解锁文章
NEET007
关注
专栏目录
简单家乡风景静态HTML网页设计作品 DIV布局家乡介绍网页模板代码 DW个人网站制作成品 web网页制作与实现
weixin__BJ050106的博客
08-11 2978
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
【web网页设计期末课程大作业】基于HTML+CSS+JavaScript仿山东传媒职业学院网站
HTML网页设计
08-09 1507
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
Node.js网站模板nodejs-website-boilerplate.zip
07-19
Node.js Website Boilerplate是一个满足一些常见的网站要求的Node.js网站模板，包括动态网页、博客文章、作者管理、搜索引擎优化、联系表格和网站搜索等。Demo点击这里查看Demo站点（Medical Professional）‍特性：‍与移动端或是前端（Bootstrap）充分响应SEO准备发送电子邮件到你选择的邮箱和以供参考的Cosmic JS的联系表格全网站搜索功能很容易在Cosmic JS上管理网页、博客、联系信息等所有存储信息注册Cosmic JS，安装Demo和部署此网站。开始git clone https://github.com/cosmicjs/nodejs-website-boilerplate  cd nodejs-website-boilerplate npm install将example-bucket.json文件导入到你的Cosmic JS存储器。要做到这一点去你的存储器>设置>导入/导出数据。在生产环境中运行COSMIC_BUCKET=your-bucket-slug npm start在开发环境中运行npm run development配置联系邮箱：由于Node.js没有邮件服务器，联系表格使用一个SMTPS字符串连接到你选择的邮件服务器。要做到这一点，在你的Cosmic JS存储器中添加SMTPS_STRING到你的ENV vars。这个位于你的存储器>设置>部署网站。一个例子字符串，比如这样：SMTPS：//yourname@gmail.com：yourpass@smtp.gmail.com。 标签：node.js
Node.js的web模块教程（已经入门的继续学习）
最新发布
Autumn_Xiao的博客
08-28 215
Web服务器一般指网站服务器，Web服务器的基本功能就是提供Web信息浏览服务(文本、音视频、流)。服务器种类Web服务器: 处理HTTP请求的服务器Socket服务器(即时通讯): 通过socket传输即时通讯(IM): 允许两人或多人使用网路即时的传递文字讯息、档案、语音与视频交流流媒体服务器: 音视频处理程序, 接受流媒体格式文件,flv/ts等HTTP协议的概念：超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议。
Sublime Text 3快速生成HTML5的头部信息
qq_32095903的博客
03-20 2003
一、快速生成HTML5的头部信息的步骤：1.Ctrl + N，新建一个文档；2.Ctrl + Shift + P，打开命令模式，再输入 html 进行模糊匹配，将语法切换到html模式；3.输入 !，再按下 Tab键或者 Ctrl + E ，就能快速打开HTML5的整体结构。在此，我按的Ctrl + E才可以实现。
Sublime Text3 编写的期末简单网页作业：统一医疗平台
09-30
含表格；图片；链接；按钮；文本框等，字体风格统一简洁，适用于大学生期末大作业。后续添加PHP代码程序，有兴趣可以交流一番
Sublime Text3安装模板插件SublimeTmpl
lihefei_coder的博客
07-01 2571
1.打开 Preferences>Package Control 2.选择Install Package 3.在搜索框输入sublimeTmpl，在列表中点击安装(因我本机已安装，所以搜索列表没有显示) 4.重启sublime text3即可生效...
h5响应式机械设备企业网站html前端静态模板.zip
10-05
【标题】：“h5响应式机械设备企业网站html前端静态...总结来说，这个压缩包提供了一个适用于机械设备企业的HTML5响应式网站模板，开发者可以依据这个模板快速搭建企业网站，适应各种设备，并根据需求进行定制化修改。
基于web在线餐饮网站的设计与实现——蛋糕甜品店铺(HTML+CSS+JavaScript)
wx___BJ050106的博客
08-14 1214
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【......
sublime text 3 中文版 带前端插件 js vue 等
03-31
中文版编码软件， 下载了很多插件类工具 可以用于方便开发.....
网页静态页面设计
04-26
静态页面代码实现，自适应手机、平板、电脑三种分辨率，轮播图功能，倒计时功能有都实现
Node.js+vue+html5旅游网站设计与实现
豆包程序员
08-12 360
我的旅游管理系统中的用户角色有两种分别是管理员和用户，用户有浏览旅游网站信息，预定酒店信息浏览，旅游路线信息浏览，修改用户个人信息等功能，管理员能够对系统中的旅游信息进行增加查出或者修改，同时很能对酒店预定的信息做出及时的调整等。2.1.1 硬件平台 10。
sublim编译html,Sublime Text3之编辑调试HTML文件
weixin_42440934的博客
06-15 421
一、使用Sublime Text3新建HTML文件，快速生成头部信息，需要安装Elemet插件。1、安装Elemet插件：Ctrl+Shift+P，调出命令面板 输入install，选择Install Package 回车输入Elemet，回车2、查看已经安装的插件：Ctrl+Shift+P 在命令面板，输入package，选择Package Control: list packages，回车，3...
emmet快速搭建html5,Sublime 安装Emmet插件，开发HTML5
weixin_36320395的博客
06-09 160
第一步：安装包管理工具Package ControlPackage Control是sublime的包管理工具，方便管理各种插件。安装方法：1. 按Ctrl+`调出sublime text的console，也可以菜单栏 view> show console打开console2. 粘贴以下命令(注意区分sublime版本)到console控制台，回车，耐心等待安装完成sublime3impor...
Emmet：HTML/CSS代码快速编写神器
04-26 3735
Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：    Zen coding下的编码演示 去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。  一、快速编写HTML代码
实现Sublime Text3成为静态web服务器：SublimeServer
名度学院
04-24 5390
如果你使用Sublime Text作为你的编辑器，那么在进行HTML和Javascript开发的时候有一个很有用的功能，帮你完成前端的联调测试，那就是Sublime Text的服务器插件：SublimeServer。使用了该插件后，你不在需要单独的启动Tomcat或者Apache这样的重型服务器，就可以完成HTML和Javascript在服务器的联调。SublimeServer会启动一个轻量级的，
SublimeText开发html网站教程（一）
Nicolelovesmath的博客
04-06 6302
Sublime Text是一款跨平台的代码编译器。 本节内容包含如下几个部分： sublime text的安装快捷键使用方法插件的安装以及替换 一.Sublime Text的安装 Sublime Text的官网下载地址：点击打开链接 如下图 Sublime Text可用于开发的使用环境，如下图： 点右下角plain text可查看具体可使用的语言，同时sub
sublime text3快速生成html头部信息
Legend的博客
11-28 8022
第一步安装 ctrl+shift+P打开命令面板，输入install，鼠标点击下面出来的Package Control:Install Package.ml 第二步 分别输入不同的可以有不同版本的头部信息 1.html:xt 2.! 3.html:4t 4.html:4s 5.html:xs 6.html:xxs 7.html:5 然后按TAB键就可以了
手把手教您制作并发布个人网站或主页（一）（图解教程针对小白）
haierboos
08-14 1466
很多人都像我一样，从小就有个梦想，就是能自己制作一个属于自己的网站，下面就让我图解一下制作过程，针对广大小白，大神绕道。 首先，我推荐一款类似于记事本的编译工具，叫sublime2 Text2，下载地址http://download.csdn.net/detail/gshengod/5942957。 软件的界面。 下面讲一下网页编程部分。对于新手，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值