使用github搭建我的html網站

時間 2020-05-20

標籤使用 github 搭建我的 html 網站欄目 Git 简体版

原文原文鏈接

前言：搭建我的網站早就想作了，最近有空就宅在家學習，忽然發現github就能夠搭建我的的純html網站，因而開始了這項工做。轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9350962.htmljavascript

　　個人網站地址：https://yulegh.github.io/vue-element-test/index.htmlcss

　　說一下，這兩天在github上建了一個第一版的，純html網站，沒有服務器，是基於vue、element ui的，樣式什麼的很難看（由於我不是作前端的，因此你們要求別那麼高，哈哈~），後續固然會繼續維護，畢竟個人目標是你們我的博客網站的（包括後臺服務器）。html

　　接下來，開始言歸正傳，如何利用github搭建html網站？前端

第一步，在 GitHub 上建立一個本身的項目

　　參考：上傳本地項目到GitHubvue

第二步，使用 GitHub pages 的方式設置本身的項目

　　參考：github 上如何直接預覽倉庫中的html，搭建本身的主頁java

第三步，就是寫項目中的 index.html 主頁

　　我這裏是使用 vue+element ui 來作的，畢竟不是很會寫css，對於我，只要能達到目的就行。git

　　代碼能夠直接從個人github上下載：vue-element-test，能夠的話能夠能給個Star就最好了。github

　　代碼以下：服務器

<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&amp;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>