前言：搭建个人网站早就想做了，最近有空就宅在家学习，突然发现github就可以搭建个人的纯html网站，于是开始了这项工作。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9350962.html
我的网站地址：https://yulegh.github.io/vue-element-test/index.html
说一下，这两天在github上建了一个初版的，纯html网站，没有服务器，是基于vue、element ui的，样式什么的很难看（因为我不是做前端的，所以大家要求别那么高，哈哈~），后续当然会继续维护，毕竟我的目标是大家个人博客网站的（包括后台服务器）。
接下来，开始言归正传，如何利用github搭建html网站？
第一步，在 GitHub 上创建一个自己的项目
第二步，使用 GitHub pages 的方式设置自己的项目
参考：github 上如何直接预览仓库中的html，搭建自己的主页
第三步，就是写项目中的 index.html 主页
我这里是使用 vue+element ui 来做的，毕竟不是很会写css，对于我，只要能达到目的就行。
代码可以直接从我的github上下载：vue-element-test，可以的话可以能给个Star就最好了。
代码如下：
<html> <head> <title>基于vue+elementui</title> <!-- 引入样式 --> <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css"> <style> /* 所有 */ #app{ width:100%; height:100%; } /* 头 */ .header { color: rgba(255,255,255,0.75); line-height: 60px; background-color: #24292e; text-align: center; } .header div{ display: inline; } .title{ } .author{ float: right; } .author-img{ width: 20px; height: 20px; } /* 内容区 */ .container{ min-height: 600px; width:100%; height: 100% } /* 左边内容区 */ .left { color: #4b595f; width: 200px; } .left ul{ height: 90%; } /* 右边内容区 */ .right{ min-width: 200px; } tbody{ font-size: 15px; color: #4b595f; } </style> </head> <body> <div id="app"> <el-container class="container"> <el-header class="header"> <div class="title"> <span>余小乐的个人demo网站</span> </div> <div @click="openGitHub" class="author"> <i class="el-icon-location-outline">yuleGH</i> <img alt="@yuleGH" class="author-img" src="https://avatars2.githubusercontent.com/u/31040588?s=40&v=4"> </div> </el-header> <el-container> <el-aside class="left"> <el-menu :default-active="activeIndex"> <el-menu-item index="1" @click="open(aboutMeUrl)"><i class="el-icon-service"></i>关于我</el-menu-item> <el-submenu index="firstMenu.id" v-for="firstMenu in menus" :key="firstMenu.id"> <template slot="title"><i :class="firstMenu.iconClass"></i>{{ firstMenu.name }}</template> <el-menu-item-group v-for="secondMenu in firstMenu.children" :key="secondMenu.id"> <template slot="title">{{ secondMenu.name }}</template> <el-menu-item v-for="thirdMenu in secondMenu.children" index="thirdMenu.id" :key="thirdMenu.id" @click="open(thirdMenu.url)">{{ thirdMenu.name }}</el-menu-item> </el-menu-item-group> </el-submenu> </el-aside> <el-main class="right"> <iframe style="100%; height:100%; border: 0;" :src="iframeUrl"></iframe> </el-main> </el-container> </el-container> </div> <!-- 引入组件库 --> <script type="text/javascript" src="lib/vue.js"></script> <script type="text/javascript" src="lib/elementui/index.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { activeIndex : "1", aboutMeUrl : "aboutme.html", iframeUrl : "aboutme.html", menus : [ { name: "dialog", id: "dialog", iconClass: "el-icon-message", children:[ { name: "Notification 通知", id: "notification", children: [ {name: "demo1", id: "noti-demo1", url: "dialog/notification/notification.html"} ] } ] } ] }, methods: { open(url){ this.iframeUrl = url; }, openGitHub(){ window.open("https://github.com/yuleGH", "_blank"); } } }); </script> </body> </html>
网站样子，现在东西还是比较少，后续会慢慢加的。
转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9350962.html