標籤：

github上利用jekyll搭建自己的blog的操作順序？

12-31

我之前謝了一個完整的教程，希望對你有所幫助：

在github pages網站下用jekyll製作博客教程

在我動手用jekyll部署我的博客之前，一直使用godaddy上面的wordpress主頁來部署我的博客kresnik.co。WordPress當然有很多的優點，在我看來我用WordPress主要是為了

  • 方便清晰的文件結構

  • 可以隨意選用的各種模板和插件

  • 相對便宜的部署價格

因為這些優點，所以我想我還會在WordPress官網上繼續保留我的免費博客。

既然這樣，看官想必想問為什麼要換成jekyll來重新部署博客？我簡單的總結了一下：

  • 流行又簡潔的MarkDown寫作語法

  • 輕量級的網站結構，不再有動態網站的沉重

  • 方便的和github pages結合，不僅免費，而且方便

所以對比與WordPress的沉重，jekyll讓你回歸到創作本身，當然如果你喜歡折騰，jekyll也絕對不會讓你失望。推薦下面幾個站點亮一下。

  • http://foto.lhzhang.com/

  • Rasmus Andersson

安裝流程

  1. 要用github pages，首先要在github中建立一個基於你的用戶名的repository: 比如說我，就要建立名為kresnikwang.github.io的repo。在以前的github版本中還需要在後台開啟pages的功能，現在系統檢測到這樣的repo名稱之後，會在setting中自動開啟GitHub Pages的功能，如下圖： 這樣之後你就可以把這個repo克隆到本地隨意進行修改了，在這個裡面上傳的網頁就是你的網站的內容了，可以上傳一個index.html試一試，這就是你的網站主頁了。 關於GiuHub的使用，可以看幾個比較好的入門教程：GitHub

  2. 之後我們就要在本地部署jekyll，jekyll的原理很簡單。這是一個已經合成好的靜態html網站結構，你用這個結構在username,http://github.io文件夾裡面粘帖好所有文件。再把更新完的本地repo推送到GitHub的master branch裡面，你的網站就更新建設完畢了。 首先你需要ruby來使用本地jekyll。Mac和Linux可以用Terminal配合yum或者brew這樣的包管理器很方便的安裝ruby。Windows下更是方便，可以直接中集成好的Ruby installer來進行安裝，文章里的就是傳送門。

    安裝完ruby，之後就是要安裝RubyGems，gem是一個ruby的包管理系統，可以用gem很方便的在本地安裝ruby應用。

    安裝方法

    //在RubyGems官網上下載壓縮包，解壓到你的本地任意位置
    //在Terminal中
    cd yourpath to RubyGems //你解壓的位置
    ruby setup.rb

  3. 有了gem之後安裝jekyll就很容易了，其實用過nodejs和npm的同學應該很熟悉這樣的包安裝，真是這個世界手殘腦殘們的救星。。。。。（樓主不自覺的摸了摸自己快殘了的手） 安裝jekyll，有了gem，直接在Terminal裡面輸入以下代碼：

    $ gem install jekyll

  4. 好了，現在你的電腦已經準備完畢了。如果你是想自己搗鼓，可以根據這樣的目錄結構在你的http://username.github.io文件夾下建立以下目錄結構：

    ├── _config.yml

    ├── _drafts

    | ├── begin-with-the-crazy-ideas.textile
    | └── on-simplicity-in-technology.markdown

    ├── _includes

    | ├── footer.html
    | └── header.html

    ├── _layouts

    | ├── default.html
    | └── post.html

    ├── _posts

    | ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
    | └── 2009-04-26-barcamp-boston-4-roundup.textile

    ├── _site

    └── index.html

    你可以一個個依次建立起來，然後在自己編寫一個你想要的博客。

  5. 如果你只是個普通用戶，只是想要一個模板然後開始寫自己的博客。那就很容易了，有幾個可以簡單開始的模板。

    • poole/poole · GitHub極簡風格的模板
    • Jekyll Themes jekyll的模板網站，可以找到各式各樣你喜歡的模板。

  6. 下載完了模板，可以吧裡面的內容解壓到你自己的網站目錄底下。這時候你可以測試一下：

    $ cd you website path //cd到你的網站目錄下
    $ jekyll serve
    //一個開發伺服器將會運行在 http://localhost:4000/
    //你就能在本地伺服器看到你用模板搭建的網站了

  7. 這時候可以看一下jekyll的設置，讓你把模板變成你自己個性化的內容。在網站根目錄下面找到_config.yml,這裡會有幾個比較關鍵的設置： 裡面的permalink 就是你博客文章的目錄結構，可以用pretty來簡單的設置成日期+文章標題.html，也可以用自己喜歡的結構來設置。 記得把encoding 設置成utf-8，這樣有利於中英文雙語的寫作和閱讀。

  8. 到這裡你就可以開始寫博客了，所有的文章直接放在_posts文件夾下面，格式就是我們之前提到的markdown文件，默認的格式是.md和.markdown文件。每篇文章的開始處需要使用yml格式來寫明這篇文章的簡單介紹，格式如下：

    ---
    author: kresnikwang
    comments: true
    date: 2015-04-28 17:42:32+00:00
    layout: post
    title: PHP, Angular JS Development|My Export Quote|農產品出口工具開發
    categories:
    - Works
    - Tech
    tags:
    - bootstrap
    - javascript
    - php
    - AngularJS
    ---

    layout就是post，讓jekyll知道你這是一篇post，很直觀。需要注意的是裡面的date，必須按照yml的語法來寫，否則就會出現編譯錯誤。可以只用YYYY-MM-DD來顯示日期，也可以像我一樣在後面加上 HH:MM:SS+00:00 來表示更具體的時間。

  9. 到此為止可以開始盡情的寫博客了，用GitHub軟體同步到你的repository裡面，網站上面就可以進行正常的顯示了。如果說要添加一下有用的extra功能的話，評論和相關文章這兩個功能比較多人會關注。 評論我們可以用Disqus國內應該也有類似的網站，到Disqus註冊一個賬號，選擇添加評論區域到自己的網頁，你將會的得到類似的代碼：

    &
    && &

    &
    &Related Posts& &

      & & &
      kresnik.co博客搬家告示
      &&
      &
      &       &

      & & &
      Javascript Include Html Page By Jquery
      &&
      &
      &       &

      & & &
      Github設置，強制使用"https://" 來代替 "git://"
      &&
      &
      &       &

      & &

      你每篇文章下面就會有三個相關文章的鏈接了。

    • 這篇教程就到這裡，有機會我想再寫寫liquid語法製作jekyll模板的內容和從wordpress導入文章到jekyll來的方法。喜歡能有些用處，感謝。

