使用Hexo在GitHub Pages上搭建部署免费的个人博客网站(上:GitHub搭建)——最详细全面解读教程(没有之一)

标签:Hexo GitHub使用技巧 博客 网站搭建

点击此处,浏览效果更好

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

即将毕业的大四狗,一直想做一个自己的博客网站,用来管理和分享知识,当然这也是一张展示自己的名片,一份精彩全面的简历,毕竟在某种程度上展示着个人的能力、经验、经历,体现了个人知识的深度和广度。

摘要

本章主要讲在GitHub上搭建好博客网站部分,在网页部分主要通过上传开源的项目文件先直接部署以正常显示。我会在下章详细讲解用Hexo部署开源博客网站,以及在后期日常如何写博客文章等。

接下来,我会详细介绍搭建个人网站的具体流程、以及可能会遇到的问题,从注册一个域名(可独立访问的路径网址),到创建一个空间并编写一个网站代码,然后绑定域名、设置域名解析,可以通过域名正常访问这个网站。

整个流程都是自己摸索后的操作过程记录,真实案例,操作简单,适合没有开发经验的小白。如有不明白的地方,欢迎到 blog.mintools.cn 留言询问。

完成效果

image

总体思路

  1. 购买域名
  2. 创建GitHub个人网站项目和代码仓库
  3. 上传个人网站网页到GitHub仓库
  4. 绑定域名,并设置域名解析,关联域名和网站代码仓库

具体步骤

1. 购买域名

1.1 向域名服务提供商购买域名

国内:万网(被阿里云收购在旗下)、腾讯云新网
国外:GoDaddy(狗爹爹的广告真心多)等

域名可以从这些域名服务提供商进行购买,价格上综合比较之后,阿里云和腾讯云的价格是最便宜的,特别是阿里云。虽然狗爹爹的首年费用比阿里云还低,但是第二年开始以后的续费相当贵,所以价格上还是阿里云最棒,况且阿里云的域名服务也是很好的,毕竟收购了国内巨头的万网。

点击此处可以免费领取阿里云产品的优惠券

在域名查询栏中搜索自己想要的域名,域名查询没有被注册的话,就可以直接加入清单购买了。


image
image

登录阿里云账户,进行购买、付费操作。相信大家都要淘宝账号,可以直接使用账号登录的,很方便。


image

购买确定订单时,注意要选择域名持有人信息(个人还是企业),还有阿里云会赠送免费版的企业邮箱,可以开通50个邮箱账号,且每个账号有5G邮箱容量和2G网盘容量。


image
image

付费建议直接支付宝,快捷方便。


image

购买成功后,域名会进入域名实名认证,如果是个人,只需填写身份证之类简单个人实名信息,大约等待1~3天就好了,我的只用了不到1天就通过了。如果是企业就需要营业执照副本或者组织结构代码证之类,需要材料较多。我想看本篇文章的小白们大都是个人的吧。


image
1.2 温馨提示1

购买域名的时候需要进行实名认证,搭建网站还要买主机,然后就要将域名和主机一起进行审核备案了。有很多的小伙伴听说国际域名绑定境外的主机是不需要备案的,觉得很棒棒,但是国内的备案,备案审核速度虽说有点慢的,3~15天就好,上传证件之类的也要花点时间,不够自由。但是如果网站的目标群体主要是国内用户的话,还是老老实实备案注册,免得到时候被限制访问。
(PS:当然本篇文章介绍的用GitHub,所以不需要购买主机。)

空间有免费空间,也有收费空间。免费的不够稳定,而且大都是不安全的,有的甚至在你的网站上加广告,所以如果是搭建其他网站需要购买主机,还是建议大家买正规的,比如阿里云、华为云的。

当然,如果真说又免费又稳定的空间的话,GitHub算是这样的存在。GitHub允许上传个人网站项目并自定义域名,而且又有稳定的服务,的确是最好的选择。所以国内现在也有很多类似的服务,例如GitCafe、coding、CSDN的CODE、开源中国OSChina等,但GitHub依旧是主流存在。

2. 创建GitHub个人网站项目和代码仓库

2.1 GitHub简介

