hexo+GitHub博客搭建實戰(zhàn)

一.準(zhǔn)備工作

1、安裝 Node.js: https://nodejs.org/en/

2捏鱼、安裝 Git: https://github.com/waylau/git-for-win

Git教程 https://github.com/waylau/git-for-win廖雪峰老師的教程蕾额,非常好崭庸。

3梳玫、安裝完成后谍珊,在開始菜單里找到“Git”->“Git Bash”治宣,名稱和郵箱是Github上的。

git_1.png

4砌滞、安裝 Hexo侮邀。所有必備的應(yīng)用程序安裝完成后,即可使用 npm 安裝 Hexo贝润。

$ npm install -g hexo-cli

4.1 安裝hexo出錯:

unable to verify the first certificate(無法驗證第一證書)
hexo_1.png

查找到解決方案:

hexo_2.png

參考網(wǎng)址:npm報錯

依據(jù)解決方案所述绊茧,在命令行輸入如下命令,來取消ssl驗證:

npm config set strict-ssl false

之后安裝就會成功了题暖,顯示如下:

hexo_3.png

二按傅、配置Github

首先注冊捉超、登錄 https://github.com/

記住自己的Username(很重要)

然后右上角選擇 Create a new repository https://github.com/new

Repository name(填自己的名字) yourname.github.io(yourname與你的注冊用戶名一致,這個就是你博客的域名了)

github_1.png

倉庫創(chuàng)建完成后,開始生成添加秘鑰唯绍。

在終端(cmd)輸入:

ssh-keygen -t rsa -C "Github的注冊郵箱地址"

一路Enter過來就好拼岳,待秘鑰生成完畢,會得到兩個文件id_rsaid_rsa.pub况芒,用帶格式的記事本打開id_rsa.pub惜纸,Ctrl + a復(fù)制里面的所有內(nèi)容,然后進入https://github.com/settings/ssh

github_2.png

將復(fù)制的內(nèi)容粘貼到Key的輸入框绝骚,隨便寫好Title里面的內(nèi)容耐版,點擊Add SSH key按鈕即可。

若沒有配置GitHub压汪,就執(zhí)行第三步(初始化博客)粪牲,會出現(xiàn)如下錯誤:

hexo_4.png

三、初始化博客

在電腦F盤(自己隨意)目錄下新建文件夾 test止剖,進入test腺阳,按住Shift鍵點擊鼠標(biāo)右鍵,點擊“在此處打開命令窗口”:

blog_1.png

輸入

hexo init blog

稍微等待下穿香,速度有點慢亭引。成功提示:

INFO  Start blogging with Hexo!

因為你初始化hexo 之后source目錄下自帶一篇hello world文章, 所以直接執(zhí)行下方命令:

$ hexo generate
# 啟動本地服務(wù)器
$ hexo server
# 在瀏覽器輸入 http://localhost:4000/就可以看見網(wǎng)頁和模板了
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

訪問http://localhost:4000/,便可以看到網(wǎng)站初步的模樣皮获,不要激動焙蚓,我們還要把網(wǎng)頁發(fā)布到Github上去。

blog_local_server.png

四洒宝、配置博客

blog目錄下购公,用sublime/notepad++等文本編輯器打開_config.yml文件,修改參數(shù)信息

特別提醒雁歌,在每個參數(shù)的:后都要加一個空格

1.修改網(wǎng)站相關(guān)信息

title: wangwlj測試所用博客
subtitle: 積跬步以至千里君丁!
description: 網(wǎng)頁描述
author: wangwlj
language: zh-Hans
timezone: Asia/Shanghai

languagetimezone都是有輸入規(guī)范的,詳細(xì)可參考 語言規(guī)范時區(qū)規(guī)范将宪。

2.配置部署(qwerty200696,修改成自己的)

deploy:
  type: git
  repo: https://github.com/qwerty200696/qwerty200696.github.io
  branch: master

其中repo項是之前Github上創(chuàng)建好的倉庫的地址橡庞,可以通過如下圖所示的方式得到:

github_3.png

branch是項目的分支较坛,我們默認(rèn)用主分支master

3.配置統(tǒng)一資源定位符(個人域名)

如果有個人域名的話可以設(shè)置扒最,否則跳過即可丑勤。GitHub地址也可以。

url: http://inerdstack.com

對于root(根目錄)吧趣、permalink(永久鏈接)法竞、permalink_defaults(默認(rèn)永久鏈接)等其他信息保持默認(rèn)耙厚。

五、發(fā)表文章

1.新建一篇博文岔霸,在CMD中輸入

$ hexo new "我的測試文章"

INFO  Created: F:\test\blog\source\_posts\我的測試文章.md

2.找到該文章薛躬,打開,使用Markdown語法呆细,該語法介紹可以查看:markdown語法

3.接著輸入如下的一系列命令:

F:\test\blog
$ hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

F:\test\blog
$ hexo generate
INFO  Start processing
INFO  Files loaded in 1.48 s
#省略
INFO  29 files generated in 4.27 s

$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

我直接跑的server型宝,也可以。

最后一步絮爷,發(fā)布到網(wǎng)上趴酣,執(zhí)行:

F:\test\blog
$ hexo deploy
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
#省略

其中會跳出Github登錄,直接登錄坑夯,如果沒有問題岖寞,在瀏覽器輸入qwerty200696(換成你的).github.io/

然后就可以看到已經(jīng)發(fā)布了。

4.錯誤記錄一:

 deploy not found: git
error_1.png

解決方案:執(zhí)行如下語句后柜蜈, 再部署即可:

npm install hexo-deployer-git --save

參考自:https://www.v2ex.com/t/175940

error_1_done.png

