每個人都應該有一個Jekyll博客

jopen 9年前發布 | 35K 次閱讀 Jekyll

每個人都應該有一個Jekyll博客

免費使用Jekyll+Github Page搭建博客入門攻略

因為自己愛搗（zhuang）鼓（bi），從博客 百度空間到后來輕博客： Posterous、Tumblr、點點、推他、Lofter...再到自己搭建wordpress，寫一些簡單的靜態html頁面...我可真是在“玩”博客，而非寫博客。直到有一天認識了Jekyll，被其極簡寫作理念所拯救......

閱前說明

此文主要記錄了我自己在建此站點過程中遇見的一些問題和解決方案，完全是在自身能力層級范圍內進行描述，有誤之處望請包涵指正。


本教程適用對象包括但不限于：

  • 對建站、HTML、CSS等詞匯完全免疫的人

  • 會修改網頁圖片鏈接的入門小白設計師

工具準備

第0步：買域名

懂的同學自行跳過此步，買域名為什么要放到前面來做掉？是為了防止有的同學弄到一半嫌麻煩，就沒精神再搗鼓下去，而買了域名，錢都往里砸了，極有可能幫助劇情往下繼續發展，有助于個人身心健康....

域名可在Go Daddy上使用支付寶購買，至于價格，相信我，你買的越貴你就越接近建站成功的時刻。

點此查看怎樣購買GoDaddy域名

英文不好？那就萬網、美聯互橙、新網隨便挑一個國內域名服務商買吧。
關于域名這塊，還需要域名解析的預備知識，你可先收藏這個

那么接下來，讓我們拿起工具開始吧！

每個人都應該有一個Jekyll博客

— 圖片來自@jonrohan

第1步：注冊github并搭建Page

1,注冊Github

2,新建一個Repository(倉庫)
如圖，點擊+ New Repository每個人都應該有一個Jekyll博客
3,輸入相關配置，注意，在網址欄一定要輸入username.github.io，username指的是你注冊時的用戶名
每個人都應該有一個Jekyll博客
4,新建好后，進入項目，點擊右下角Settings（設置）
每個人都應該有一個Jekyll博客
5,點擊Automatic page generator（頁面自動生成器）
每個人都應該有一個Jekyll博客
6,選擇一個你喜歡的模板，點擊生成...其實到這一步，我們的網站已經生成了，你可以通過自己的域名username.github.io進行訪問，只是目前，我們還沒有學會對網站上的內容進行管理。

第2步：解析自己的域名到username.github.io



參考我們在準備階段收藏的網頁，在域名服務商那里將域名使用CNAME解析到自己的此處填寫你的用戶名.github.io。
接著，我們要進行github端的配置，進入我們所建的Page倉庫主頁，找到右下角的Clone in Desktop，將 項目克隆到本地。對了，你下好了github的客戶端了么？還沒有？那趕緊下了，然后登陸，這就要用到它的同步功能了（其實用github客戶端同步文檔 對Geek而言是一件不太光彩的事，但暫時我們先忍忍吧，先讓自己看到一點效果，得到一點成就感，鼓舞著自己走下去） 我們新建一個文檔，隨便什么格式，然后在里面寫入自己買的域名（注意：如果是CNAME解析，此處域名前需加上“www.”），然后將文檔重命名成CNAME,不要加任何文件格式后綴。
然后此CNAME文檔拖到我們克隆到本地的倉庫文件夾，使用github客戶端進行同步上傳。過不了多久，你就可以在瀏覽器中打進你的域名，你會驚奇地發現，它已經自動跳轉到你在github上設置的默認網頁了！

第3步：本地安裝git，并配置SSH

為了下一步鋪墊

暫時先參考《mac安裝最新版本的git》和《安裝git》

  1. 提醒：本文將在2015-01-11更新

  2. 提醒：本文將在2015-01-11更新

  3. 提醒：本文將在2015-01-11更新

第4步：在本地安裝Jekyll進行項目預覽

（還未寫）暫時參考：

特殊問題及解決方案

解決gem install jekyll 運行無法知道的問題

在代碼 gem install jekyll 前加 sudo，在代碼后加-V可看到安裝詳情過程（mac x os）

解決gem ruby install 很慢的問題

換成淘寶鏡像源

解決報錯：Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.

打開 Xcode 會彈出更新說明，點擊同意，安裝完就可以了

測試SSH是否正常工作

參考測試SSH

添加ReadMore功能（文章摘要功能）


參考JavaChen's Blog和Tr??ng TX blog

最終我的代碼綜合以上兩位的方法,在index.html添加了如下圖代碼：



每個人都應該有一個Jekyll博客

給文章頁面添加多說評論

1,注冊多說賬號，得到short_name （如圖，cellier-me就是我的shortname）

每個人都應該有一個Jekyll博客

2,將生成的多說代碼復制，找到倉庫的_layouts文件夾下的post.html文檔，使用代碼編輯器打開，將多說代碼粘貼到{ { content } },</div>的下面，對了，請養成隨時Ctrl+S進行文檔編輯保存的習慣

3,找到倉庫里的_config.yml文檔，代碼編輯器打開，貼入如下代碼

comments :
provider : duoshuo
duoshuo :
shortname : 你的shortname


  • 更多關于多說設置的內容可參考 beeder同學寫的以及 havee同學寫的

  • 而關于多說的CSS樣式設置可參考 多說評論框css樣式表自定義

  • 樣式代碼貼入多說官網-個人-網站設置-基本設置里即可（下圖位置）

    每個人都應該有一個Jekyll博客
    常用HTML代碼：

    // 新建標簽頁打開鏈接
    <a href="此處填寫要跳轉的網址" target="_blank">鏈接文字</a>

    // 插入圖片：width 設置圖片寬度；height 設置圖片高度
    <img src="圖片路徑地址" width="165" height="60" />

    // 插入圖片并居中
    <div align=center><img src="圖片網址" width="500" /></div>

    常用HTML標簽

    •   <p>
      <strong>加粗字體</strong>, 使用<strong>
  </p>
      </li> 
    •   <p>
      <em>斜體</em>, 使用<em>
  </p>
      </li> 
    •   <p>
      標注, 像HTML使用的是標簽<abbr>, 加上標注標題來闡述被標注對象
  </p>
      </li> 
    •   <p>
      引文, 像— 魯迅, 使用<cite>
  </p>
      </li> 
    •   <p>
      <del>刪除線</del> 使用標簽<del>而下滑線則使用<ins>
  </p>
      </li> 
    •   <p>
      上標字 <sup>2B</sup> 使用<sup>而下標字 <sub>還是2B</sub>則用<sub>
  </p>
      </li> 
    •   <p>
      打字機體使用<tt>
  </p>
      </li> 
    •   <p>
      <u>下劃線</u>還可使用<u>
  </p>
      </li> 
    •   <p>
      特殊符號&nbsp;表示 空格
  </p>
      </li> 
    •   <p>
      大字體使用<big>，小字體使用<small>
  </p>
      </li> </ul>

      最后，我想說的是： 

        “沒有十全十美的教程，如同不存在徹頭徹尾的絕望”（改自村上春樹語）
      </p> </blockquote>

      重要的是保持住一顆搗騰不安的心以及對知識的渴望與找尋.....


      來自：http://www.cellier.me/2015/01/04/jekyll%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B/
     本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
     轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
     本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
      本文地址：http://www.baiduhome.net/news/view/1157427