教你免费且快速地搭建个人网站

标签: | 发表时间:2018-01-06 22:26 | 作者:
出处:http://mp.weixin.qq.com


作者简介


本篇来自  GoileoLee的投稿,分享了如何拥有自己的专属域名,大家赶紧试试看!

GoileoLee的博客地址:

http://blog.csdn.net/u012487644


前言


这篇文章主要讲如何拥有自己的专属域名。你可以在属于自己的网页上展示你的 github、微信、微博、QQ、Twitter、Email等信息,但主要是展示自己的作品。玉刚大神说过:树立个人品牌,让名企hr们主动来找你!

有了个人网站,可能就又多了一些学( zhuang )习( bi )的动力吧!
所以,拥有自己的网站,算是迈出了第一步!


域名怎么来的


好吧~ 我的域名是这么来的......

这里我们先选择第二个,BAT 中的 A。

输入你想注册的域名,查询这个域名是否被别人注册了。

Tips:我的域名是 goileo.top,为了演示注册过程,显示未注册状态,所以这里以 goileolee.top 为例。

这里我选择了一个 .to p的域名。 什么? “我为什么选.top 后缀的?” 额… 这个问题就触及到我的资产盲区了。 因为它是最“贵”的!!!

接下来,加入清单,结账。 至此,这个域名就是你的了。

域名注册成功后,需要进行实名认证。 

不过你还得对它进行解析,这个我们下面详细说。

这时的域名什么都做不了,因为没有服务器,阿里的服务器可不免费。所以接下来介绍 GitHub Pages。


 免费的服务器 GitHubPages


什么是 GitHub Pages?

GitHub Pages is a static site hosting service。

这里有官方的解释 GitHub Pages - 传送门 :

https://help.github.com/categories/github-pages-basics/

简单说,它能提供给你1G空间的存储,让你放东西,然后还能请求到。是不是很6…

GitHub Pages也有一些限制条件,我们主要用GitHub Pages来做个人站点,所以一切OK。

不过也有人认为 用GitHub Pages做个人网站是不道德的 传送门:

https://www.zhihu.com/question/20717014

接下来,登录 github.com,点击右上方头像旁的加号 new repository。仓库名字为固定格式:

你的名字 .github.io

描述… 公开… 初始化 README…  

仓库创建好了,这时你可以写一个简单的 index.html 文件放到仓库里,然后在浏览器中输入:你的名字 .github.io/ 试试。 如:

http://goileolee.github.io

有神奇的效果…


域名与GitHubPages 相绑定


解析域名

  • 打开阿里云

  • 登录账号 

  • 打开控制台 

  • 点击

添加一个记录类型为 CNAME,主机记录为@,记录值为 github 的仓库路径。

Tips: 记录类型和主机记录都有解释,很好理解。 记录值就是你希望请求域名跳转到的路径。 TTL 值可以理解为缓存时间,这里是每10分钟刷新一次域名的记录值。 调试可以设置小点,正常使用后记录值不会轻易发生更改,可以将 TTL 值设置大一点。

看上图,主机记录决定了解析后的域名。如果需要实现带或不带 www 都能访问到网址,则建议同时添加一个主机记录为 www 的解析。

Tips: 这里注意一下:因为买域名的同时会有一个企业邮箱,Aliyun 会默认生成邮箱的解析记录。 其中记录类型有 txt 和 mx 的,会影响到 CNAME 类型的解析。

阿里攻城狮大佬讲得很清楚了,所以删除 TXT 和 MX 类型的解析就好了。


为仓库添加 CNAME 文件


在仓库页面点击 Create new file,创建一个新文件; 

文件名为 CNAME; 

内容为刚刚申请的域名 goileolee.top

Tips:没有 www,表示解析到 http://goileolee.top 请求流程为:http://www.goileolee.top --> http://goileolee.github.io --> http://goileolee.top

至此,完成绑定!

写在后面


现在已经可以通过访问自己的专属域名来打开指定网页。 

我们的目的是搭建个人网站,不过,网站如何设计得需要前段技术HTML、CSS、JS,这就触及到我的知识盲区了。。哈哈,别急这里提供两种方式。

  • 跳转到已有的博客:

http://blog.csdn.net/u012487644

  • 运用GitHub上开源的框架 

在GitHub上搜 jekyll、hexo 即可。

我的站点用到的开源主题是基于 Vno-jekyll 框架的更改,我自己做了点修改,加了目录和关于两个页面。欢迎 Fork,如果还不错记得点 Star。 

网站的主页效果如下图:

我的小站地址:

http://goileo.top

我的GitHub:

https://github.com/goileolee

感谢您的阅读!欢迎指正!


欢迎 长按下图 ->  识别图中二维码

或者  扫一扫 关注我的公众号

相关 [免费 个人网站] 推荐:

教你免费且快速地搭建个人网站

- -
GoileoLee的投稿,分享了如何拥有自己的专属域名,大家赶紧试试看. GoileoLee的博客地址:. 这篇文章主要讲如何拥有自己的专属域名. 你可以在属于自己的网页上展示你的 github、微信、微博、QQ、Twitter、Email等信息,但主要是展示自己的作品. 玉刚大神说过:树立个人品牌,让名企hr们主动来找你.

免费

- yonghai - 36氪
在昨天漫山遍野的Kindle新闻后面,有一件更加重要的事情:微软和三星达成巨额专利协议,三星每卖出一部Android设备都要向微软缴纳版税. 这意味着主要Android OEM厂商中的两家(三星和HTC)现在使用免费的Android操作系统都需要向微软付费,第三家(摩托罗拉)刚刚被Google收购.

12个精美的HTML5个人网站欣赏

- Amo - HTML5研究小组
随着IE9、Chrome、Firefox的不断更新,网页的制作技术同样发展很快. HTML5是现在Web开发领域的热点,更多的开发人员开始使 用HTML5来开发交互性强、效果出众的Web应用和游戏. 本期的HTML5 网站大观要与大家分享12个精美的HTML5个人网站作品. 希望这些HTML5 网站实例能帮助大家更好的学习HTML5网站制作.

30个不错的设计师个人网站设计案例

- emilo - 创意悠悠花园
设计师自己的个人网站会怎么设计呢. 今天分享:30个不错的设计师个人网站设计案例,希望其中有你喜欢的,或者可以给你带来灵感的. Read the rest of 30个不错的设计师个人网站设计案例 (35 words). © emilo for 创意悠悠花园, 2011. Post tags: 个人网站, 设计师, 设计案例.

如何用用WordPress博客模板搭建个人网站?

- - CSDN博客推荐文章
个人博客型网站建设的条件:域名+空间+博客程序 (免费开源的或者商业博客程序).    三步操作,快速建立.   首先,我们从wordpress.org的官方网站上下载最新版. A、登录你的空间管理面板,为WordPress建立一个数据库,以及一个具有访问和修改权限的MySQL用户.   如果您的主机提供商使用  cPanel,您可以遵照下面的说明,来创建您的 WordPress 数据库和用户.

适合个人网站的云服务组合

- - gq's blog
回想起来我折腾博客和各类网站已将近 10 年光阴,在维护 0xFFFF 的几年来,也尝试过各类不同的建站方案. 当前用到的各类服务,综合速度和成本而言,感觉可能的选择方向差不多已经成型,可以做一个总结. 若你也想低成本搭建属于自己的网站,且想拥有不俗的访问速度,这里的方案也许可以是你的一个参考.

[组图]国外最流行的五种个人网站设计风格

- princewzy - cnBeta.COM
对于一位网页设计师来说,要展示您的工作,拥有一个个人网站至关重要. 一个网站设计是否有效,关键是如何布置网站的内容. 下面我们将介绍一些设计师和艺术家的个人网站的几种布局,并看一看每种风格的若干例子.

HTML5网站大观:12个精美的 HTML5 个人网站欣赏

- Eros - cnBeta.COM
本期的 HTML5 网站大观要与大家分享12个精美的 HTML5 个人网站作品. HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强、效果出众的Web应用和游戏. 希望这些 HTML5 网站实例能帮助大家更好的学习HTML5网站制作.

个人网站,怎么应对大流量,怎么做负载均衡?

- - 知乎每日精选
应对负载和数据压力,分几个层面. 要理解硬件的瓶颈,内核的特性,压力构成,对硬件适当提升;典型的如淘宝和新浪微博,使用fusion-io做固态存储,i/o支撑能力提升了几十倍,很多优化就简单多了,当然,人家对整个mysql的多线程写入机制,cpu寻址方式,顺序写和随即写的存储分布也做了非常多的工作,不仅仅是购买硬件而已,但是核心是,理解硬件,理解系统级的处理机制,来做优化.

Android免费?毛

- Ruby - FeedzShare
来自: 36氪 - FeedzShare  . 发布时间:2011年08月17日,  已有 2 人推荐. 微软CEO Steve Ballmer在预测竞争对手产品时通常口无遮拦. 比如他去年抨击Google的Android战略时,很多人都不屑一顾. 接着Android蚕食了微软的地盘,后来又开始侵犯苹果的地盘.