5.錯誤記錄二:

今天運行:

hexo deploy

同步文章到github時仗谆,出錯:

fatal: unable to access 'https://username:password@github.com/username/username.github.io.git/': SSL certificate problem: unable to get local issuer certificate
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: fatal: unable to access 'https://username:password@github.com/username/username.github.io.git/': SSL certificate problem: unable to get local issuer certificate

    at ChildProcess.<anonymous> (D:\test\blog2\node_modules\hexo-util\lib\spawn.js:37:17)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at ChildProcess.cp.emit (D:\test\blog2\node_modules\cross-spawn\lib\enoent.js:40:29)
    at maybeClose (internal/child_process.js:920:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5)
git_hexo_deploy_error.png

解決方法:執(zhí)行如下語句:

$ git config --global http.sslVerify false

參考自:git獲取代碼提示SSL certificate problem: unable to get local issuer certificate

(optional)另外,可將_config.yml中的repo修改為如下標(biāo)準(zhǔn)格式:

repo: https://用戶名:密碼@github.com/用戶名/用戶名.github.io.git

參考自: hexo提交報錯 unable to access

之后再次運行發(fā)布指令跨释,終于成功:

hexo deploy
git_hexo_deploy_error_done.png

六胸私、添加圖片

經(jīng)過上面的配置后,發(fā)現(xiàn)上傳的博客文章里面的本地圖片居然顯示不來(沒有同步上傳)鳖谈。

于是岁疼,找到解決方案:

1 把主頁配置文件_config.yml 里的post_asset_folder:這個選項設(shè)置為true

2 在你的hexo目錄下執(zhí)行這樣一句話npm install hexo-asset-image --save,這是下載安裝一個可以上傳本地圖片的插件

3 等待一小段時間后缆娃,再運行hexo n "xxxx"來生成md博文時捷绒,/source/_posts文件夾內(nèi)除了xxxx.md文件還有一個同名的文件夾

4 最后在xxxx.md中想引入圖片時,先把圖片復(fù)制到xxxx這個文件夾中贯要,然后只需要在xxxx.md中按照markdown的格式引入圖片:

![](xxxx/圖片名.jpg)

注意: xxxx是這個md文件的名字暖侨,也是同名文件夾的名字。只需要有文件夾名字即可崇渗,不需要有什么絕對路徑字逗。你想引入的圖片就只需要放入xxxx這個文件夾內(nèi)就好了,很像引用相對路徑宅广。

5 最后檢查一下葫掉,hexo g生成頁面后,進入public\2017\02\26\index.html文件中查看相關(guān)字段跟狱,可以發(fā)現(xiàn)俭厚,html標(biāo)簽內(nèi)的語句是![](2017/02/26/xxxx/圖片名.jpg),而不是<img src="xxxx/圖片名.jpg>驶臊。(這點可以跳過挪挤,按照1-4步執(zhí)行下來一般沒有問題叼丑。)

6.hexo s,運行本地服務(wù)器扛门,打開http://localhost:4000/鸠信,可實時查看修改情況。

7.hexo g尖飞,同步到github症副。

七、總結(jié)

發(fā)布文章的步驟:

1政基、hexo new 創(chuàng)建文章

2贞铣、Markdown語法編輯文章

3、部署(所有打開CMD都是在blog目錄下)

hexo clean #清除緩存 網(wǎng)頁正常情況下可以忽略此條命令
hexo generate #生成
hexo server #啟動服務(wù)預(yù)覽沮明,非必要辕坝,可本地瀏覽網(wǎng)頁
hexo deploy #部署發(fā)布

簡寫Tips:

  1. hexo n “我的博客” == hexo new “我的博客” #新建文章

  2. hexo p == hexo publish

  3. hexo g == hexo generate#生成

  4. hexo s == hexo server #啟動服務(wù)預(yù)覽

  5. hexo d == hexo deploy#部署

參考文獻:

  1. 教你免費搭建個人博客,Hexo&Github
  2. hexo生成博文插入圖片

本文在GitHub博客上即時更新 https://qwerty200696.github.io/2017/09/08/blog_setup/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末荐健,一起剝皮案震驚了整個濱河市酱畅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌江场,老刑警劉巖纺酸,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異址否,居然都是意外死亡餐蔬,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門佑附,熙熙樓的掌柜王于貴愁眉苦臉地迎上來樊诺,“玉大人,你說我怎么就攤上這事音同〈逝溃” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵权均,是天一觀的道長顿膨。 經(jīng)常有香客問我,道長叽赊,這世上最難降的妖魔是什么虽惭? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮蛇尚,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘顾画。我一直安慰自己取劫,他們只是感情好匆笤,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著谱邪,像睡著了一般炮捧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上惦银,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天咆课,我揣著相機與錄音,去河邊找鬼扯俱。 笑死书蚪,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的迅栅。 我是一名探鬼主播殊校,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼读存!你這毒婦竟也來了为流?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤让簿,失蹤者是張志新(化名)和其女友劉穎敬察,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體尔当,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡莲祸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了居凶。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虫给。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖侠碧,靈堂內(nèi)的尸體忽然破棺而出抹估,到底是詐尸還是另有隱情,我是刑警寧澤弄兜,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布药蜻,位于F島的核電站,受9級特大地震影響替饿,放射性物質(zhì)發(fā)生泄漏语泽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一视卢、第九天 我趴在偏房一處隱蔽的房頂上張望踱卵。 院中可真熱鬧,春花似錦、人聲如沸惋砂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽西饵。三九已至酝掩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間眷柔,已是汗流浹背期虾。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留驯嘱,地道東北人镶苞。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像宙拉,于是被迫代替她去往敵國和親宾尚。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容