【Mac01】小白教程:6大神器搭建免費無限流量博客方案

〇、引言

最近為了寫《掌控每一天》的書同時想給自己搭建一個碎片知識管理的體系,所以,就嘗試了6大神器:Git+Github+GithubPages+Gitbook+Jekyll+Markdown,終于把所有的內容都搞定了,想把這個探索經歷整理下來,供大家參考。

一、首先使用Mac

Mac(至于Windows的實戰,請參考另外一篇文章吧。)中必須做好以下準備:

(一)安裝Ruby

通常情況下是已經安裝好的。檢驗方式如下:打開終端,輸入以下命令檢查Ruby是否可用。

ruby -v

這個命令輸出已安裝Ruby的版本信息。如無顯示,請登陸Ruby官網獲取 Ruby 的各種方法。

(二)安裝RubyGems

通常情況下也是已經安裝好的。檢驗方式如下:打開終端,輸入以下命令檢查 RubyGems是否可用。

gem -v

這個命令輸出已安裝Ruby的版本信息。如無顯示,請登陸RubyGems官網獲取 Ruby 的各種方法。

在這里,我經歷了幾個問題:

1. 我以為電腦上沒有RubyGems

所以,我就按照RubyGems官網的教程執行:

  1. 下載了一個安裝包;
  2. 解壓到一個文件夾;
  3. 進入文件夾輸入命令:
    ruby setup.rb

官方很搞笑,提醒說:“you may need admin/root privilege”,當我輸入完了之后,果然彈出這樣的提示:

ERROR: While executing gem ... (Errno::EACCES)
Permission denied - /Library/Ruby/Site/2.0.0/gauntlet_rubygems.rb

真是滿臉黑線!

2. 要不就選擇升級試試看吧

在首頁上除了安裝之外,還告訴要可以選擇升級。既然我已經沒有權限(當時不知道怎么獲得權限),于是我就選擇了升級的命令:

$ gem update --system          # may need to be administrator or root

雖然官方也提示了需要權限,但是竟然彈出這樣的提示,驚呆了:

Latest version currently installed. Aborting.

果然,電腦里面也有!所以,Mac真心靠譜,不用再管這些問題了。

(三)安裝編輯器

Mac上默認好像沒有編輯器吧,于是我上網查了查,出現了N多“18+編輯器大全……”的文章,最后憑借印象選了“Sublime Text”,目前來看,效果很好。注意:一定不要使用Mac自帶的“文本編輯”功能,太坑爹!

點擊下載:Sublime Text

(四)選裝:Xcode

據說,作為原生開發工具,這是必備的,請在AppStore中下載安裝就好了。雖然我一直也沒有用到……求諒解開發小白的無知。

到這里,基本的配置就完成了!

二、Git&Github配置

(一)Git這個家伙

一直聽說它的名字很久很久了,終于用了五天(每天一小時)的時間,借助兩個文檔把Git的原理給搞定了!個人建議還是要弄清楚它的意義的,尤其是工作區、暫存區的意義,尤其是Commit快照的概念。學習資源如下:

  1. 廖雪峰:《Git教程》,確實是史上最簡單的Git教程。
  2. Git圣經:《Git Pro》中文版,建議看完廖雪峰的教程后再看這個強化!

如果能看的話,最好就都看看,實在不行的話,就看廖雪峰的就夠了。

(二)Github好好玩

Git是一個本地的程序框架,它可以幫助我們實現版本管理,通常來說本地版本就足夠了,但是如果為了實現云端和跨平臺的話,就需要將自己的版本進行托管,選用的服務就是Github。如果把廖雪峰的文章看完了,基本上就完全弄懂了!Mac上可以使用圖形界面來快速上手Github,方法:

  1. 訪問www.github.com,注冊一個Github賬號;
  2. 訪問Github的Mac版本下載頁面:點擊進入,并下載Github的客戶端;
  3. 安裝并進行基礎配置(登陸賬號、輸入id和email、設置Repository等);
  4. 搞定,可以玩啦!

三、使用JekyllBootstrap生成網站

配置好了Github之后,就開始使用Jekyll來搞定網站問題吧。原本,需要在電腦先配置Jekyll(具體配置文章請見附錄部分),后來,因為有一部分高手的努力,推出了Bootstrap的框架,Jekyll就變得簡單無比了,來跟著步驟試試看吧。

(一)建立新的Repository

登陸Github,新建一個Repository,命名為Username.github.io,這個命名中,必須把username更換成自己的Github用戶名,其他的任何內容都不能調整。比如我的用戶名是hiddenwangcc,那么這個新的Repo就是:

hiddenwangcc.github.io

(二)下載JekyllBootstrap框架

在終端中進入MyGit文件夾(也就是所有項目都放置在這里),依次輸入以下命令

1. git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.io
2. cd USERNAME.github.io
3. git remote set-url origin git@github.com:USERNAME/USERNAME.github.io.git 
4. git push origin master

這五步的目的是,首先先把JB框架下載至MyGit的username.github.io文件夾中;然后進入該文件夾,將Github中的username.github.io的Repo和該文件夾進行關聯;最后推送同步,將本地文件上傳至Github。

(三)試試看吧

現在,激動人心的時刻到來了,請在瀏覽器中輸入地址:

