摘要:写这篇短文的初衷是想记录一下自己建立个人站点的过程,如果有幸被你看见,并且有所帮助的话,那是最好不过了。
购买域名
在网上看了一些评论,推荐上 GoDaddy 购买,安全,而且可以使用支付宝。
这里略过过程不表。需要填一些信息,住址、电话之类的,不过没有实名制(应该可以随便填填)。注意邮箱要输入正确,否则修改十分麻烦。买完域名之后一定要记得去自己的邮箱查看激活邮件,否则域名激活不了。
在github上建立仓库
建立名为username.github.io
的repository(仓库),github会自动识别这种命名的仓库,把它设为个人主页,而不用去setting手动设置。
你可以通过http://username.github.io
来访问你的个人主页。
这里默认读者是有账号的,而且会用github,依然略过过程不表。不清楚的可看一步步在GitHub上创建博客主页-最新版。
另外我使用的是Github Desktop。
绑定域名
网上大家都推荐用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$
但是当我满心欢喜打开
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怎么可以用呢?)