謝邀， @Blueve@鄧青宇 對GitHub, Jekyll, Markdown 講的很清楚了。

我最早接觸Jekyll 還是看了 阮一峰的這篇文章。

搭建一個免費的，無限流量的Blog----github Pages和Jekyll入門

1. GitHub Pages

GitHub Pages

What are GitHub Pages?

GitHub Pages are public webpages hosted and published through our site. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

Github Pages可以看成是GitHub免費託管的wiki site，主要是為GitHub repository服務的，讓原來亂七八糟的wiki有一個統一的格式，用的MarkDown [Markdown Basics](越來越多的網站，client都轉到用 MD語法了，國內的簡書，國外的medium)。之所以選擇MarkDown，也是為了我們廣大程序員，喜好VIM的編輯風格(像黑客一樣寫作)，這樣可以通過寫簡單的plain text，就能在HTML上面解釋成漂亮的網頁。

依著這個思路，我們當然可以將原本寫wiki的文字，變成紀錄issue，REAMDE.md，甚至是後來越來越多人，乾脆扔掉龐大的Wordpress，轉到GitHub Pages上寫blog，因為對我們來說，寫blog，其實無非就是記錄一些技術學習，項目開發中的經驗和技術，這類的blog和knowledge wiki其實無差別。

2. Jekyll static blogs

