Material-UI 部署到 GitHub Pages 的实例

最新推荐文章于 2020-07-24 03:54:36 发布
最新推荐文章于 2020-07-24 03:54:36 发布
阅读量1.5k 收藏
点赞数
分类专栏： 产品 文章标签： github pages deploy MaterialUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zccz14/article/details/51576092
版权

纯前端的网页是可以直接部署到 GitHub Pages上的。

下面展示一个Material-UI部署到GitHub Pages上的实例。

至于如何配置Material-UI，请参考Material-UI + React + Babel + Webpack 环境配置

Demo:
XJTU Index - 简单的导航网

GitHub:
XJTU Index - GitHub

用Webpack将前端UI逻辑打包封装好后，可以直接像任何其他的Web页面一样发布到任意的Web容器中。

这里写图片描述

顺便说一下，上面这个应用使用了 fetch API，对于各浏览器的兼容度：

Can I Use Fetch?

  • Chrome 45+
  • Firefox 45+
  • Edge 14+
  • Opera 36+
  • Android Browser 50+
  • Chrome for Android 50+

IE的所有版本均不支持 fetch API

幺零做点正事吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Github-Pages-示例：BeiYuu的博客
02-24
＃一点点说明 这是的示例代码，如果你，希望看下去哦： 马上动手，很赞 感谢认可 推荐阅读： 想知道我的设计，没问题，标个出处就好啦 转载也没问题，标个出处呗少年 恩，认真的童鞋最可爱啦〜
reactjs material-ui使用示例：AppBar tabs grid paper
学亮编程手记
02-04 647
material-ui-demo
04-09
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化内部版本，文件名包含哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（web
material-ui-paperbase-demo
03-31
创建React App示例 如何使用 下载示例： curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app cd create-react-app 安装并运行： npm install npm start 或者： 示例背后的想法 该示例演示了如何使用 。
material-ui：Material-UI是一个简单且可自定义的组件库，用于构建更快，更美观，更易于访问的React应用程序。 遵循您自己的设计系统，或从材料设计开始
02-03
材料UI 快速构建漂亮的应用程序。 Material-UI是一个简单且可自定义的组件库，用于构建更快，更美观，更易于访问的React应用程序。 遵循您自己的设计系统，或者从开始。 安装 Material-UI作为。 // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core :warning_selector: 所有正在进行的工作已移至v5。 v4的开发仅限于重要的错误修复，安全补丁以及简化了向v5的升级途径。 // with npm npm install @material-ui/core@next @emotion/react @emotion/styled // with yarn yarn add @material-ui/core@next @emotion/react @emotion/styled 旧版本 （ ） （ ） 请注意， @next仅指向预发行版本； 要获取最新的稳定版本，请使用@latest 。 谁赞助Material-UI？ 钻石 :gem
boilerplate-swagger:Swagger-UI API的GitHub Pages模板
03-18
转到位于https://github.com/{github-username}/{repository-name}/settings的存储库设置，并启用GitHub Pages。浏览至Swagger文档， https://{github-username}.github.io/{repository-name}/为...
ghaction-github-pages：部署到GitHub Pages的GitHub Action
02-05
部署到GitHub Pages的GitHub Action 如果您有兴趣，我的其他 GitHub动作！ 用法 工作流程 以下是使用虚拟HTML页面部署到GitHub Pages的简单代码段。 该存储库还提供了，并且部署。 name : website on : push jobs...
jekyll-github-deploy：到GitHub Pages的Jekyll站点自动部署程序
02-04
这就是jekyll-github-deploy（aka jgd）出现的地方：它将自动构建您的Jekyll博客并将其推送到gh-pages分支。 在开始使用此工具之前，您可能需要阅读此博客文章：将 。 假定您的博客位于回购的主目录中。 首先安装...
deploy-to-github-pages-action：GitHub操作，它将帮助您将应用程序部署到GitHub Pages的存储库中
02-05
【deploy-to-github-pages-action】是一个GitHub Action，它专为前端开发者设计，旨在简化将应用程序部署到GitHub Pages的过程。GitHub Actions 是GitHub提供的一个强大的自动化工具，允许用户在仓库中自定义工作流...
material-ui-swing：Java Swing的现代Material Design UI
02-04
材质-UI-摇摆 该存储库仅包含正式版本，并且不会经常更新，因为所有开发活动均在 ... < artifactId>material-ui-swing < version>1.1.1 Gradle（Groovy） implementation ' io.github.vincenzopalazzo:
material-ui-image-upload:带有预览，Axios和进度栏的Material UI图像上载示例
05-08
带有预览，Axios和进度栏的Material UI图像上载示例 使用Preview to Rest API构建Material UI Image Upload示例。 React App使用和 File来发出HTTP请求，使用Material UI来显示进度条以及其他UI组件。 您还将显示图像信息的显示列表（带有下载URL）。 我们将在该用户中创建一个React Material UI Image上传应用程序： 上传前显示图片预览 查看进度条的上传过程（百分比） 查看所有上传的图像 单击文件名时可下载图像的链接 有关说明，请访问： 该React Client的Rest API服务器： 多练： 全栈CRUD 使用Node.js Express： React.js + Node.js Express + MongoDB 使用Spring Boot： React.js + Spr
material-github:GitHub的实质性黑暗主题
05-28
GitHub的素材主题 GitHub的实质性黑暗主题 基于Mattia Astorino出色的 如何使用它 ， 或安装Stylus Extension 安装主题： 重要通知-2020年5月29日 由于userstyles.org已完全损坏且无需维护，因此主题已从userstyles.org移至GitHub。 对于已经安装了，如果要获取下一个更新并享受新的配置程序，则需要通过单击来重新安装它。 这是一项重大更改，因此您可能会丢失一些以前的自定义设置。 由于它是完全不同的主题，因此在安装新主题后，您必须将自定义代码复制并粘贴到新主题中。 从29/05/2020起， //userstyles.org/styles/174317/material-dark-github上的主题将不会收到新的更新。 设定值 提供3个主题：海洋，黑暗，白夜 或者，您可以选择“自定义”主题，并使用色相，饱和
用Github Pages建了一个主页示例
justforuse的博客
04-02 1392
至于为什么试了一次Github Pages，完全是刷知乎关于建立个人网站的时候看到的，虽说买了一个域名用来学(de)习(se)，但站多不压身啊~按照官网的指导就做成了一个个人网站，步骤还算简单，也不需要很长时间。官方网站(上不去的话自己想办法吧，这事儿不能说的太细）简单的翻译一下流程： 在Github上建立一个新的目录，项目名称为 xxxx.github.io（xxx就是你的github用户名），剩
material-ui_体验Material-UI
weixin_26746861的博客
07-18 943
material-uiI have heard many great things about Material-UI the popular React.js framework. As stated in their about page: 我听说过Material-UI的流行React.js框架有很多很棒的东西。 如其关于页面所述 ： Material-UI started back in...
初识Material-UI
weixin_34310369的博客
04-04 209
简介 Material-UI是一组实现了谷歌Material Design设计原则的React组件集合，江湖传言使用Material-UI可以使我们的页面颜色更鲜艳，动画效果更突出（符合Material Design的设计风格），那么接下来就由我来带大家围观下吧~ What is Material Design 究竟什么是Material Design呢？ “设计是创造的艺术，我们的目标就是要满...
Material-UI -- 初始上手篇
weixin_33912445的博客
01-10 664
2019独角兽企业重金招聘Python工程师标准>>> ...
Material-UI入门文档
热门推荐
雾都
09-23 1万+
Material-UI看着官网文档用自己的语言翻译一下，因为一直找不到Material-UI的中文文档。。。心累
material-ui_满足Material-UI —您最喜欢的新用户界面库
07-24 1266
material-uiby Code Realm 通过Code Realm 满足Material-UI —您最喜欢的新用户界面库 (Meet Material-UI — your new favorite user interface library) Update (17/05/2018): Material-UI v1.0.0 is out! Check out this post by ...
使用 Hexo，Material Theme 以及 Github Pages 搭建个人博客
weixin_30613433的博客
05-31 95
title: 使用 Hexo，Material Theme 以及 Github Pages 搭建个人博客 date: 2019-04-29 00:05:50 tags: 其他 --- 准备条件 Node.js npm Git GitHub账号 开始搭建 hexo init Blog cd Blog npm install hexo-deployer-git --save npm insta...
如何将vuepress项目部署到GitHub Pages
最新发布
04-07
您可以按照以下步骤将vuepress项目部署到GitHub Pages： 1. 首先，您需要在GitHub上创建一个新的仓库，并将其命名为username.github.io（其中username是您的GitHub用户名）。 2. 在您的vuepress项目中，创建一个新的分支，命名为gh-pages。这个分支将用于托管您的网站。 3. 在vuepress项目的根目录中，创建一个名为deploy.js的文件，并添加以下代码： ``` const { exec } = require('child_process') exec('npm run docs:build && cd docs/.vuepress/dist && git init && git add . && git commit -m "deploy" && git push -f git@github.com:username/username.github.io.git master:gh-pages', (error, stdout, stderr) => { if (error) { console.error(`执行错误: ${error}`) return } console.log(`stdout: ${stdout}`) console.error(`stderr: ${stderr}`) }) ``` 其中，username是您的GitHub用户名，docs:build是您在package.json文件中定义的构建命令。 4. 安装并配置gh-pages模块，运行以下命令： ``` npm install gh-pages --save-dev ``` 5. 在package.json中，添加以下代码： ``` "deploy": "node deploy.js" ``` 6. 最后，在终端中运行以下命令： ``` npm run deploy ``` 这将自动构建您的vuepress项目，并将生成的站点文件推送到gh-pages分支中。您的网站现在应该可以在https://username.github.io中访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值