用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閱讀 227,224評論 6 529
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 97,916評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,014評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,466評論 1 308
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,245評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,795評論 1 320
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,869評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,010評論 0 285
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,524評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,487評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,634評論 1 366
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,173評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,884評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,282評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,541評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,236評論 3 388
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,623評論 2 370

推薦閱讀更多精彩內容