利用GitHub搭建一個(gè)你的博客

Photo From Google

為什么要寫博客
作為一只程序猿脓匿,踩到坑是一件非常正常的事遍略,當(dāng)我們踩到坑的時(shí)候就會(huì)花心思去研究它,可能我們能夠在當(dāng)時(shí)把問題弄懂并把問題給解決掉崖咨《途校可是過一段時(shí)間我們又遇到了同樣的坑的時(shí)候,難道還要再去 百度 Google 重新搜索一遍嗎掩幢?這樣做效率難免太低了逊拍,倒不如在第一次解決問題的時(shí)候就把解決方法寫到我們的博客了,當(dāng)我們再一次遇到相同的坑的時(shí)候翻一翻我們之前寫的博客就能快速的把問題給解決掉际邻,何樂而不為芯丧。而且我們學(xué)習(xí)新技術(shù)的時(shí)候也可以將當(dāng)時(shí)學(xué)到的內(nèi)容寫到我們的博客,再次遇到的時(shí)候我們就可以找回當(dāng)時(shí)學(xué)習(xí)的思路世曾,繼續(xù)學(xué)習(xí)缨恒。廢話不多說谴咸,馬上開始行動(dòng)起來,搭建博客骗露!

聲明:本文在Windows下進(jìn)行操作的岭佳,Mac以及其它操作系統(tǒng)請做參考 多圖警告!

如果你覺得太麻煩萧锉,歡迎 Fork/Star 我的 GitHub 但是環(huán)境搭建以及怎么使用命令還是要看一看的珊随。

1. 環(huán)境搭建

首先需要下載兩個(gè)東西

  • node.js
  • git

具體的下載,安裝就不用多說了柿隙,基本上下載完默認(rèn)安裝即可叶洞,安裝的路徑最好先記住。Git 安裝的時(shí)候會(huì)彈出下面的窗口禀崖,我們選擇第二個(gè)即可衩辟。這樣我們在Windows的命令窗口也可以進(jìn)行Git操作了。

Git Setup Detail
兩個(gè)都安裝完了之后波附,打開命令窗口(按住Win+R后輸入CMD即可打開命令窗口)艺晴,分別輸入 node -vnpm -vgit --version 這三個(gè)命令是為了查看剛才我們安裝的軟件的版本掸屡,如果你能夠看到他們的版本號(如同下圖封寞,也許版本號會(huì)有不同),那么恭喜你折晦,環(huán)境搭建這一個(gè)大難關(guān)你已經(jīng)過了钥星,可以進(jìn)入下一步驟了。
Check Version

1.1 有問題看這里

打開我們剛才安裝軟件的路徑满着,例如我的路徑“D:\Program Files\nodejs”谦炒、“D:\Program Files\Git”。
復(fù)制我們剛才安裝的路徑,打開計(jì)算機(jī)>右鍵單擊屬性风喇,選擇高級系統(tǒng)設(shè)置>選擇環(huán)境變量>雙擊 PATH >將我們安裝的路徑追加到變量值之后 宁改!注意分號以及確定保存
這個(gè)時(shí)候再試一下 node -vnpm -vgit --version 這三個(gè)命令魂莫,一般都不會(huì)有問題的了还蹲。

PATH

2. 配置 GitHub

2.1 注冊 GitHub

先到GitHub官網(wǎng)Sign up(注冊)一個(gè)賬號。

填好用戶名耙考、郵箱谜喊、密碼進(jìn)入下一步

2.2 SSH授權(quán)

注冊好賬號之后我們可以隨意的查看其他人的項(xiàng)目,甚至是clone下載倦始,但是要提交代碼就必須完成SSH授權(quán)斗遏,如果可以不用授權(quán)就提交代碼的話,那么Github豈不是亂了套鞋邑。

2.2.1.生成SSH key

打開Git Bash诵次,輸入ssh-keygen -t rsa然后按三下回車账蓉,如下圖所示

接著就會(huì)在C:\Users\Administrator.ssh目錄下生成到id_rsa和id_rsa.pub兩個(gè)文件,id_rsa是密鑰逾一,id_rsa.pub是公鑰铸本,接下來需要將id_rsa.pub的內(nèi)容添加到GitHub上,這樣本地的id_rsa密鑰才能跟GitHub上的id_rsa.pub公鑰進(jìn)行配對遵堵,才能夠授權(quán)成功箱玷。

