GitHub+Hexo+Next搭建免費(fèi)獨(dú)立個(gè)人博客

背景

大四理工科學(xué)生,精力旺摩疑、時(shí)間多周伦。覺得有一個(gè)自己的空間,寫點(diǎn)自己感興趣的東西這事挺酷的未荒。

我為什么要搭建個(gè)人博客

博客是一個(gè)很酷的產(chǎn)品专挪。雖然博客輝煌的年代已經(jīng)過去,但我認(rèn)為在這個(gè)后博客時(shí)代的博文會(huì)更純粹也更精髓片排。

我要搭建一個(gè)怎么樣的博客

  • 免費(fèi)

莫名其妙的原因寨腔,就是不想買域名,買空間率寡。

  • 獨(dú)立

獨(dú)立的才是自己的迫卢。

  • 簡潔

內(nèi)容是博客的靈魂,所以博客界面必須足夠簡潔冶共。我想搭建的博客看不到胡里花哨的東西乾蛤,能讓人只專注到內(nèi)容上面。這也是我不用新浪博客捅僵、網(wǎng)易博客等現(xiàn)成博客的原因之一家卖。

怎樣去實(shí)現(xiàn)它

在知乎上面瞎逛的時(shí)候,碰巧看到這樣一個(gè)回答庙楚。你見過最棒的個(gè)人博客是什么上荡?溫柔的回答。

剛好滿足我對個(gè)人博客的一些幻想馒闷。所以確定了用GitHub+Hexo+Next主題的思路酪捡。

正題

以上是背景叁征,接下來進(jìn)入正題。

準(zhǔn)備:配置開發(fā)環(huán)境

依次下載安裝:

怎樣打開Git逛薇?

  1. 開始界面點(diǎn)擊Git Bash
開始界面打開.jpg
  1. 進(jìn)入目標(biāo)文件夾鼠標(biāo)右鍵打開Git Bash
文件夾內(nèi)鼠標(biāo)右鍵打開.jpg

推薦使用第二種方法捺疼。

一. 注冊訪問Github

Github為廣大開發(fā)者提供了一個(gè)非常好的平臺(tái),不僅是代碼的開源永罚,同時(shí)Github還提供了開發(fā)者可以在Github上建立自己的站點(diǎn)啤呼。這個(gè)功能的局限是只能創(chuàng)建靜態(tài)的網(wǎng)站。

注冊完成后尤蛮,需要驗(yàn)證郵箱媳友。我第一次平時(shí)用的163郵箱,不過沒有收到驗(yàn)證郵件产捞。發(fā)現(xiàn)很多同學(xué)都遇到跟我一樣的問題醇锚,換成QQ郵箱之后OK。

接下來:

  1. 新建Repository
  • 頁面右上角坯临,新建Repository


    新建repository.jpg
  • 創(chuàng)建yourname.github.io焊唬,打勾表示名稱可用


    新建repository名稱.jpg
  1. 配置SSH-Key
  • 檢查是否已經(jīng)有SSH Key:打開Git Bash
    $cd ~/.ssh 
    如果說沒有這個(gè)目錄,就直接看第三步看靠。
  • 備份
  • 生成一個(gè)新的SSH赶促。
    $ssh-keygen -t rsa -C "your e-mail"
    之后直接回車,不用填寫東西挟炬。然后就生成一個(gè)目錄.ssh 鸥滨,里面有兩個(gè)文件:id_rsa , id_rsa.pub。
    成功之后是這樣的:


    SSH-Key成功結(jié)果.jpg
  • 把這個(gè)SSH放到github上:進(jìn)入account-setting 谤祖,把id_rsa.pub的內(nèi)容復(fù)制進(jìn)去就可以了婿滓。

二. Hexo

關(guān)于Hexo

  • 快速,簡單而高效的靜態(tài)博客框架

Hexo初始化博客框架

1.安裝Hexo

    $ npm install -g hexo-cli

2.初始化框架

   $ hexo init <yourFolder>
   $ cd <yourFolder>
   $ npm install

初始化完成后粥喜,指定文件夾的目錄如下

   .
   ├── _config.yml //網(wǎng)站的配置信息凸主,您可以在此配置大部分的參數(shù)。
   ├── package.json
   ├── scaffolds //模版文件夾额湘。當(dāng)您新建文章時(shí)卿吐,Hexo 會(huì)根據(jù) scaffold 來建立文件。
   ├── source //資源文件夾是存放用戶資源的地方锋华。
   | ├── _drafts
   | └── _posts
   └── themes //主題文件夾嗡官。Hexo會(huì)根據(jù)主題來生成靜態(tài)頁面。

3.新建文章(創(chuàng)建一個(gè)hello world)

    $ hexo new "Hello World"

會(huì)在/source/_post里添加hello-world.md文件供置,之后新建的文章都將存放在此目錄下谨湘。編輯hello-world.md文件可修改內(nèi)容。

4.生成網(wǎng)站

    $ hexo generate

此時(shí)會(huì)將/source的.md文件生成到/public中芥丧,形成網(wǎng)站的靜態(tài)文件紧阔。

