使用 github + jekyll 搭建個(gè)人博客
github + jekyll
本地寫(xiě)markdown,然后push到github,就成了博客
其實(shí)我一早就知道這兩者可以搭建個(gè)人博客,因?yàn)楸救擞袀€(gè)很好的習(xí)慣——每天都會(huì)去看看一些熱門(mén)文章,了解行業(yè)最新動(dòng)態(tài),所以什么新鮮事兒我都知道點(diǎn),可能不熟悉而已。
于是今晚就試著弄一下,去百度找了幾個(gè)文章,結(jié)果一注意時(shí)間(程序員職業(yè)病)都是好幾年之前的了,我瞬間就懷疑了時(shí)效性,因?yàn)榧夹g(shù)發(fā)展太快了。于是就摸著石頭過(guò)河,果然踩了幾個(gè)雷。
雷就不說(shuō)了,這不重要,重要的是總結(jié)一下正確的步驟。
創(chuàng)建github帳號(hào)和項(xiàng)目
github——俗稱全球程序員社交網(wǎng)站(我覺(jué)得應(yīng)該叫全球程序員伸手即得網(wǎng)站)——如果你作為一名程序員竟然沒(méi)有g(shù)ithub帳號(hào),那你看到這篇文章時(shí),就應(yīng)該自罰三杯牛欄山了——好喝不上頭!
登錄github站點(diǎn),然后接下來(lái)要做一個(gè)重要的事兒————如果你的用戶名是gebilaowang,那么你要?jiǎng)?chuàng)建一個(gè)名為gebilaowang.github.io的項(xiàng)目,我的用戶名是wangfupeng1988,所以我當(dāng)時(shí)創(chuàng)建了名為 wangfupeng1988.github.io 的項(xiàng)目。
什么?你不會(huì)創(chuàng)建項(xiàng)目?—— 那你先暫停,先去了解一下github的基本應(yīng)用
安裝 jekyll
首先,本抱歉,我這里只有mac筆記本,windows的安裝過(guò)程我不清楚,自己個(gè)兒查去吧——所謂,你不自己動(dòng)手、誰(shuí)閑的教你呀?
我用 mac os 安裝 jekyll 算是經(jīng)歷了一點(diǎn)波折。從網(wǎng)上搜的安裝過(guò)程都是這樣的
## 檢查gem版本 $ gem -v ## 更新Gem(提示權(quán)限) $ gem update --system 安裝jekyll(提示權(quán)限) $ gem install jekyll 安裝成功之后,查看版本號(hào) $ jekyll -v
但是我既然這么說(shuō),那肯定這樣就是失敗的,據(jù)說(shuō)是由于『10.11對(duì)系統(tǒng)文件安全進(jìn)行了更新,所謂的(SIP)』。后來(lái)才發(fā)現(xiàn),原來(lái)只有默認(rèn)的安裝路徑才會(huì)有這個(gè)權(quán)限的問(wèn)題,那干脆就把路徑改了就是了。打印出系統(tǒng)的$PATH然后另外找一個(gè)路徑安裝就是了,這樣的好處就是安裝完了不用再修改$PATH——否則安裝這個(gè)也改、安裝那個(gè)改,時(shí)間長(zhǎng)了就亂了。
$ echo $PATH /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/git/bin ## 換個(gè)路徑安裝 $ gem install jekyll -n /usr/local/git/bin
還有執(zhí)行gem update --system的時(shí)候可能需要科學(xué)(fan)上網(wǎng)(qiang),這個(gè)就得自己想辦法了。不過(guò)沒(méi)有購(gòu)買(mǎi)vpn的同學(xué),我推薦使用Lantern(mac用戶),沒(méi)用過(guò)的搜一下。雖然速度慢、有時(shí)不行,但畢竟免費(fèi)的,要啥自行車(chē)?
哦 對(duì)了,以上安裝完了之后呢,最好安裝一個(gè)rdiscount,據(jù)說(shuō)是解析markdown用的,方法跟安裝jekyll一樣
gem install rdiscount -n /usr/local/git/bin
初始化博客
上一步,jekyll、rdiscount已經(jīng)安裝成功了。
然后進(jìn)入你置頂?shù)奈恼履夸洠瑘?zhí)行以下命令,然后你就能看到j(luò)ekyll已經(jīng)為你創(chuàng)建了一些基本的文章。
$ jekyll new gebilaowang_blog $ cd gebilaowang_blog $ ls
這面的文件夾名稱、作用都是規(guī)定好的,想對(duì)他們有簡(jiǎn)單的了解,還是去看看阮一峰老師的這篇文章吧,我就不再贅述了。但是,這篇文章有些信息已經(jīng)過(guò)時(shí),只準(zhǔn)看,不準(zhǔn)照著做!
想要看效果,運(yùn)行
$ jekyll serve $ open http://127.0.0.1:4000/
這時(shí)候你會(huì)看到運(yùn)行除了一個(gè)基本的頁(yè)面,但是都是英文。這個(gè)沒(méi)關(guān)系,都是應(yīng)為咱們可以改成中文。
先打開(kāi)./_config.yml,把里面的信息改成你個(gè)人的信息,姓名、郵箱、描述什么的,能改的都改了。然后打開(kāi)./about.md和./index.html將里面的英文看著能修改的也都修改了。
注意,代碼中``和\{\% ... \%\}內(nèi)容不能修改,這都是變量,不是普通文字。還要注意,每個(gè)頁(yè)面類似如下代碼,即有兩個(gè)---的部分,只能修改,不能刪除!
---
layout: page
title: 關(guān)于
permalink: /about/
---
好,全部改完之后,重新運(yùn)行jekyll serve,刷新頁(yè)面,即可看到效果了。
你說(shuō),剛才改英文改的是模板和個(gè)人信息的,但是博客內(nèi)容怎么辦?我怎么寫(xiě)博客呀?—— 別急,飯得一口一口吃
提交到github
運(yùn)行jekyll serve通過(guò)瀏覽器本地查看沒(méi)問(wèn)題之后,可以提交到github了。提交之前,要?jiǎng)?chuàng)建一個(gè).gitignore文件,編寫(xiě)如下內(nèi)容(表示./_site文件夾及其內(nèi)容無(wú)需提交到遠(yuǎn)程,因?yàn)樗镜嘏R時(shí)文件,github不需要它)
_site/*
提交過(guò)程就簡(jiǎn)單寫(xiě)一下了,不再贅述,都是git的常用知識(shí)。看以前的文章說(shuō)非得建一個(gè)gh-pages分支,但是經(jīng)過(guò)我驗(yàn)證,不需要。
$ git init $ git add . $ git commit -m "init blog" $ git remote add origin xxxxxxx(拷貝github的地址)xxxxxxx.git $ git push origin master
好了,然后你瀏覽器訪問(wèn)gebilaowang.github.io試試(假如github用戶名是gebilaowang),是否看到效果了?
寫(xiě)文章
有兩個(gè)規(guī)定先記下:
- 文章必須新建在
./_posts文件夾中 - 文章名稱必須是
yyyy-mm-dd-xxxxx-xxx-xxx格式,后綴名可以是.markdown | .html | .textile(但我只推薦markdown形式,因?yàn)橐讓W(xué)、通用、效率高)
例如,我寫(xiě)這篇文章,我就要新建一個(gè)./_posts/2016-07-24-github-jekyll-blog.markdown的文件,此時(shí)你們應(yīng)該可以在這里看到這個(gè)文件及其源碼。
開(kāi)始編寫(xiě)博客源碼。
一開(kāi)始要這樣寫(xiě),下面的內(nèi)容中,layout: post不能修改,其他的可自行修改。
--- layout: post title: "使用 github + jekyll 搭建個(gè)人博客" date: 2016-07-24 21:41:45 +0800 categories: share ---
寫(xiě)完這幾行之后,剩下的就可以自己輕松愉快的寫(xiě)markdown了。是不是很簡(jiǎn)單?
運(yùn)行jekyll serve,即可在任何時(shí)候通過(guò)瀏覽器及時(shí)查看效果。待文章寫(xiě)完并查看效果沒(méi)問(wèn)題之后,即可push到github上,這樣就OK了。
總結(jié)
建議大家都弄一個(gè)個(gè)人站點(diǎn),很簡(jiǎn)單也很方便,提升bi格、形象的同時(shí),也為自己積累平時(shí)的知識(shí)。
-------------------------------------------------------------------------------------------------------------
歡迎關(guān)注我的教程:
《使用grunt搭建全自動(dòng)web前端開(kāi)發(fā)環(huán)境》《json2.js源碼解讀視頻》
《深入理解javascript原型和閉包系列》《css知多少》《微軟petshop4.0源碼解讀視頻》
------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------

浙公網(wǎng)安備 33010602011771號(hào)