更新

由于自己又折騰了一陣子，弄了個獨立的域名，而且還改了github的賬戶名。

所以博客地址改為了luckykun.com

------------------------------華麗的分割線--------------------------------------------------

其實我還挺喜歡寫文章的，雖然文筆不好＝＝，但總想給自己的學習和生活記錄些什么，前段時間一直在博客園寫，不過最近在逛論壇的時候不小心看到了hexo,簡直有種相見恨晚的感覺呀！在github上創建自己的開源博客，自己的域名，維護方便，主題多多，更重要的是，終于找到只屬于自己的小窩啦！于是果斷學習搭建了一個，也希望自己能堅持寫文^_^

為了引起讀者的興趣，先介紹一下，搭建完成之后，只需這幾個簡單常用的命令，就能夠輕松維護自己的博客了：

$ hexo new(n) //寫文章 $ hexo generate(g) //把文章生成頁面 $ hexo server(s) //啟動本地服務調試 $ hexo deploy(d) //部署到github 可與hexo g合并為 hexo d -g

折騰了大半天，終于搭建好了自己的博客點這里去看看。不過在這中途，也是歷經了九九八十一難呀，所以，我懷著激動心情，把我在這個過程中遇到的坑作為第一篇博客一一記錄下來，希望能幫到后面的學者。

• 備注1：如果喜歡以官方教程為主的，點這里hexo官方文檔。
• 備注2：網上大多教程是都是hexo2.x版本的，所以有很多坑。因此以下教程是針對hexo的版本為3.x以上的，大家放心使用。

準備工作

• 安裝node 到Node.js官網下載相應平臺的最新版本，一路安裝即可。
• 安裝git 根據系統不同安裝相應的git環境。mac系統不多說，windows一般安裝msysgit。下面是我本地msysgit的截圖，也還是挺好用的:?

• 安裝hexo
  使用以下命令安裝hexo到全局

  $ npm install -g hexo

  然后輸入命令hexo -v輸入hexo的版本號即為安裝成功。

• github準備

  • 博客是在github上托管維護的，所以當然需要一個github的賬號了。然后創建一個名為jarson7426.github.io的倉庫。
  • 其中‘jarson7426’是我的賬戶名，下文同理。

  • 除此之外，相信大多數人都知道，要想使用git命令來和github進行提交部署等操作，需要進行一些配置，大概就是下面一些命令，如不明白請自行搜索。

    git config --global user.email xxx@163.com git config --global user.name xxx ssh-keygen -t rsa -C xxx@163.com(郵箱地址) // 生成ssh 找到.ssh文件夾打開，使用cat id_rsa.pub //打開公鑰ssh串 登陸github，settings － SSH keys － add ssh keys（把上面的內容全部添加進去即可）

初始化

ok，環境都準備好了，開始激動人心的步驟了，搭建博客。

在某個地方新建一個項目文件夾（比如Blog），然后進入Blog目錄，以下所有的命令行操作都是在這個文件夾下進行的。

$ hexo init

生成靜態頁面

初始化完成之后，就已經生成一篇“hello word”的文章了，現在執行以下命令把文章編譯為靜態頁面：

$ hexo generate

本地啟動

把文章變為頁面之后，可以執行以下命令，本地啟動服務，在瀏覽器中輸入http://localhost:4000/查看生成的頁面效果。

$ hexo server

如果你看到了下面這個畫面，恭喜你，你成功了！

更換主題

上面的博客效果是hexo自己默認的主題landscape，如果你滿足與它，可以跳過這個步驟，直接進行下一步。但是我卻還不夠滿足，因為我發現了一個頁面交互人性化，并且完美兼容不同終端顯示的主題yilia，貌似這個主題受歡迎程度很高呀，說明我的審美還是不錯啊，哈哈~~

下面貼出github上star數量最多的前10個主題（截至目前為止）：

• iissnan/hexo-theme-next， 3510個star。
• litten/hexo-theme-yilia， 1703個star。
• TryGhost/Casper， 679個star。
• wuchong/jacman， 503個star。
• A-limon/pacman， 431個star。
• daleanthony/uno， 416個star。
• orderedlist/modernist， 367個star。
• AlxMedia/hueman， 336個star。
• kathyqian/crisp-ghost-theme， 303個star。

• xiangming/landscape-plus， 287個star。

• clone主題代碼
  在目錄下執行下面的命令clone主題代碼：

  $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