GitHub(https://github.com/ ) 是一个面向开源及私有软件项目的托管平台(或者说远程代码仓库)。GitHub是一个全世界程序员聚集起来的地方,大家互相分享自己的代码,提升别人,也提升自我。大家都在为着开源社区努力着。

这里我们使用GitHub上的开源项目搭建个人博客,无需购买服务器,所以没有数据库访问,很适合建立自己的博客或者个人网站,当然简单公司介绍静态网站也是可以的,但大型网站、动态网站是不支持的。

想要了解GitHub的基础用法,可以简单查看 [从0开始学习 GITHUB 系列之初识 GITHUB][从0开始学习 GITHUB 系列之加入 GITHUB],语言通俗易懂,讲的也基础简单,可以初步了解一下GitHub。

2.2 注册GitHub账号

使用GitHub,首先需要拥有一个GitHub账号,没有的赶紧注册一个,超级好用,而且对于一个优秀程序猿的必备,有的公司甚至将此列入招聘要求。

在注册页面需要填用户名、邮箱、密码,这个用户名如果你填写的是username,以后在GitHub 搭建博客的时候默认生成的博客地址就是 http://username.github.io ,所以给自己取个好点的用户名吧。

现在已经有了github账号,且用户名是username.


image
2.3 创建仓库,新建个人网站项目

登录GitHub之后,点击New repository创建项目仓库。


image

由于我们是搭建的是一个 个人网站项目,所以仓库的名称需要按照个人网站项目的规定,Repository name设置为 username.github.io。这是GitHub分配给每个用户的GitHub Pages地址,要使用它只用新建一个名字为 username.github.io 的仓库就行了,仓库里面存放你的个人主页代码。例如,我的GitHub用户名是Elvis-Rothschild,那我就要填写 Elvis-Rothschild.github.io。然后选择公开模式,接着点击创建仓库按钮。


image

仓库建好之后,应该是这样的。进入了项目主页面,点击设置点击settings按钮。


image

进入settings页面,选择一个模板,点击【Choose a theme 】来发布生成主题页面。


image
image
image

现在我们在github上的主页就搭建完成了,只要在地址栏输入 username.github.io 就可以访问你的主页了。


image
温馨提示2

尽管GitHub个人网站项目是免费的,但还是有一些限制的,不过对大多数人来说,完全够用了。

  1. 单个仓库大小不超过1GB,上传单个文件大小不能超过100MB,如果通过浏览器上传不能超过25MB
  2. 个人网站项目也不例外,最大空间1GB
  3. 个人网站项目每个月访问请求数不能超过10万次,总流量不能超过100GB
  4. 个人网站项目一小时创建数量不能超过10个

当然了,这些政策可能随时改变,可以通过此网页查看最新政策。
https://help.github.com/articles/what-is-github-pages/#recommended-limits

3. 上传个人网站网页到GitHub仓库

3.1 编写网站代码(或用开源的网站项目)

自动生成的页面,肯定是不完美的,我们希望能够自己设计自己的个人网站。因此,我们可以自己设计编写一个网页文件,命名为index.html。然后上传到GitHub个人网站项目上就可以了。


image

当然,如果你目前没有编写能力,GitHub上也有很多开源的项目。要知道GitHub是全世界最大的开源项目社区,关于网站制作的项目非常多。比较著名开源主题有hexo、jekyll等。我使用是开源项目NexT主题。

这里,你也可以先拷贝我的,进入我的项目 https://github.com/Elvis-Rothschild/Elvis-Rothschild.github.io/new/master ,然后下载源码。解压之后,拿到里面的index.html文件。

image

image

实在不行,这步可以跳过,就先用GitHub生成的主题模版,只要能正常显示就可以,在下章会为大家详细讲解用Hexo部署自己的博客网站。

3.2 上传index.html文件

进入个人网站项目主页,点击上传文件Upload files按钮,进入上传文件页面,将index.html文件拖入蓝色大圈圈区域,点击提交按钮即可提交成功。此时打开网址 username.github.io 就可以看到主页已经改变为新上传的网页了。


image

当然,为了防止自己编辑的内容与拷贝来的有冲突,可以点击右上角的fork,创建该项目的一个分支,自己进行编辑,自己编辑的内容不会和项目创建者的版本相冲突。

4. 绑定域名,并设置域名解析,关联域名和网站代码仓库

网页上传成功了,GitHub为我们每个注册的用户提供了一个唯一的 username.github.io 网址,GitHub服务器会帮我们托管这个 username.github.io 所用到的全部代码,自动运行,所以我们就不需要购买服务器或者云主机来自己运行了。但是,我们之所以购买域名,就是不想总是通过 username.github.io 来访问我们的个人网站,而是希望通过自己的独立域名来访问。

那么,我们就一起来把 username.github.io 和自己购买的域名相关联吧。

4.1 在GitHub端将域名绑定到 username.github.io

点击我们的个人网站项目设置进入settings按钮,进入settings页面,找到【Custom domain】选项,输入我们在阿里云上购买的域名,然后点击Save保存。完成后返回到仓库,可以发现多了一个叫CNAME的文件,其内容就是刚才填写的在阿里云上购买的域名。


image
4.2 fork分支项目设置(未创建fork则跳过)

如果创建了fork分支项目,那么还需在设置里将fork项目名称修改为 username.github.io。


image

同时,在该项目下新建文件,命名为CNAME,内容为在阿里云上购买的域名。

4.3 在域名端将DNS指向 username.github.io

接着,我们还要将购买的域名解析到这个网站项目上。打开阿里云管理控制台,进入域名解析设置界面,点击添加解析。


image

进入如下页面,添加如下信息:

记录类型:CNAME,主机记录:@,记录值一定要是 username.github.io,TTL:一般都是10分钟。

image

稍等片刻,域名解析就会生效。

4.4 解析成功

解析成功,你的网站就建立成功了。在浏览器地址栏输入:http://域名(例如:http://blog.mintools.cn ),就可以转到你自己的网站了。

image

当然由于是开源的项目,此时的界面是GitHub默认主题的样式和内容,我会在下章讲解如何进一步的修改,以及往其中添加新的页面,如何进行文章的更新等等。

版权声明:本文为博主 @残灯飞雪
的原创文章,欢迎转载,传播知识。著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明作者和出处并留言告知博主,方便文章有误改正之后能找到原文!!!
原文链接:blog.mintools.cn

其他精彩文章:

使用Hexo在GitHub Pages上搭建部署免费的个人博客网站(下:Hexo部署)——最详细全面解读教程(没有之一)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容