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

最新推荐文章于 2023-08-28 23:21:50 发布

NEET007

最新推荐文章于 2023-08-28 23:21:50 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： node.js express html5 sidebar Chrome

本文链接：https://blog.youkuaiyun.com/NEET007/article/details/51674309

HTML5 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用Node.js、Express和HTML5模板搭建一个基本的静态web网站。首先，通过Node.js环境搭建和Express框架安装创建web项目。接着，使用HTML5 Boilerplate模板替换public文件夹内容，并在Sublime Text3中建立项目进行编辑。同时，配置SideBarEnhancements插件以在Chrome中预览页面。最后，通过Emmet LiveStyle和LiveReload实现CSS实时刷新预览，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这里写图片描述

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

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

这里写图片描述

express -V/-V需大写
这里写图片描述

新建web项目：myweb（指定项目路径D:\web projects）
cmd切换到D:\web projects
这里写图片描述

这里写图片描述
安装依赖包 cd myweb && npm install
启动本项目express服务器 npm start

cmd切换到新建web路径下，安装依赖包
这里写图片描述

jade已被更名为pug，安装pug
这里写图片描述

项目启动
这里写图片描述

项目测试
这里写图片描述

4.public/express静态web网站默认路径
这里写图片描述

用hello world网页index.html 测试
这里写图片描述

这里写图片描述

5.HTML5模板
下载
前端模板 http://www.bootcss.com/p/html5boilerplate/
这里写图片描述

HTML5模板
这里写图片描述

安装
清空public文件夹
这里写图片描述

解压这里写图片描述

将源码全部拷贝到public文件夹
这里写图片描述

测试
这里写图片描述

6.将public文件夹引入Sublime text3，建立 ST3 项目，以便编辑 html5-boilerplate相关文件
这里写图片描述

这里写图片描述

7.配置SideBarEnhancements的Open in Browser预览功能
这里写图片描述

这里写图片描述

{

    "D:\web projects\myweb\public":{

        "url_testing": "http://localhost:3000/",

        "url_production": ""

    }

}

“D:\web projects\myweb\public” 静态网页文件存放位置
“url_testing” express服务器定义的url及监听端口

侧边栏任意位置右键->Open in Browser->Chrome，目前没有快捷键
这里写图片描述
Open With可自定义快捷键，打开的不是url，而是本地文件

这里写图片描述

8.Sublime text3与Chrome浏览器配合插件
Emmet LiveStyle-CSS实时刷新预览
这里写图片描述
Sublime text3与Chrome各装一枚
Chrome浏览器，访问https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg?utm_source=chrome-ntp-icon安装，重启浏览器即可
Sublime text3，package control安装

LiveReload-实时刷新预览
Sublime text3与Chrome各装一枚
Chrome浏览器，三条横杠图标->更多工具->扩展程序->获取更多扩展程序->进入Chrome插件中心->搜索”LiveReload”->添加至CHROME，重启浏览器即可
Sublime text3，从GitHub下载LiveReload源码包（package control的不好使），解压到packages下即可
https://github.com/Grafikart/ST3-LiveReload

据说有实现Sublime text3与Chrome左右分屏的插件，目前没找到呢