• 修改配置文件
  修改Blog/_config.yml文件：

  theme: yilia //默認為landscape

  修改themes/yilia/_config.yml文件：

  # Header menu:主頁: /所有文章: /archives絲茉茉: /categories/simomo/相冊: /photos # SubNav subnav:github: "https://github.com/jarson7426"weibo: "http://weibo.com/u/2732624311"zhihu: "#"rss: /atom.xml # Content excerpt_link: 閱讀全文 fancybox: true mathjax: true top: true # 是否開啟動畫效果 animate: true # 是否在新窗口打開鏈接 open_in_new: false # Miscellaneous google_analytics: '' favicon: /favicon.ico #你的頭像url avatar: /img.png #是否開啟分享 share_jia: true share_addthis: false #是否開啟多說評論，填寫你在多說申請的項目名稱 duoshuo: duoshuo-key #若使用disqus，請在博客config文件中填寫disqus_shortname，并關閉多說評論 duoshuo: jarson7426 #是否開啟云標簽 tagcloud: true #是否開啟友情鏈接 #不開啟—— friends: false #開啟—— #friends: # 百度一下: http://www.baidu.com # 淘寶商城: http://www.taobao.com #是否開啟“關于我”。 #不開啟—— #aboutme: false #開啟—— aboutme: true

• 查看效果
  更改主題之后可以使用命令hexo server打開本地服務，查看效果。

部署到github

上面所有的操作完成之后，你就可以將你的Blog項目部署到github上了。

• 部署之前先修改Blog/_config.yml文件。

  deploy:type: gitrepository: https://github.com/jarson7426/jarson7426.github.io.git //jarson7426替換為你自己的用戶名branch: master

  備注：在hexo3.x版本下，這里的type應該填git，不是github；另外冒號后面都有一個英文的空格，不然會報錯的。

• 然后使用以下命令進行部署。

  $ hexo deploy

  備注：如果執行上述命令報錯，你可以試試下面這個命令再試。

  $ npm install hexo-deployer-git--save

部署成功后，你在瀏覽器中輸入jarson7426.github.io，就能看到和本地一樣的效果了。

結語

可能會有同學發現，我除了使用了新的主題外，還加了很多新的東西。

• 鼠標移動頭像上會有旋轉效果。
• 給文章添加打賞功能。
• 添加回到頂部的功能。
• 添加總站訪問量和文章閱讀量
• 其實修改這些非常簡單，只要你有html、css、js的基礎就可以。

思路：因為整個網站都是依賴yilia主題。所以應該在theme/yilia文件夾下，修改對應的dom結構，然后添加對應的效果或者事件綁定就可以實現了。

好了，到這里搭建github博客的步驟就結束了。enjoy it！！！

題記：周末花了很長時間，基于gitpages+jekyll搭建博客，記錄下其中一些過程
http://fatmind.github.io/

一、首先得理解：

1.Github Pages 是什么 ?
GitHub Pages are public webpages freely hosted and easily published through our site。
github Pages可以被認為是用戶編寫的、托管在github上的靜態網頁，是個免費的host服務。

2.Jeklly 是什么 ?
Jekyll從核心上來說是一個文本轉換引擎。該系統內部的工作原理是：你輸入一些用自己喜愛的標記語言格式書寫的文本，可以是Markdown、Textile或純粹的HTML，它將這些文本混合后放入一個或一整套頁面布局當中。在整個過程中，你可以自行決定你的站點URL的模式、以及哪些數據將被顯示在頁面中，等等。這一切都將通過嚴格的文本編輯完成，而生成的Web界面則是最終的產品。

3.github pages與jeklly關系
Jekyll is the engine behind GitHub Pages.
Every GitHub Page is run through Jekyll when you push content to a specially named branch within your repository.
即：提交到github-pages的內容會經過jeklly處理，轉換為靜態的html，前期是結構必須符合jeklly的要求。參見：www.soimort.org/posts/101/ <基本結構> 部分

二、動手操作

1.請認真閱讀，非常清楚
http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
注：例子中使用project-site方式，user-site方式會更簡單點，無需分支gh-pages。請看https://pages.github.com/

help文檔?請注意
a、For User Pages, use the master branch in your username.github.io repository. For Project Pages, use the gh-pages branch in your project's repository.
b、Because a normal HTML site is also a valid Jekyll site, you don't have to do anything special to keep your standard HTML files unchanged.

2.Jeklly是否一定要在本地安裝 ?

We highly recommend installing Jekyll on your computer to preview your site and help diagnose troubled builds before publishing your site on GitHub Pages.

目的是為了方便調試問題，所以不是必須的。安裝比較繁瑣。
推薦：找一個滿意的模板，clone下來簡單修改，很少需要在本地調試。https://github.com/jekyll/jekyll/wiki/sites

三、其它

1.當提交后，一直不能生效，一般是因為jeklly處理錯誤。可以查看郵箱確認：github會發一封 ‘Page build failure’

2.推薦markdown編輯器：haroopad

3.hexo與jeklly比較

總結

以上是生活随笔為你收集整理的hexo VS jekyll的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。