使用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的super用法及含义
注释:以下都是在python2.7版本验证的 总括:1.python解决二义性问题,经历了深度优先算法.广度优先算法.拓扑排序算法,目前python的版本都是使用拓扑算法(C3) 2.严谨sup ...
- Django 使用getattr() 方法获取配置文件的变量值
在django项目的开发过程中,有时需要获取配置文件里的变量值,可以通过下面这样的方式去进行获取 from django.conf import settings item = getattr(set ...
- storm配置详解
storm的配置文件在${STORM_HOME}/conf/storm.yaml.下面详细说明storm的配置信息. java.libary.path:storm本身依赖包的路径,有多个路径的时候使用 ...
- HTML+Javascript制作拼图小游戏详解（二）
上一篇我们说了网页的基本布局.接下来将为大家带来具体的实现方法. 拼图通表格来实现,做一个方形的表格,改变其大小使之如图所示. 试想一下如果我们将一张图片剪成6张分别放入对应位置,然后再把它打乱,这样 ...
- Python初体验（一）—【配置环境变量】【变量】【input】【条件语句】【循环语句】
写在前面的: 作为一个控制专业的女研究生,不知道每天在研究什么,但总归逃脱不了码代码的命运.之前也学习过一些C语言.C++,基础嘛,稍稍微有一些.本不想走上码农的道路,天真烂漫的过此生(白日梦过程中. ...
- Django中指定生成表名的方法
在模型类中定义元类: class Meta: de_table = 'tableName' #指定表名
- 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
- EF基础知识小记七(拆分实体到多个表以及拆分表到多个实体)
一.拆分实体到多个表 1.在日常开发中,会经常碰到一些老系统,当客户提出一些新的需求,这些需求需要在原来的表的基础上加一些字段,大多数人会选择通过给原表添加字段的方式来完成这些需求,方法,虽然可行,但 ...
- 隐型马尔科夫模型(HMM) 简介
先介绍一下马尔科夫模型: 马尔可夫模型(Markov Model)是一种统计模型,广泛应用在语音识别,词性自动标注,音字转换,概率文法等各个自然语言处理等应用领域.经过长期发展,尤其是在语音识别中的成 ...
- Spring Security构建Rest服务-0200-搭建项目
一.代码结构: 二.使用Springmvc开发restful API 传统url和rest区别: 三.写代码 1,编写RestfulAPI的测试用例:使用MockMvc伪造mvc package co ...