摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册、DNS 设置、GitHub 和 Jekyll 设置等过程,这是我写得最长的一篇教程。我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后来者一个明确的指引,同时用这篇教程开篇,正式开始我的第八大洲之旅。
前言
作为一个技术小白,没有技术基础,看网上的教程也云里雾里,看程序员的教程相当不容易,稍微有些细节描述得不清楚自己就要绕弯路去找答案(善用搜索引擎),所以,在自己的博客搭建完成之后,我决定要将我搭建博客的过程全记录下来,以供后期和我一样的小白参考(是的,我坚信还有很多一样和我一样的人),我会尽可能详细的整理这个教程,其中的资料可能会摘录到其他人的教程,我会在后面列出了参考资料,感谢这些作者们。
为什么要开博客?可以看看我的这篇《为什么你要写博客?》
也可以看看这篇《我的博客时代》
以下以我的博客:www.cnfeat.com为例,教大家如何搭建一个独立博客。
为什么要搭建一个独立博客?
独立的才是自己的。
小白进入门槛
- 1、非常折腾,需要耐心;
- 2、也需要一定的学习能力和钻研精神;
- 3、懂一些网页基础知识,不懂也重要,参看第二和第三条;
为什么选择 GitHub Pages ?
很多人用 Wordpress,你为什么要用 GitHub Pages 来搭建?
- 1、GitHub Pages 有 300M 免费空间,资料自己管理,保存可靠;
- 2、学着用 GitHub,享受 GitHub 的便利,上面有很多大牛,眼界会开阔很多;
- 3、顺便看看 GitHub 工作原理,最好的团队协作流程;
- 4、GitHub 是趋势;
- 5、你不觉得一个文科生用 GitHub 很 Geek 吗?瞬间跻身技术界;
GitHub Pages 是什么?
GitHub Pages 本用于介绍托管在 GitHub 的项目, 不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。
GitHub Pages 可以被认为是用户编写的、托管在 GitHub 上的静态网页。
官方介绍可以看这个视频(需科学上网)
<div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/2MsN8gpT6jY?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allowfullscreen></iframe></div>
购买域名
只推荐上 GoDaddy 购买,安全,而且可以使用支付宝。
现在 GoDaddy 已经有中文版了,虽然国家显示是新加坡,但不影响使用。
> 02 GoDaddy 主页界面教程(截止至 2017 年 06 月 21 日)如下
1、查你想要的域名;
> 03 GoDaddy cnfeat 2017 搜索2、查到适合的域名之后选择「添加到购物车」;
> 04 添加到购物车3、GoDaddy 其他域名收费服务,不要管,继续「进入购物车」;
> 05 进入购物车后面的服务全部点击「不,谢谢」,免费的服务也不要用
4、确认购买 修改购买年限,默认是两年,可以修改成 1/2/3/5/10 年,随自己喜欢。现在 GoDaddy 上 .com 每年的默认费用是 7元/年。
但实际上,你看到我现在购买的是 第 1 年:¥5.86/年
第 2 年后:¥101.00/年,GoDaddy 的域名价格时常有波动,以当时为准即可。
个人博客,建议购买 5 年限,等到你 5 年后觉得还有必要,再 10 年续下去。
> 06 购物车界面如果你不是土豪,可以上网搜 GoDaddy 优惠码,一般优惠幅度是 20%~ 30% 不等
填完之后,五年的费用就从 415.56 会变成 333.95 元。
> 07 价格变动图说明一下:网上的优惠码优惠不一,你可以逐个尝试拿个最低价,这里就不一一测试了。
如图,我买了五年的费用就是 333.95 元,随后点击「前去付款」
> 08 前去付款5、结算。登录或注册界面,填完必要的信息之后,选择用支付宝结算。
> 09 结算前必须注册个账户注册后页面跳转到结算页面
> 10 下订单如果结算出现问题,可以查看这个页面。
6、检查。结算后,重新登录,去「我的账户 > 我的产品」,域名已经显示在你的账户了。
7、补充一些注意事项:
- 输入优惠码没有优惠或者优惠幅度较低,请清除浏览器 cookies 再尝试;
- 如果没有支付宝支付选项,有可能是使用的优惠码不支持支付宝,请重新清除浏览器 cookies 再尝试;
- 注册时用户填写信息时一定要输入正确的邮箱名字,否则修改十分麻烦。
- 买完域名之后一定要记得去自己的邮箱查看激活邮件,否则域名激活不了。
安装准备软件
依次下载安装。
怎么打开 Git ?
Win 平台操作
- 1、开始菜单 Git Bash
- 2、鼠标右键打开 Git Bash
Mac 平台操作
安装 Git 之后可直接在 Terminal 操作
注册 GitHub
注册你的 username 和邮箱,邮箱十分重要,GitHub 上很多通知都是通过邮箱发送。
注册过程比较简单,详细也可以看:
一步步在 GitHub上创建博客主页 全系列 by pchou(推荐)
配置和使用 GitHub
以下教程主要参考 beiyuu 的《使用GitHub Pages建独立博客》写成。
配置 SSH keys
我们如何让本地 git 项目与远程的 GitHub 建立联系呢?用 SSH keys。
检查 SSH keys的设置
首先我们需要检查你电脑上现有的 ssh key:
$ cd ~/.ssh 检查本机的ssh密钥
如果提示:No such file or directory 说明你是第一次使用 git。
生成新的 SSH Key:
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>
- 注意 1: 此处的邮箱地址,你可以输入自己的邮箱地址;
- 注意2: 此处的「-C」的是大写的「C」
然后系统会要你输入密码:
Enter passphrase (empty for no passphrase):<输入加密串>
Enter same passphrase again:<再次输入加密串>
在回车中会提示你输入一个密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。
注意:输入密码的时候没有 * 字样的,你直接输入就可以了。
最后看到这样的界面,就成功设置ssh key了:
> 13 终端设置成功添加 SSH Key 到 GitHub
在本机设置 SSH Key 之后,需要添加到 GitHub上,以完成 SSH 链接的设置。
-
1、打开本地 id_rsa.pub 文件( 参考地址 C:\Documents and Settings\Administrator.ssh\id_rsa.pub)。此文件里面内容为刚才生成的密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。
-
2、登陆 GitHub 系统。点击右上角的 Account Settings--->SSH Public keys ---> add another public keys
-
3、把你本地生成的密钥复制到里面( key 文本框中), 点击 add key 就ok了
测试
可以输入下面的命令,看看设置是否成功,git@GitHub.com 的部分不要修改:
$ ssh -T git@GitHub.com
如果是下面的反馈:
The authenticity of host 'GitHub.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?
不要紧张,输入 yes 就好,然后会看到:
Hi cnfeat! You've successfully authenticated, but GitHub does not provide shell access.
设置用户信息
现在你已经可以通过 SSH 链接到 GitHub 了,还有一些个人信息需要完善的。
Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。
$ git config --global user.name "cnfeat"//用户名
$ git config --global user.email "cnfeat@gmail.com"//填写自己的邮箱
SSH Key 配置成功
本机已成功连接到 GitHub。
若有问题,请重新设置。常见错误请参考:
将独立域名与 GitHub Pages 的空间绑定
DNS 设置
用 DNSpod,快,免费,稳定。
注册DNSpod,添加域名,如下图设置。
> 15 域名解析图其中 A 的两条记录指向的ip地址是 GitHub Pages 的提供的 ip
- 192.30.252.153
- 192.30.252.154
如博客不能登录,有可能是 GitHub 更改了空间服务的 ip 地址,记得及时到在GitHub Pages查看最新的 ip 即可
www 指定的记录是你在 GitHub 注册的仓库。
去 GoDaddy 修改 DNS 地址
更改 GoDaddy 的 Nameservers 为 DNSpod 的 NameServers。
1、点击你的账户,管理我的域名。
> 16 管理我的域名2、点击域名。
> 17 管理 DNS3、将 GoDaddy 的 Nameservers 更改成 f1g1ns1.dnspod.net 和 f1g1ns2.dnspod.net
> 18 更改成 f1g1ns1.dnspod.net如有不详可以看DNSpod提供的官方帮助
也可以看这里:一步步在GitHub上创建博客主页(3)
使用 GitHub Pages 建立博客
与 GitHub 建立好链接之后,就可以方便的使用它提供的 Pages 服务,GitHub Pages 分两种,一种是你的 GitHub 用户名建立的 username.GitHub.io 这样的用户&组织页(站),另一种是依附项目的 Pages。
想建立个人博客是用的第一种,形如 cnfeat.GitHub.io 这样的可访问的站,每个用户名下面只能建立一个。
Fork 已设置好的仓库
点击右上角的 Fork
> 19 Fork blog.io这样,你就得到我的博客仓库了。
你可以到
https://GitHub.com/你的用户名/blog.io
确认一下
然后将 blog.io 改成 你的 GitHub 用户名.GitHub.io
例如我的就改成 cnfeat.GitHub.io
改好之后,可以发现,'你的 GitHub 用户名.GitHub.io' 已经可以访问了。
将独立域名与 GitHub Pages 的空间绑定
GitHub Pages 的设置
去到你的 blog.io 仓库,点击 CNAME ,再点击右下角的 铅笔 编辑,将 cnfeat.com 改成你的域名
> 20 修订 CNAME这样,你再去你绑定的域名看看,估计已经导向到 '你的 GitHub 用户名.GitHub.io' 了。
搭建完成
至此,独立博客就算搭建完成,如需进步一完善请在参看以下文章或博客下留言。
如何更新博文
安装 GitHub desktop
下载地址:GitHub Desktop
找你的仓库 Git 地址
去到你的博客仓库:https://GitHub.com/你的用户名/blog.io
复制 clone 地址
例如我的就是
> 22 复制 clone 地址 图
clone 你仓库到本地
点击左上角的「+」号,选择 add,choose '你的 GitHub 用户名.GitHub.io' 文件夹。
如此,你的本地博客仓库就已经和 GitHub 的仓库同步起来了。
> 21 clone 你仓库到本地修订 _posts 文件夹中的 md 文件
blog.io 仓库已经自带两篇文章模板,按照模板修改即可。
> 23 按照模板修改推送文章更新
修订或新增完文章,再回到 GitHub desktop,点击同步更新即可。
24 GitHub desktop 同步更新个人博客信息配置
自己把 blog.io 中文件都点开看一遍,主要配置文件是 _config.yml ,推荐使用 sublime 打开。
修订清单如下,文档内有详细注释,可按注释逐个修订
- 博客名字及作者信息:_config.yml
- 个人介绍页面:about.md
- 代表作页面:milestone.md
- 文章模板:blog.io/_posts/2015-03-02-how-to-write.md
404页面
GitHub Pages有提供制作404页面的指引:Custom 404 Pages。
直接在根目录下创建自己的 404.html 或者 404.md 就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用。
推荐使用腾讯公益404。
图床
推荐使用七牛(10G空间,免费)。
参考资料:
- [1]一步步在GitHub上创建博客主页 全系列 by pchou(推荐)
- [2]网站优化:一步步在GitHub上创建博客主页(6) by pchou (推荐)
- [3]搭建一个免费的,无限流量的Blog----GitHub Pages和Jekyll入门 by 阮一峰(推荐)
- [4]hexo系列教程:(二)搭建hexo博客 by zippera(推荐)
- [5]hexo系列教程:(三)hexo博客的配置、使用by zippera(推荐)
- [6]hexo系列教程:(四)hexo博客的优化技巧 by zippera(推荐)
- [7]hexo你的博客 by ibruce(推荐)
- [8]Pacman主题介绍 by yangjian(推荐)
- [9]使用hexo搭建博客 by yangjian(推荐)
- [10]折腾了个Pacman主题 by wuchong(推荐)
- [11]hexo官方写作教程「Writing」
- [12]知乎上的教程:如何搭建个人独立博客?
- [13]在GitHub Pages设置独立域名的官方教程:[Setting up a custom domain with GitHub Pages]
- [14]使用GitHub Pages建独立博客 by beiyuu
- [15]git/GitHub初级运用自如 by 虫师
- [16]hexo搭建静态博客以及优化 by Joanna Wu
- [17]使用Hexo搭建个人博客 by c4fun
- [18]GitHub Pages与Hexo建个人博客流程 by Kesco
- [19]Git push时重复输入用户名密码的问题 by zippera
- [20]hexo文件结构及网站优化 by kevin chen
相关链接
- [1]GitHub Pages主页
- [2]GoDaddy域名商
- [3]DNSPOD
- [4]Hexo官方主页
- [5]GotGitHub:GitHub介绍(推荐)
- [5]图标制作网站:faviconer
- [6]本地测试页localhost:4000
关于我
这里有我的个人简介:关于我
如果你想看到我最新的文章,可以关注我的微信公众号「cnfeat」。
ChangeLog
- 2017-06-21 修订盘古之白,文字说明,修复失效图片
- 2015-11-10 01:07:55
- 2015-11-06 01:21:21
网友评论
http://www.stormjie.top
你这个是为什么?一个放到根目录,一个放到 /source 目录下, 你确定是两个都可以?
http://www.gglinux.com,欢迎串门。哈哈
https://github.com/iissnan/hexo-theme-next/issues/1048
您知道原因吗
我把hexo下的全部文件上传到了username.github.io相应工程下,并且给我的域名做了映射,但是一直是404,需要说明的是,我在github下创建的是完全空白的repository,之前我用github创建的工程映射都是正常的,我为了使用hexo将原先的工程删了。现在问题出来哪了。
免费资源: 用WordPress建站视频教程
1) 用WordPress搭建完整网站视频教程 (从零开始只需1小时)
该视频对所有的浏览者或读者免费开放。你只要跟着这个视频教程做,你就可以自己动手搭建一个专业的网站。我们会一步步教你如何建立你的第一个网站。
在YouTube观看: https://www.youtube.com/watch?v=TFP1udhVV6c
在土豆观看: http://www.tudou.com/programs/view/eDy87n_Cbpo/
2) 新手WordPress视频教程: 学习如何建立响应式网站的全套流程
只要你跟着我们这个45分钟的教程做就可以建立一个专业响应式网站(可以在手机,电脑,或平板电脑浏览)。你也可以对该网站进行任何的个性化修改(不需任何专业知识)。
在YouTube观看: https://www.youtube.com/watch?v=XssSXxaukAo
在土豆观看: http://www.tudou.com/programs/view/ql4bhKF7vro/
3) 建立WordPress电子商务网站视频 (WooCommerce教程)
如果你已经根据第一个视频教程建立了一个网站或者你已经拥有自己的WordPress网站,我们这个视频将会教大家如何使你的网站成为一个专业的电子商务网站。同样的,你也不需任何的专业知识来搭建一个功能强大的电子商务网站。
如果你需要建立一个代购网站,你也可以跟着该视频操作。你的代购网站可以收美元,人民币或其它货币。 代购网店:https://www.jiustore.com/dai-gou-online-store/
观看链接:https://www.jiustore.com/video/
因为建设网站简单,所以学习如何建立自己的网站是趋势。
了解更多:https://www.jiustore.com/build-your-own-website/
希望以上的WordPress视频教程对你有帮助。
1) 用WordPress搭建完整网站视频教程 (从零开始只需1小时)
该视频对所有的浏览者或读者免费开放。你只要跟着这个视频教程做,你就可以自己动手搭建一个专业的网站。我们会一步步教你如何建立你的第一个网站。
在YouTube观看: https://www.youtube.com/watch?v=TFP1udhVV6c
在土豆观看: http://www.tudou.com/programs/view/eDy87n_Cbpo/
2) 新手WordPress视频教程: 学习如何建立响应式网站的全套流程
只要你跟着我们这个45分钟的教程做就可以建立一个专业响应式网站(可以在手机,电脑,或平板电脑浏览)。你也可以对该网站进行任何的个性化修改(不需任何专业知识)。
在YouTube观看: https://www.youtube.com/watch?v=XssSXxaukAo
在土豆观看: http://www.tudou.com/programs/view/ql4bhKF7vro/
3) 建立WordPress电子商务网站视频 (WooCommerce教程)
如果你已经根据第一个视频教程建立了一个网站或者你已经拥有自己的WordPress网站,我们这个视频将会教大家如何使你的网站成为一个专业的电子商务网站。同样的,你也不需任何的专业知识来搭建一个功能强大的电子商务网站。
如果你需要建立一个代购网站,你也可以跟着该视频操作。你的代购网站可以收美元,人民币或其它货币。 代购网店:https://www.jiustore.com/dai-gou-online-store/
观看链接:https://www.jiustore.com/video/
希望以上的WordPress视频教程对你有帮助。如果有什么问题,请随时联系我。
192.30.252.153
192.30.252.154”是从哪里可以得到的?
已解决,没有在该文件夹下运行和hexo install ,结果就没hexo server这个命令,所以运行失败。也就没在4000端口显示
npm WARN optional dep failed, continuing fsevents@0.2.0
npm ERR! Failed to parse json
npm ERR! Unexpected token
为什么我的出现这种提示 安装失败了
fatal: repository 'https://github.com/cnfeat/cnfeat.git/' not found
所以我拷贝了下面的一个$ git clone https://github.com/wuchong/jacman.git themes/jacman
之后都是按照博客上面写得来的
[error] Error: Theme landscape does not exist.
求支招。。
Error: Theme landscape does not exist.
求这是怎么回事。。
亲测
自己搭建的时候还是有个问题,即使按博主的说法把README.md文件复制到.deploy文件夹后,再执行 hexo deploy 命令,那个README.md文件也还是被删掉了。。。
大家还是省省心,散了吧,别让github也专门封杀中国的ip了吧。
求放过github,这么多公用的博客系统干嘛不用!!!
**GitHub Pages is designed to host your personal, organization, or project pages directly from a GitHub repository.**
说的很明白了, 可以用于个人