我們通過guide簡單配置的本地server，

~ $ gem install jekyll
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ jekyll serve
# =&> Now browse to http://localhost:4000

已經是一套GitHub的Pages系統了，只是文件在本地，只需要簡單編輯，寫blog只要利用MarkDown語法，OK之後，在通過GitHub，Push到GitHub Pages Server上面就可以了。

Jekyll uses the Liquid templating language to process templates. All of the standard Liquid tags and filters are supported. Jekyll even adds a few handy filters and tags of its own to make common tasks easier.

Liquid 是整個Jekyll的核心，所以也完全可以利用其他blog系統，只要是符合Liquid template的，GitHub那段就可以解析出來，從這個意義上講，Jekyll只是一種official的選擇。

3. Jekyll --&> Hexo

用Jekyll相對普通人來說已經足夠，但是如果需要強大的模版，一些可擴展的東西，就會比較麻煩，需要對前端有一定的技術背景。

所以出現了Hexo Hexo

What is Hexo?

Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.

Hexo ＝ Node.js + MarkDown

的靜態blog系統，完全match GitHub Pages，

強大之處在於很多plugins，themes。

How To Guide: Documentation

4. Dropplets

如果有自己VPS，推薦這個blog系統，雖然沒有Hexo那麼火，但是個人感覺十分輕量，簡潔。

Welcome to an Easier Way to Blog

Circa75/dropplets · GitHub

也是based MarkDown，亮點是 databaseless，用php寫的。

希望有所幫助，如果在搭建和使用中有什麼問題，可以告訴我，這些工具都比較簡單，應該還好。

每個工具都能解決特定的問題，希望能讓我們花更少精力在選擇工具上面，把更多時間花在總結技術上面~

寫完了搜索下，發現知乎上面已經滿滿的都是這方面的問題了，

Github Pages - 話題精華

如何在 GitHub 上寫博客？ - Github Pages

題主截圖是我的博客！

受寵若驚。

---

說說我的想法吧。

  1. 使用GitHub之前有必要學習一下git，廖雪峰的Git教程就很好。使用github pages就去看它的官方文檔，在看看jekyll的官方文檔。使用jekyll初始化一個博客工程後，就算是搭建好博客了。說30分鐘搭建好指的是安裝jekyll環境，到初始化成功，在本地4000埠上可以運行。初始的博客非常簡陋，需要自己重新設計界面，添加交互等。這些後續的工作可能會持續1-2個月，最後使博客穩定下來。你要有HTML，css，JavaScript基礎。在去了解一下jekyll的liquid語法。
  2. markdown語法2個小時就掌握了。jekyll是個博客引擎。
  3. 建議使用git命令行，github客戶端就是坑。fork的目的是為了給原作者提供代碼貢獻，為了pull request的。再說一遍，不要使用github客戶端，我被坑過不知一次。
  4. 是因為你沒有安裝jekyll環境，github官方是提供這個服務環境的，所以通過github可以正常瀏覽，本地不行。安裝好環境後，通過4000埠就可以瀏覽了。
  5. 不要使用github客戶端。
  6. 在本地編輯，直接修改post文件夾下的Markdown文件，具體可以看jekyll官網的說明。

========

  • 啟動好jekyll後，在localhost:4000上看，就應該是正常的，不要直接打開html文件。

  • 編譯後的效果問題，你誤刪了css文件？或者不小心把head中的&標籤修改了？總之是css樣式不對。

========

還有最關鍵的一點，搭建好博客後，如果使用的別人的模板，記著修改掉這些東西：

  • 統計代碼。如百度統計或者google統計，這樣避免麻煩原博主屏蔽一些別的來訪id。
  • 評論代碼。找到別人博客的評論代碼，如disqus代碼，或者多說評論的代碼，否則你的評論會在別人的評論後台提示，自己卻看不到提示。

