使用github搭建个人html网站
前言：搭建个人网站早就想做了，最近有空就宅在家学习，突然发现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
使用github搭建个人html网站的更多相关文章
- 用github搭建网站
写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...
- GitHub搭建个人网站详细教程
GitHub搭建个人网站详细教程: http://blog.csdn.net/gane_cheng/article/details/52203759
- 使用码云或GitHub搭建简单的个人网站
视频链接:https://www.bilibili.com/video/av64294697 码云: 1.新建一个仓库 路径名会影响你的个人网站的网址(自行修改),开源(公开),其他默认 ...
- 利用git+hugo+markdown 搭建一个静态网站
利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...
- 使用express4.X + jade + mongoose + underscore搭建个人电影网站
(-｡-;), 周末过得真是快啊, 很久以前就看到imooc上有个搭建个人电影网站一期 ,二期的视频, 这两周宅家里撸玩没事干, 我也学着搭了一个, 这些东西都是基础, 只要花点时间很好学的, no ...
- 《Hexo+github搭建个人博客》
<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...
- Django搭建博客网站(四)
Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Djan ...
- Django搭建博客网站(三)
Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用 ...
- 使用Node.js+Hexo+Github搭建个人博客（续）
一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在 ...
随机推荐
- python salt 实现windows账户自动化
import random import string import json import logging import time import os import sys def usage(): ...
- “全栈2019”Java多线程第二十二章：饥饿线程（Starvation）详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- Storm Trident API
在Storm Trident中有五种操作类型 Apply Locally:本地操作,所有操作应用在本地节点数据上,不会产生网络传输 Repartitioning:数据流重定向,单纯的改变数据流向,不会 ...
- MyBatis Generator XML 配置
使用反向生成器可以生成数据库表对应的实体类和mapper映射文件: 以下是具体介绍相应xml文件的配置: 附上一张配置的模板: <?xml version="1.0" enc ...
- Python面试题整理-更新中
几个链接: 编程零基础应当如何开始学习 Python ? - 路人甲的回答 网易云课堂上有哪些值得推荐的 Python 教程? - 路人甲的回答 怎么用最短时间高效而踏实地学习 Python? - 路 ...
- php内核为变量的值分配内存的几个宏
在php5.3之前,为某变量分配内存是用宏 MAKE_STD_ZVAL; 737 #define MAKE_STD_ZVAL(zv) \ # /Zend/zend.h738 ALLOC_ZVAL(zv ...
- 云计算平台管理的三大利器Nagios、Ganglia和Splunk
综合利用Nagios.Ganglia和Splunk搭建起的云计算平台监控体系,具备错误报警.性能调优.问题追踪和自动生成运维报表的功能.有了这套系统,就可轻松管理Hadoop/HBase云计算平台. ...
- (转) centos 7.0 nginx 1.7.9成功安装过程
centos 7.0根目录 的目录构成 [root@localhost /]# lsbin dev home lib64 mnt proc run srv tmp varboot etc lib me ...
- ES6 箭头函数（Arrow Functions)
ES6 箭头函数(Arrow Functions) ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 具有一个参数的简单函 ...
- 图解安卓-c++开发-通过java 调用c++ jni的使用
接着上一节 ,很多事情用java做,效率要差一点(尤其是游戏),所以要用c++来实现,那么java如何调用c++ 首先建议一个工程 HelloJni如下图: 按照默认的配置下一步,直到完成 . 如下图 ...