前言：搭建個人網站早就想做了，最近有空就宅在家學習，突然發現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="width: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