用Github和hexo建立个人站点,绑定个人域名

摘要:写这篇短文的初衷是想记录一下自己建立个人站点的过程,如果有幸被你看见,并且有所帮助的话,那是最好不过了。

购买域名

在网上看了一些评论,推荐上 GoDaddy 购买,安全,而且可以使用支付宝。
这里略过过程不表。需要填一些信息,住址、电话之类的,不过没有实名制(应该可以随便填填)。注意邮箱要输入正确,否则修改十分麻烦。买完域名之后一定要记得去自己的邮箱查看激活邮件,否则域名激活不了。

购买域名

在github上建立仓库

建立名为username.github.io的repository(仓库),github会自动识别这种命名的仓库,把它设为个人主页,而不用去setting手动设置。
你可以通过http://username.github.io来访问你的个人主页。
这里默认读者是有账号的,而且会用github,依然略过过程不表。不清楚的可看一步步在GitHub上创建博客主页-最新版
另外我使用的是Github Desktop。

hello world

绑定域名

网上大家都推荐用DNSpod,我懒得再去注册一个账号,便想试试godaddy能不能用,果然是可以的,就是不知道效果怎么样。会不会速度比DNSpod慢?

其中 A 的两条记录指向的ip地址是 GitHub Pages 的提供的 ip
• 192.30.252.153
• 192.30.252.154
如博客不能登录,有可能是 GitHub 更改了空间服务的 ip 地址,记得及时到在GitHub Pages查看最新的 ip 即可
www 指定的记录是你在 GitHub 注册的仓库。

在你的仓库根目录中要有一个CNAME文件,里面只有一行你的域名地址,比如yangzhaoyu.com,这样在访问yzygithub.github.io时,就会跳转到yangzhaoyu.com

绑定域名

hexo的安装和使用

安装

先安装Node和Git,这里不多说。
Node和Git都安装好后,可执行如下命令安装hexo:

npm install -g hexo

初始化

然后,执行init命令初始化hexo到你指定的目录:

hexo init <folder>

也可以cd到目标目录,执行hexo init

generate 生成静态页面

hexo generate #生成静态文件。

选项
-d, --deploy文件生成后立即部署网站
-w, --watch监视文件变动

yzy@yzyMacBook-Pro:~/CODE/hexo-blog$ hexo generate
INFO  Start processing
INFO  Files loaded in 431 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/jquery.fancybox.css
#此处省略n行
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/style.css
INFO  Generated: 2017/08/16/hello-world/index.html
INFO  28 files generated in 1.21 s

server 本地启动

hexo server 

启动服务器。默认情况下,访问网址为: http://localhost:4000/
下面就是在本地打开http://localhost:4000/,的页面,当然在这之前,我修改了一下_config.yml配置

初始化的本地页面

deploy 部署

安装 hexo-deployer-git。

npm install hexo-deployer-git --save

修改配置。

deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

然后输入命令

hexo deploy
yzy@yzyMacBook-Pro:~/CODE/hexo-blog$ hexo deploy
INFO  Deploying: git
INFO  Setting up Git deployment...
Initialized empty Git repository in /Users/yzy/CODE/hexo-blog/.deploy_git/.git/
[master (root-commit) 119e3e6] First commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 placeholder
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master f941f76] Site updated: 2017-08-16 11:00:35
 29 files changed, 5775 insertions(+)
 create mode 100644 2017/08/16/hello-world/index.html
 create mode 100644 archives/2017/08/index.html
#依然省略n行
 create mode 100644 index.html
 create mode 100644 js/script.js
 delete mode 100644 placeholder
To https://github.com/yzygithub/yzygithub.github.io.git
 + a48ea3f...f941f76 HEAD -> master (forced update)
Branch master set up to track remote branch master from https://github.com/yzygithub/yzygithub.github.io.git.
INFO  Deploy done: git
yzy@yzyMacBook-Pro:~/CODE/hexo-blog$

git部署成功

但是当我满心欢喜打开yangzhaoyu.com的时候,显示的却是github的404页面。一脸问号???
网上查了查,发现是因为CNAME文件没有了。
CNAME 文件要放在 hexo 项目下的 source 目录,先执行

hexo generate

然后 public 目录中就多了个CNAME文件
然后再执行

hexo deploy

CNAME就更新到了github的仓库里。页面可以正常显示了。
更多关于部署

写文章

你可以执行下列命令来创建一篇新文章。

$ hexo new [layout] <title>

你可以在命令中指定文章的布局(layout),默认为 post,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。
布局(Layout)
Hexo 有三种默认布局:post、page 和 draft,它们分别对应不同的路径,而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

主题

安装主题的方法就是一句git命令:

git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

目录是否是modernist无所谓,只要与_config.yml文件一致即可。
安装完成后,打开hexo_config.yml,修改主题为modernist
theme: modernist

打开hexo\themes\modernist目录,编辑主题配置文件_config.yml:

menu: #配置页头显示哪些菜单
#  Home: /
  Archives: /archives
  Reading: /reading
  About: /about
#  Guestbook: /about