========

祝順利！別著急，不會亂的，去看jekyll英文的官方文檔吧，原汁原味的最適合你。中文的抄來抄去，翻譯的又很爛，真的不如靜下來去看看官方的英文文檔。

這個軟體是一個工具，負責根據模板和你寫的文章生成一個靜態的站點，會有這種需求是因為Pages只能展示靜態頁面，而你又不希望自己寫每個頁面（特別是在很多頁面都只有內容是不一樣的情況下）

Markdown是一種簡易的排版工具，通過簡單的標記來排版比較簡單的網頁內容，當年那麼火的BBS里用的ubb語法其實和這個乾的是同樣的活，至於優雅不優雅好用不好用，那就是個人體驗的事了。這種東西你需要的時候就看一看，或者用滿大街的所見即所得md編輯器。

fork是為了保持原有軟體族系的情況下進行修改吧，這樣在你希望自己做的新功能能夠併入到原始項目的時候才可以pull request到原始分支。如果你是自己用，直接download，然後自己建項目，改改自己用就得了，不需要fork。所謂的push是指push到你自己建的項目中。

你開別人blog只有.html是因為人家push上去的是通過jekyll生成的靜態頁面，你可以把jekyll當做編譯器來理解，在倉庫里的都是編譯出來的結果。

github for windows是個git的gui客戶端，你可以看到你項目的各種commit，可以創建分支，切換分支，右上角的sync，其實就帶有把本地commit push到github的功能。有這個， 在很多常用操作上，免去自己手敲命令行的麻煩。

雖然沒有用過jekyll，但是既然是Pages是靜態頁面的展示，所以你需要在本地寫博客，然後通過jekyll的工作流發布到GitHub上。具體的你應該看官方的幫助：Using Jekyll with Pages

自己搭建博客最容易出現的問題就是CSS 文件找不到...

我之前用了一個模板，基於jekyll 2.0 的， 在本地效果超級棒。。但是一旦部署到了github上， 就各種找不到css 和js 文件。 翻閱github page 文檔才知道github 支持的jekyll 升級到了3.0 許多不維護的主題就不能用了。

Markdown 也有許多方言， github 支持的是kramdown， 有的自帶md 工具是另一種方言， 這點還是要注意一下的。

還有就是 要多用 右鍵的 」檢查元素「 功能... 哪裡字體載入不對， 哪裡CSS文件找不到 都有顯示。

發現知乎markdown語法支持不太好。最近寫了一篇算比較詳細的教程，從本地搭建開發環境到遠程部署以及域名綁定，還有創建自己的Rakefile文件，自動化創建.md，更加方便的書寫博客。

以下是來源：

Jekyll本地搭建開發環境以及Github部署流程

jekyll-now

不謝

我也是從零開始搭建的，就用的Jekyll和Github Pages，我覺得這個搭建起來不難，只要是有一點基礎的人，不用那麼久，最多兩天就可以弄完。

我是在Windows下搭建的，不喜歡用各種git命令，我用的是github for windows，如果有朋友喜歡圖形化界面的可以看看我的步驟：

Jekyll和Github搭建個人靜態博客

我寫的可能比較詳細，比較多，但我覺得這樣任何人都可以照著我的步驟搭建出自己的博客來。

祝你今天特別開心~

  • 購買、綁定獨立域名
  • 配置和使用Github

  • jekyll的安裝

  • 樣式、分類、標籤
  • 具體可以參考這篇文章利用github-pages建立個人博客
  • 我的博客源碼：GitHub - EZLippi/EZLippi.github.io
  • 網址：首頁：Home - Lippi-浮生志

我jekyll和hexo兩個都試過，然後自己做了一些優化。

整理文檔：使用jekyll和hexo搭建免費博客

完全可以去找一個乾淨的模板自己修改，省了本地環境的搭建

1

純粹想使用jekyll構建blog的話只需要學一下markdown語法，根據posts裡面的模板文章照著寫一遍即可。

