快速搭建前端代码静态展示网站工具CodeInstant

CodeInstant 是一款快速搭建前端代码静态展示网站工具，CodeInstant 提供一套静态网站框架和站点导航自动生成脚本，帮助前端开发人员在 GitHub pages 等平台快速搭建代码展示网站。

CodeInstant 支持在线编辑 HTML、CSS、JavaScript 代码并可实时预览效果，支持代码高亮显示，支持 Markdown 文件转 HTML 在线浏览。

使用

• git clone https://github.com/guyoung/Ca…
• cd CaptfEncoder
• npm install
• npm start // 运行
• npm run build // 或者编译运行

文件结构

|- build                    脚本
|--- build.js               站点导航自动生成脚本          
|- data                     用户文件
|--- codes                  代码
|----- codes_3
|------- index.html
|----- vue
|------- vue_quick_strat    
|--------- index.html
|--------- main.js
|--------- style.css
|------- vue_route
|--------- index.html
|------ sitemap.json        站点导航文件，脚本自动生成
|--- home                   首页
|----- index.md
|--- pages                  文档                 
|----- page_1
|------- index.md
|----- page_2
|------- index.md
|----- page_3
|------- index.md
|------ page.sitemap.json   站点导航文件，脚本自动生成
|--- app.config.json        网站配置文件
|- framwrok                 框架
|--- js
|------ app.js
|------ app.route.js
|------ code.component.js
|------ home.component.js
|------ page.component.js
|--- style
|------ main.css
|-index.html                网站首页

使用 Github pages 搭建网站

• Fork
• 修改仓库名称
• 为仓库开启 github page 选项，Source 改为 master branch
• 代码 clone 到本地
• 本地项目初始化并运行
• 添加修改文件
• 将代码更新到 github 仓库

项目网站

• https://github.com/guyoung/Co…

---

关注微信公众号，获取软件最新消息