2.2.2.在GitHub上添加SSH Key

首先點(diǎn)擊右上角的倒三角進(jìn)入Settings

緊接著選擇左側(cè)SSH and GPG keys,然后選擇右上角的New SSH key,再把id_sra.pub的內(nèi)容復(fù)制粘貼到key(id_sra.pub可以使用 sublime 或者 記事本打開)鄙早,最后Add SSH key就可以了汪茧。
SSH key 添加成功之后,輸入ssh -T git@github.com進(jìn)行測試限番,如果出現(xiàn)以下提示證明添加成功了。

這一步一般沒什么問題呀舔,有問題的話留言評論(順便來一波打賞)就好了弥虐。直接進(jìn)入下一步!

3. 創(chuàng)建 GitHub 倉庫


需要特別注意的是媚赖,項(xiàng)目名稱一定要使用 你的名字 + .github.io
這一步也沒什么問題霜瘪,如果有問題,一定是你沒有給我打賞(∩_∩)

4. 設(shè)置本地博客的配置

4.1 安裝Hexo

在你認(rèn)為合適的地方創(chuàng)建一個(gè)文件夾惧磺,然后在文件夾空白處按住 Shift+鼠標(biāo)右鍵颖对,然后點(diǎn)擊在此處打開命令行窗口。(同樣要記住啦磨隘,下文中會(huì)使用在當(dāng)前目錄打開命令行來代指上述的操作)
在命令行輸入npm install -g hexo

然后輸入 npm install hexo --save 這時(shí)候你會(huì)看到命令窗口刷了一堆白字缤底,然后輸入 hexo -v 查看hexo是否安裝成功了。
如果出現(xiàn)與上圖一樣的情況的話番捂,就說明你離成功就近在咫尺了个唧。

4.2 初始化Hexo

同樣是在命令窗口中,繼續(xù)輸入 hexo init设预,等待下載好了之后輸入 hexo s


這時(shí)候我們就可以打開瀏覽器了徙歼,在地址欄中輸入 http://localhost:4000/ 我們就可以看到如下圖的界面,這個(gè)就是我們的博客鳖枕。沒錯(cuò)魄梯,我們的博客就這樣建好了。不過這個(gè)只是我們本地的博客宾符,下面就要考慮怎么把我們的本地博客上傳到我們的GitHub上了酿秸。

接下來先看一下我們的博客文章放在哪里。打開我們的文件夾下面的source文件夾吸奴,你會(huì)發(fā)現(xiàn)里面有一個(gè)_posts文件夾允扇,再進(jìn)入就會(huì)看到一片初始化的文章hello-world.md也就是上圖顯示在頁面的文章缠局。如果我們想新建文章的話,可以通過命令窗口輸入hexo new 'filename'我們的文件夾下面就會(huì)生成一個(gè)新的md文件考润,然后我們打開編輯就可以了狭园。

4.3 發(fā)布博客

首先復(fù)制我們的GitHub項(xiàng)目地址,如下圖糊治。

然后打開我們新建的文件夾下面生成的_config.yml文件唱矛,在最下方作如下修改。

deploy 是部署的意思井辜,type: git 就是使用 git 進(jìn)行部署绎谦,repo: github倉庫地址

注意:repo 原本是沒有的,在最后自己加上就好粥脚。冒號之后有一個(gè)空格 冒號之后有一個(gè)空格 冒號之后有一個(gè)空格

接下來回到命令窗口窃肠,輸入 npm install hexo-deployer-git --save

安裝好Git上傳插件之后,輸入 hexo g刷允,然后輸入 hexo d就可以將我們的博客上傳到我們的GitHub了冤留,而且以后更新文章就只需要用這兩個(gè)命令就可以了。這樣別人也可以通過 https://yourname.github.io 來訪問我們的博客了(開頭一定要用https树灶,yourname是你的github的名字)纤怒。

5. 個(gè)性化設(shè)置(更換主題)