Ref:Markdown 語法說明(簡體中文版)

如果想自己添加一些功能的話，就要學習一下jekyll的是怎麼用的。

Ref:Jekyll ? Simple, blog-aware, static sites

如果還要定製一些東西，如更改頁面布局，增加動畫效果什麼的，就需要學HTML+CSS+JS。

2

個人體驗，jekyll就是一個文本替換器，將模板裡面特殊標記（Liquid Template Language）替換成實際要顯示的東西，然後生成最終顯示的頁面。當然，這裡的模板就是使用HTML+CSS+JS+Liquid寫成的。

3

github是基於git的一個遠程代碼倉庫。git首先是一個版本控制軟體，許多功能都是為了進行團隊開發的。

Fork：把別人github上的repository複製到自己的github上，這樣自己就能夠在自己的repository上工作，而不影響被fork的repository。

Clone：把遠程代碼倉庫上的repository複製到自己的電腦上。

Push：把自己電腦上的repository傳送到遠程代碼倉庫上保存。

要想正常使用git還需要了解commit等等的一些概念。想要了解這些可以上Udacity的How to use git and GitHub公開課。或者一些git的書籍。

4

一般從人家repository下到的html是像這樣的，一般它並不包含要作為頁面顯示的全部HTML元素。如這樣

顯然，它不包含CSS，JS的調用，直接顯示這種東西，樣式肯定會出問題。

需要經過jekyll生成最終的HTML文件。上面的文件經過jekyll處理後就成了這樣

這才是最終送到瀏覽器里顯示的頁面。要在本機查看效果的話還是要配置一遍jekyll。

ref: Installation

5

那玩意確實是用於GitHub的帶GUI版本。git一般是在命令行下使用的。它並不是一個編輯器。

6

一般在本地修改（有沒有網都沒關係，git（不是GitHub）基本功能的使用是網路無關的），只要在任何有網的時候push上去就行。

因為喜歡特別簡潔的theme，而且一定要帶有側邊欄TOC目錄功能，於是、、就自己寫了個。。。

lszero/zero-theme

如果跟我一樣喜歡折騰，我這裡寫了篇自認為還比較詳細的文章：從WordPress到靜態網站 · Sokiamp;amp;amp;amp;amp;#x27;s Blog

TOC:

Jekyll + Github 搭建屬於你的靜態博客

以前我也寫過一個！

我在我的博客上寫了詳細的從零建jekyll的新手教程，歡迎交流～

http://ytysj.github.io/blog/myblog3

用hexo 傻瓜解決方案 30分鐘之內配置好

詳情轉google

另外markdown基本不用學，10分鐘入門,用一次就會

教程地址，我近期專門做了一個完整教程，並且把常見問題進行了匯總，這個也是我剛做的博客，網上關於這一塊的教程挺多的，但是對剛開始接觸這一塊的內容的同學很不友好，我已經把每一步具體的操作都寫了進去，希望可以幫助到你。如果還有問題，你可以通過605415633@qq.com聯繫我，我會及時回復你的。

話不多說，感覺我搭的這個網站是最豐富的個人博客了。歡迎大家訪問

網站地址：robotkang

網站裡面也有教程：

國產CMS在這方面創產不足，需要加油了，這也受制於國內互聯網環境相對閉塞影響，逐浪CMS跟進！

最近用jekyll自己寫了一個，可以直接forke一下用

網站長這個樣子 Minimal Blog · I like KISS. By KISS I means "keep it simple and stupid".

github的repository地址是：runningUnicorn/minimal-blog

推薦閱讀：

※GitHub 中為什麼有了 Watch 又增加了一個 Star 呢？
※GitHub 為什麼討人喜歡？
※GitHub 的 Pull Request 是指什麼意思？
※如何在 GitHub 上寫博客？
※有哪些程序化交易方面的 GitHub 作者值得關注？

TAG:博客 | 互聯網 | GitHub | Jekyll | GithubPages |