总体思路

要在github上搭建个人网站我们可以分两步走,

  1. 在github上搭建网站 即username.github.io(username是你的github用户名)
  2. 把自己的域名(如zhangsan.com)绑定到username.github.io上

完成这两步就可以通过zhangsan.com访问你在github上搭建的网站了


首先在github上搭建网站

要使用github,首先你得有个github账号,没有的赶紧去注一个,超级好用的。好了,现在默认你已经有了github账号且用户名是username。 
首先我们要新建一个repository,将Repository name那一栏设置为username.github.io, 

这是github分配给每个用户的github page地址,要使用它只用新建一个名字为username.github.io的仓库就行了,仓库里面存放你的个人主页代码。仓库建好后,应该是这样的。 

直接点击README那几个蓝色字的任意一个,进入编辑页面,将文件名设为index.html,内容随意写 

点击保存,回到仓库我们发现里面多了个index.html文件,这就是你的主页文件。 
现在我们在github上的主页就搭建完成了,只要在地址栏输入username.github.io就可以访问你的主页了(前提是你的仓库里有index.html或类似的文件,没有就新建一个文件,里面随便写点什么,存为index.html就行了)。


将username.github.io与自己的域名关联

其实对于一般的需求,把username.github.io当自己的主页也是可以的。但我们如果有自己的域名的话,完全可以直接通过自己的域名来访问username.github.io,这才叫真–个人主页嘛。 
将自己的域名与github上的主页相关联也得分两步,

  1. 在github端将域名绑定到username.github.io
  2. 在域名端将DNS指向username.github.io

    首先我们操作github端, 
    第一步:进入我们刚刚新建的仓库,点击setting进入设置界面 

    第二步:进入设置界面后找到github pages栏 

    第三步:将custom domain设置为自己的域名如zhangsan.com点击保存

    至此我们github端的设置就完成了,另外,上图中的Theme chooser栏可以选择网站的模板,不会写网站同学有福了!

    完成后我们回到仓库,发现里面多了一个叫CNAME的文件, 

    文件的内容就是我们刚才绑定的域名 zhangsan.com ,其实我们也可以完全不经过以上三步,直接在仓库里新建一个名为CNAME(注意没有后缀)的文件,将我们的域名写在里面就行了,效果是一样的。

    github端的工作完成后,只是访问username.github.io时会重定向到zhangsan.com,但目前我们的zhangsan.com还是没有内容的,因此我们需要在域名端将zhangsan.com通过dns解析到user.github.io,也就是我们在github上的空间中来。

    以阿里云为例: 
    第一步:进入域名解析设置界面 

    第二步: 添加解析 

    由于我们这里是将域名解析到另外一个域名,因此记录类型栏我们选择CNAME(别名解析),主机记录栏由于我们用的是二级域名zhangsan.com 因此选择@(空,如果出现错误提示,删掉其他这一栏为@的解析记录即可),如果我们要用三级域名www.zhangsan.com就填写www,依此类推。记录值栏填写我们要解析到的域名,这里写上username.github.io就可以了。点击保存,等个几分钟DNS就会生效了。

    至此我们的域名和github主页的双向绑定就完成了,只需要在浏览器中访问zhangsan.com就可以看到我们在github上放置的个人主页了。

    另外我们还可以再新建一条解析记录,将主机记录栏选为www其余栏与上面一样,这样zhangsan.com和www.zhangsan.com都会解析到username.github.io 。由于github自带的重定向功能,当username绑定为zhangsan.com时,来自www.zhangsan.com的解析也会被重定向到zhangsan.com上, 
     
    这样我们在浏览器地址栏输入这两个网址时都会进入zhangsan.com。当然我们也可以在github端绑定www.zhangsan.com,这样就和百度一样不论输不输入www都会进入www.baidu.com一样了,是不是很酷!


在github上搭建个人网站有几个好处:

  1. 不用花钱;
  2. 由于服务器在国外,不用备案;
  3. 代码维护方便;

缺点就是空间较小,只能支持较为简单的服务,但作为个人小站来讲已经足矣。