有木有覺得這個(gè)博客的默認(rèn)主題特別的丑,如果不覺得可以忽略這一步(哈哈)天通。
這里以我使用的主題為例泊窘。
第一步去找我們想要的主題,然后下載下來像寒。我用的是next主題烘豹,在命令窗口輸入git clone https://github.com/iissnan/hexo-theme-next themes/next


然后打開配置文件,找到 theme 將原來默認(rèn)的 landscape 替換 next萝映。然后在命令窗口輸入 hexo clean 吴叶、hexo ghexo s,先看一下本地博客是什么樣子序臂,確認(rèn)好了在輸入 hexo d 部署到GitHub

每一個(gè)主題都有一個(gè)使用文檔蚌卤,next的使用文檔為 http://theme-next.iissnan.com/getting-started.html 我們可以為我們的主題修改名字,添加評論等等奥秆,具體的你們就自己去研究了逊彭。如果你們覺得太麻煩的話,歡迎大家直接 Fork 我的构订,地址為 https://github.com/AD-feiben/hexo 當(dāng)然里面的也有大家要修改的地方侮叮。

如果文章對你有所幫助,那么請您點(diǎn)一下?
由于本人水平有限悼瘾,如有錯(cuò)誤囊榜,歡迎大家指正审胸。如果你在操作過程中發(fā)現(xiàn)一些沒有講到的錯(cuò)誤或者問題,歡迎在評論留言卸勺,一起探討砂沛,共同學(xué)習(xí)進(jìn)步!
有錢的來波贊賞曙求,沒錢的幫忙宣傳一下(上不了首頁0帧)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市悟狱,隨后出現(xiàn)的幾起案子静浴,更是在濱河造成了極大的恐慌,老刑警劉巖挤渐,帶你破解...
    沈念sama閱讀 221,430評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件苹享,死亡現(xiàn)場離奇詭異,居然都是意外死亡挣菲,警方通過查閱死者的電腦和手機(jī)富稻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,406評論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來白胀,“玉大人,你說我怎么就攤上這事抚岗』蚋埽” “怎么了?”我有些...
    開封第一講書人閱讀 167,834評論 0 360
  • 文/不壞的土叔 我叫張陵宣蔚,是天一觀的道長向抢。 經(jīng)常有香客問我,道長胚委,這世上最難降的妖魔是什么挟鸠? 我笑而不...
    開封第一講書人閱讀 59,543評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮亩冬,結(jié)果婚禮上艘希,老公的妹妹穿的比我還像新娘。我一直安慰自己硅急,他們只是感情好覆享,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,547評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著营袜,像睡著了一般撒顿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上荚板,一...
    開封第一講書人閱讀 52,196評論 1 308
  • 那天凤壁,我揣著相機(jī)與錄音吩屹,去河邊找鬼。 笑死拧抖,一個(gè)胖子當(dāng)著我的面吹牛煤搜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播徙鱼,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼宅楞,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了袱吆?” 一聲冷哼從身側(cè)響起厌衙,我...
    開封第一講書人閱讀 39,671評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎绞绒,沒想到半個(gè)月后婶希,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,221評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蓬衡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,303評論 3 340
  • 正文 我和宋清朗相戀三年喻杈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片狰晚。...
    茶點(diǎn)故事閱讀 40,444評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡筒饰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出壁晒,到底是詐尸還是另有隱情瓷们,我是刑警寧澤,帶...
    沈念sama閱讀 36,134評論 5 350
  • 正文 年R本政府宣布秒咐,位于F島的核電站谬晕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏携取。R本人自食惡果不足惜攒钳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,810評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望雷滋。 院中可真熱鬧不撑,春花似錦、人聲如沸惊豺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,285評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尸昧。三九已至揩页,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背爆侣。 一陣腳步聲響...
    開封第一講書人閱讀 33,399評論 1 272
  • 我被黑心中介騙來泰國打工萍程, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人兔仰。 一個(gè)月前我還...
    沈念sama閱讀 48,837評論 3 376
  • 正文 我出身青樓茫负,卻偏偏與公主長得像,于是被迫代替她去往敵國和親乎赴。 傳聞我的和親對象是個(gè)殘疾皇子忍法,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,455評論 2 359

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