http://hiddenwangcc.github.io

簡單的三步走,配置Github、下載幾個文件、輸入幾個命令一個非常漂亮的頁面就呈現在面前啦!

Jkeyll Bootstrap博客

選讀:安裝Jekyll并配置

Jekyll是一個靜態站點生成器,它會根據網頁源碼生成靜態文件。它提供了模板、變量、插件等功能,可以用來生成整個網站。Jekyll生成的站點,可以直接發布到Github上面,這樣我們就有了一個免費的,無限流量的,有人維護的屬于我們的自己的web網站。Jekyll是基于Ruby的程序,可以通過Gem來下載安裝。

看上去好美啊,但是版說實話,這一步花費我大量的時間,這個程序框架就是給Geeker們用的(因為它們的發音都一樣的)。整個文檔的書寫,完全不考慮小白的感受,弄了N久才搞定!所以,把我的經驗整理一二,給大家看看。

(一)可怕的安裝過程

按照官網的說明,安裝jekyll是非常簡單的事情,只需要輸入一句代碼就夠了,那就是:

gem install jekyll

但是,麻煩就麻煩在這里,我總是會出現下面的提示:

ERROR: Could not find a valid gem 'jekyll' (>= 0), here is why:
Unable to download data from https://rubygems.org/
Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://rubygems.org/quick/Marshal.4.8/jekyll-2.5.3.gemspec.rz)
ERROR: Possible alternatives: jekyll

我這一看提示吧,就感覺是被某墻給限制了,凡是“Unable to download data”這樣的提示,唯一的方案就是翻出去下載。于是,按照原有思路,使用整個系統整體突破Wall的方式去處理,竟然還是失敗了!于是,百度解決方案,找到了五六種不同的方案,有一種起作用:原來gem也是有源的(類似于蘋果越獄后的Cydia的App,里面可以添加不同的源)!由于rubygems的源在國內無法訪問,所以可以更換成天朝最厲害的源——淘寶源(說實話,我看到的時候也驚到了!),方案如下:

① 首先查看現有gem的源

gem source

返回的結果是:

CURRENT SOURCES
https://rubygems.org/

② 添加淘寶源

gem source -a http://ruby.taobao.org

③ 刪除官方的源

gem source -r https://rubygems.org/

這樣就ok了,再試試看輸入安裝命令:gem install jekyll,然后又彈出了這樣的提示:

Fetching: liquid-2.6.2.gem (100%)
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

發現可以已經可以“Fetching”了,說明源是起作用了,但是又出現沒有寫入權限的問題。忽然想起了在解決源問題的時候,使用了一個叫做sudo的命令,據說可以擁有權限(小白有這個水平我就很滿足了),試試看:

sudo gem install jekyll

屏幕開始刷刷刷地顯示著已安裝balabal的,在安裝了31個Gem之后,安裝過程結束啦!

(二)使用Jekyll生成網站

28定律真是起作用啊!只要前期搞得好,后面基本沒問題啊!在經歷千辛萬苦之后,終于可以使用官方所說的方案啦!下面跟我來操作吧:

  1. MactintoshHD - User - 你的用戶名下建立文件夾,我用的是MyGit(這樣的目的是把所有需要版本管理的文件都放在一個文件夾中);
  2. 在MyGit目錄(如果不會進目錄,就在終端中輸入:cd,然后再輸入cd mygit,即可)下,使用該命令:
    jekyll new hiddenwangcc.github.io
    說明,①new表示建立新網站;②hiddenwangcc.github.io是新網站的名稱,之所以使用該域名,目的是在下一步和Github綁定,使用時,請換成您自己的Github用戶名。
  3. 進入新文件夾,使用命令:
    cd hiddenwangcc.github.io
  4. 啟動網站服務,使用命令:
    jekyll serve
    反饋如下內容:

Configuration file: /Users/iloveww/MyGit/hiddenwangcc.github.io/_config.yml
Source: /Users/iloveww/MyGit/hiddenwangcc.github.io
Destination: /Users/iloveww/MyGit/hiddenwangcc.github.io/_site
Generating...
done.
Auto-regeneration: enabled for '/Users/iloveww/MyGit/hiddenwangcc.github.io'
Configuration file: /Users/iloveww/MyGit/hiddenwangcc.github.io/_config.yml
Server address: http://127.0.0.1:4000/

  1. 上文給出了:配置文件、源文件夾、生成站點文件夾(Destination)、服務器地址,那么只要通過服務器地址:http://127.0.0.1:4000/,就可以訪問啦!

搞定啦!搞定啦!

(三)本地管理JB完成的網站

在第三點(用JekyllBootstrap)中提到的網站是在網絡上訪問的,如果想要在本地去查看怎么辦呢?只要用Jekyll上面的方案就可以了。步驟非常簡單:

  1. 在終端中進入hiddenwangcc.github.io目錄;
  2. 輸入代碼
    jekyll serve

怎么樣,本地就可以查看了吧,這樣任何一次改動,都可以確保沒有問題后再上傳到Github。


注:

本文為系列文章第一篇,請關注第二篇:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,117評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,860評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,128評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,291評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,025評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,421評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,477評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,642評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,177評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,970評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,157評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,717評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,410評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,821評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,053評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,896評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,157評論 2 375

推薦閱讀更多精彩內容