GitHub建立个人网站(三)相关推荐

  1. github建立静态网站,域名解析和跳转

    1.注册github账号,创建仓库,仓库名称格式是user.github.io格式.如下图的dajun1234.github.io 2.上传一个测试的html文件,内容如下: <html> ...

  2. GitHub建立个人网站(二)

    在看Github上项目时,发现有的html页面效果能很好的展现出来,而有的则不能.对这个问题很好奇,因此研究了一下,最终做到了将页面展示出来的目的.下面以我的Github的开源项目bootstrap- ...

  3. github Pages:利用github仓库做免费服务器储存,建立个人网站

    虽然githubPage的blog可能很多人写过了,但是我讲的更加详细一点, 因为照样很多人的帖子,都是空白了几个步骤,而且版本差异, 有些方法已经变了, 顺便一提:我最讨厌那些写帖子,故意空出几个方 ...

  4. 建立个人网站1:腾讯云域名购买,域名解析以及使用GitHub初步搭建网站

    建立个人网站1:申请域名,域名解析以及使用GitHub初步显示 腾讯云的学生优惠申请了一个域名,然后用了GitHub的服务器搭了网站,github优点是不用备案,域名解析把GitHub的个人域名复制过 ...

  5. 如何建立一个网站?规划、设计、目的、原则、宣传(三)

    如何建立一个网站?规划.设计.目的.原则.宣传(三) 四.网站的设计制作   1.整体形象设计   在程序员进行详细设计的同时,网页设计师开始设计网站的整体形象和首页.   整体形象设计包括标准字,L ...

  6. github page建立动态网站

    github的大名相信所有的码农都知道,github提供了一个pages功能,让你可以用来免费建立个人网站且免流量,免服务器,在这个物欲横流的世界简直是一股清流,只可惜她是静态的只能展示信息.作为码农 ...

  7. 三步建立自己的电影网站 2 (使用Cpolar发布电影网站)

    系列文章 三步建立自己的电影网站 1 (安装MacCMS10) 三步建立自己的电影网站 2 (使用Cpolar发布电影网站) 三步建立自己的电影网站 番外篇 (排除MacCMS10登录故障) 上一篇 ...

  8. Hexo+Github: 博客网站搭建完全教程(看这篇就够了)

    本篇教程首次发布在个人博客:sunhwee.com,想要获得最佳阅读体验,欢迎前往,建议用电脑查看教程文档. 文章目录 阅读须知 博客开源 前言 第一部分 搭建 Hexo搭建步骤 1. 安装Git 2 ...

  9. 用HEXO在Github建立个人博客

    以前写过在Github创建个人专属名片, 有人提问在GitHub建立网站是怎么一回事? 在github建立的博客大多是一些静态的页面, 每次更新内容需要手动生成页面, 然后push到github, 我 ...

最新文章

  1. linux 下 设置 MySQL8 表名大小写不敏感方法,解决设置后无法启动 MySQL 服务的问题
  2. mysql5.7修改连接数_Mysql 5.7 centos 7.2 修改最大连接数 无效 2018-03-08
  3. java 2类与对象[学堂在线]
  4. 刚从阿里面试回来已拿到offer想和大家分享一下(阿里面试经验)
  5. php serialize取值,PHP 序列化(serialize)格式详解
  6. 算法 --- 二叉树查找树的先序(中序、后序)遍历的js实现
  7. 一文看懂数据预处理最重要的3种思想和方法
  8. 8个Python高效数据分析的技巧
  9. fastjson 判断是否包含_Fastjson, Gson, org.json.JSON三者对于JSONObject及JSONArray的判断
  10. Spring声明式事物DataSourceTransactionManager的使用与jdbcTemplate的使用
  11. easyui+ztree 后台管理系统模板
  12. windows 驱动开发使用的一些工具
  13. 打印数组的几种方式--java
  14. PS纯色图标更换颜色
  15. 如何提取html 信息,从html中提取信息?
  16. C# .net+DevExpress自定义控件(UserControl)之分页控件
  17. LFSR和PRBS是什么关系?prbs怎么产生?
  18. PS插件-人像处理美颜磨皮瑕疵修复套装Retouch4me
  19. 【笑小枫的SpringBoot系列】【四】SpringBoot返回统一结果包装
  20. matlab 图形对称,求任意轴对称图形的核心的Matlab代码实现

热门文章

  1. 九度OJ 1005 Graduate Admission
  2. 数据结构之查找算法:B树
  3. libjpeg-turbo(1)
  4. Visual Studio配置64/32位汇编程序开发环境
  5. 字扩展、位扩展、字位同时扩展
  6. Dockerfile语法简介(精)
  7. C/C++日志写入系统log(/var/log/syslog)
  8. docker常用参数详解,docker run常用参数详解(精)
  9. PAT 1017 Queueing at Bank[一般]
  10. c#中datagridview里checkbox的使用方法[转]