使用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 上搭建一个简单的个人博客.该篇博文将在 ...
随机推荐
- svn update 产生Node remains in conflict的问题
输入:sudo svn revert --depth=infinity frontend/web/js/workplace/organization.js 最后在执行 svn up 就ok了
- Kafka文件存储机制
一.topic中partition存储分布 在本地的kafka中,我们只启动一个broker,创建两个topic:single-todo和single-todo-vip ,每个topic有两个part ...
- MongoDB系统CentOS 7.1 crash的排障过程
[作者] 王栋:携程技术保障中心数据库专家,对数据库疑难问题的排查和数据库自动化智能化运维工具的开发有强烈的兴趣. [问题描述] 最近我们有多台MongoDB的服务器CentOS 7.1系统发生了cr ...
- Hibernate之mappedBy与@JoinColumn
@JoinColumn所在实体是关系拥有方,name即拥有方对应表到参考表的外键名称. @mappedBy所在实体是关系的被拥有方,value值owner中表示被拥有类的属性. 在单向关系中不需要设置 ...
- Hbuilder用ajax连接eclipse中的servlet例子以及注意事项
今天用前端神器Hbuilder连接eclipse中的servlet,真是费了九牛二虎之力,才把问题解决 Hbuilder中的代码: test.html <!DOCTYPE html> &l ...
- 【NOIP2013】 华容道 bfs预处理+bfs
这一题我们考虑一个最裸的算法: 我们设$dp[i][j][k][l]$表示当前棋子在$(i,j)$且空格在$(k,l)$时的最小步数 然后显然随便转移一下就好了,时间复杂度为$O(q(nm)^2)$. ...
- 【洛谷mNOIP模拟赛Day1】T1 斐波那契
题目传送门:https://www.luogu.org/problemnew/show/P3938 这题出得特别吼啊~~ 通过打表或者大胆猜想斐波那契数列的一些性质,我们不难发现对于一只兔子$x$,其 ...
- 关于mpvue和wafer2-client-sdk的 微信登录失败，请检查网络状态
关于mpvue和wafer2-client-sdk的登录使用. 错误形式: <script> // import {get} from './util' import qcloud fro ...
- 关于daterangepicker取消默认值的设置
1.项目中用到了daterangepicker这个插件,需求要求不能有默认值. 2.查资料得知,可以修改插件内的属性 autoUpdateInput值来实现这个效果. 顾虑有二: 1.修改插件内容,导 ...
- jdk1.8以前不建议使用其自带的Base64来加解密
JDK1.8之前的base64是内部测试使用的代码,不建议生产环境使用,而且未来可能会移除, JDK1.8提供最新可以正式使用的Base64类, 不要使用JDK中自带的sun.misc.BASE64D ...