5.本地服務(wù)器

   $ hexo server

輸入http://localhost:4000 即可查看網(wǎng)站。
可修改:

   $ hexo server -p 3000

此時(shí)续担,輸入http://localhost:3000 查看網(wǎng)站擅耽。

6.部署網(wǎng)站

   $ hexo deploy

部署網(wǎng)站之前需要生成靜態(tài)文件。
可以用$ hexo generate -d直接生成并部署物遇。此時(shí)需要在_config.yml中配置你所要部署的站點(diǎn):

部署網(wǎng)站.jpg
  • 到此為止完成網(wǎng)站的雛形乖仇。輸入yourname.github.io可訪問博客主頁。例如:http://moyatao.github.io/ 询兴。
    繞坑:
    部署的時(shí)候有可能會(huì)出錯(cuò)乃沙,別急,加這一步操作就ok了

     $ npm install hexo-deployer-git --save
    

在此感謝知友“溫柔”的幫助诗舰,這是他的博客:http://ursocute.github.io/

附:

三. Next主題

NexT 主旨在于簡潔優(yōu)雅且易于使用警儒,所以首先要盡量確保NexT的簡潔易用性。

這是一個(gè)擴(kuò)展主題眶根,由一個(gè)臺(tái)灣學(xué)生iissnan開發(fā)蜀铲。主題秉承精于心,簡于形的理念属百。

  1. 下載Next主題
    $ cd your-hexo-site
    $ git clone https://github.com/iissnan/hexo-theme-next themes/next
  2. 啟用Next主題
    下載完成后记劝,打開站點(diǎn)配置文件,找到theme字段族扰,并將其值更改為 next厌丑。
    # Extensions
    ## Plugins: http://hexo.io/plugins/
    ## Themes: http://hexo.io/themes/
    theme: next
  3. 驗(yàn)證是否可用
    運(yùn)行hexo s --debug,并訪問http://localhost:4000 渔呵,確保站點(diǎn)正確運(yùn)行怒竿。

附:

四. Markdown語法

Markdown 是一種「電子郵件」風(fēng)格的「標(biāo)記語言],Hexo支持Markdown厘肮。

打開之前生成的Hello World.md文件愧口,驚奇地發(fā)現(xiàn),就是用Markdown語法寫的类茂。


Hello World.jpg

Markdown 編輯器

網(wǎng)上搜索一下耍属,網(wǎng)友推薦的Markdown編輯器很多,看個(gè)人選擇巩检。我對簡書這個(gè)產(chǎn)品比較有好感厚骗,用的是簡書的Markdown在編輯器。效果就是醬紫滴:

簡書在線編輯器效果.jpg

備注:

  • 正在學(xué)習(xí)Markdown基礎(chǔ)語法兢哭,第二篇博客內(nèi)容就整理Markdown語法领舰。

附:

感悟

從想要搭建一個(gè)獨(dú)立免費(fèi)的個(gè)人博客開始,網(wǎng)上搜索各種資料。用過一個(gè)國外的傻瓜式軟件冲秽,生成的界面太粗糙舍咖,而且不穩(wěn)定。這點(diǎn)與我的初心不符直接放棄锉桑。

瞎逛了幾天之后排霉,終于確定了用本文的方法,然后開始摸索民轴。什么懂不懂的小白攻柠,用了三天時(shí)間,終于搭建了我的第一個(gè)個(gè)人博客Mr H's Blog后裸。過程中遇到了一些問題瑰钮,但我這人就喜歡和自己死磕到底。感謝網(wǎng)友的分享和熱情幫助微驶。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末浪谴,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子祈搜,更是在濱河造成了極大的恐慌较店,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件容燕,死亡現(xiàn)場離奇詭異梁呈,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蘸秘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進(jìn)店門官卡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人醋虏,你說我怎么就攤上這事寻咒。” “怎么了颈嚼?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵毛秘,是天一觀的道長。 經(jīng)常有香客問我阻课,道長叫挟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任限煞,我火速辦了婚禮抹恳,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘署驻。我一直安慰自己奋献,他們只是感情好健霹,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著瓶蚂,像睡著了一般糖埋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上扬跋,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天阶捆,我揣著相機(jī)與錄音凌节,去河邊找鬼钦听。 笑死,一個(gè)胖子當(dāng)著我的面吹牛倍奢,可吹牛的內(nèi)容都是我干的朴上。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼卒煞,長吁一口氣:“原來是場噩夢啊……” “哼痪宰!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起畔裕,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤衣撬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后扮饶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體具练,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年甜无,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了扛点。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,133評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡岂丘,死狀恐怖陵究,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情奥帘,我是刑警寧澤铜邮,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站寨蹋,受9級(jí)特大地震影響松蒜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜钥庇,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一牍鞠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧评姨,春花似錦难述、人聲如沸萤晴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽店读。三九已至,卻和暖如春攀芯,著一層夾襖步出監(jiān)牢的瞬間屯断,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工侣诺, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留殖演,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓年鸳,卻偏偏與公主長得像趴久,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子搔确,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2 355

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