excerpt_link: Read More #摘要链接文字
archive_yearly: false #按年存档

widgets: #配置页脚显示哪些小挂件
  - category
#  - tag
  - tagcloud
  - recent_posts
#  - blogroll

blogrolls: #友情链接
  - bruce sha's duapp wordpress: http://ibruce.duapp.com
  - bruce sha's javaeye: http://buru.iteye.com
  - bruce sha's oschina blog: http://my.oschina.net/buru
  - bruce sha's baidu space: http://hi.baidu.com/iburu

fancybox: true #是否开启fancybox效果

duoshuo_shortname: buru #多说账号

google_analytics:
rss:

更新主题

cd themes/modernist
git pull

maupassant主题-这个主题很简洁,我挺喜欢的。

$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-jade@0.3.0 --save
$ npm install hexo-renderer-sass --save

编辑Hexo目录下的 _config.yml,将theme的值改为maupassant

hexo clean
hexo g
hexo d

但是安装完页面不能正常显示,因为npm install hexo-renderer-sass安装时报错,可能是国内网络问题,可使用代理或者切换至淘宝NPM镜像安装。需要把两个都删掉,重新安装。

hexo中文文档
有哪些好看的 Hexo 主题?
hexo主题列表

图床

推荐使用七牛云(10G空间,免费)。
如何使用七牛云做为图床?


绑定域名之前的ping值

yzy@yzyMacBook-Pro:~$ ping yzygithub.github.io
PING sni.github.map.fastly.net (151.101.1.147): 56 data bytes
64 bytes from 151.101.1.147: icmp_seq=0 ttl=53 time=119.541 ms
64 bytes from 151.101.1.147: icmp_seq=1 ttl=53 time=116.832 ms
64 bytes from 151.101.1.147: icmp_seq=2 ttl=53 time=115.418 ms
64 bytes from 151.101.1.147: icmp_seq=3 ttl=53 time=116.266 ms
Request timeout for icmp_seq 4
64 bytes from 151.101.1.147: icmp_seq=5 ttl=53 time=126.318 ms
64 bytes from 151.101.1.147: icmp_seq=6 ttl=53 time=114.954 ms
64 bytes from 151.101.1.147: icmp_seq=7 ttl=53 time=118.860 ms
^C
--- sni.github.map.fastly.net ping statistics ---
8 packets transmitted, 7 packets received, 12.5% packet loss
round-trip min/avg/max/stddev = 114.954/118.313/126.318/3.624 ms
yzy@yzyMacBook-Pro:~$ ping yangzhaoyu.com
PING yangzhaoyu.com (184.168.221.39): 56 data bytes
64 bytes from 184.168.221.39: icmp_seq=0 ttl=50 time=275.438 ms
Request timeout for icmp_seq 1
Request timeout for icmp_seq 2
64 bytes from 184.168.221.39: icmp_seq=3 ttl=50 time=330.311 ms
64 bytes from 184.168.221.39: icmp_seq=4 ttl=50 time=250.071 ms
64 bytes from 184.168.221.39: icmp_seq=5 ttl=50 time=182.664 ms
64 bytes from 184.168.221.39: icmp_seq=6 ttl=50 time=290.166 ms
64 bytes from 184.168.221.39: icmp_seq=7 ttl=50 time=244.184 ms
64 bytes from 184.168.221.39: icmp_seq=8 ttl=50 time=329.109 ms
^C
--- yangzhaoyu.com ping statistics ---
9 packets transmitted, 7 packets received, 22.2% packet loss
round-trip min/avg/max/stddev = 182.664/271.706/330.311/48.164 ms

绑定完之后

yzy@yzyMacBook-Pro:~$ ping yangzhaoyu.com
PING yangzhaoyu.com (192.30.252.153): 56 data bytes
64 bytes from 192.30.252.153: icmp_seq=0 ttl=49 time=284.679 ms
64 bytes from 192.30.252.153: icmp_seq=1 ttl=49 time=289.011 ms
64 bytes from 192.30.252.153: icmp_seq=2 ttl=49 time=283.949 ms
64 bytes from 192.30.252.153: icmp_seq=3 ttl=49 time=284.091 ms
64 bytes from 192.30.252.153: icmp_seq=4 ttl=49 time=285.063 ms
64 bytes from 192.30.252.153: icmp_seq=5 ttl=49 time=284.636 ms
64 bytes from 192.30.252.153: icmp_seq=6 ttl=49 time=284.285 ms
^C
--- yangzhaoyu.com ping statistics ---
7 packets transmitted, 7 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 283.949/285.102/289.011/1.634 ms

可以看出延迟还是挺大的,不知道使用DNSpod会不会好些。。。
CDN加速什么的以后再弄吧。


奇怪,一开始在chrome上能打开yangzhaoyu.com,在其他浏览器打不开yangzhaoyu.com,在终端也ping不通,出去溜了一圈狗之后就好了,不知道是什么情况╮(╯_╰)╭。(难道是我出门的时候点开了激活邮件?但是chrome怎么可以用呢?)

参考:

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

推荐阅读更多精彩内容