摘要：百度統計先注冊個百度統計的賬號站長賬號，適合個人博客，注冊成功后按照提示，把代碼復制到中的的標簽里這里特指我的博客文件好了，這樣你的博客就差不多了，是不是感覺很酷今天就到這兒，下篇文章見。

GITHUB地址：博客倉庫

覺得好的話，記得給個星呀~

網頁端

移動端1

移動端2

GITHUB賬戶

SASS、JS、CSS

搜索功能

多說評論

百度統計

首先，你得有一個GITHUB賬戶，還沒有的趕緊去注冊一個吧。

登陸 GitHub，新建一個 repository, 命名為 你的用戶名 + github.io。如我的用戶名為 haonancx，所以 repository 命名為 haonancx.github.io（可以購買私人域名），如下圖。

注意圖片中紅色箭頭標注的地方，命名和你掛載在 GITHUB 的域名是一致的，就是你命名為 "haonancx",那么你的個人博客地址就是 "haonancx.github.io";其次要勾選上 "Public",別人才能訪問你的博客。

如果你覺得我博客風格還不錯的話，可以去把他 GIT 下來；或者你可以從這里選中你喜歡的博客；地址：jekyllthemes

下載好你喜歡的博客，然后，把它上傳到你剛建好的 repository 上；
然后 輸入你的博客地址就訪問成功了。

如果你需要修改博客內容，這里給你介紹一下；文件夾中的內容（以我的博客為例）。

_include 文件夾中是網頁的公共部分，head.html是文件head標簽里的引入的文件，圖片等，header.html、footer.html 是網頁的公共頭部（導航）和底部（版權）；

_layouts 中 default.html、post.html 是引入網頁的公共頭部（導航）和底部（版權）以及編譯發表文章的內容，

_sass 、css文件夾中有整個博客的公共樣式文件。(在這里你可以對你的博客按照你喜歡的 UI 界面進行調整)

images 文件夾中包含引用的圖片(傻子都知道~)。

scripts 文件夾中有引用的 JS 文件。

_config.yml 為博客的配置文件，如果你要使用一些插件，大部分都得在這里配置（很重要~）。

撰寫方式

試試雙擊Ctrl鍵看看，或者點擊右下角搜索圖標；

博客從wordpress的jekyll，jekyll的核心思想:

將純文本轉化為靜態網站和博客

jekyll只是一個生成靜態網頁的工具，不需要數據庫支持。但是可以配合第三方服務,例如Disqus。最關鍵的是jekyll可以免費部署在Github上，而且可以綁定自己的域名。

jekyll沒有數據庫支持，默認沒有搜索功能，那么怎么添加炫酷簡潔的搜索的功能呢？google一下，大部分都是使用插件之類的，起始我們可以直接在服務端產生索引，之后利用索引進行搜索。

受到spotlight的簡潔啟發，于是打算做出一個類似于spotlight的搜索。下面先看一下操作步驟：

服務端生成文章索引

瀏覽器獲取文章索引

頁面交互以及按鍵控制

JSON代碼

{

"code" : 0 ,
"data" : [
 {\% for post in site.posts \%}
{
    "title" : " - {\% for tag in post.tags \%}{\% if forloop.rindex != 1 \%}_{\% else \%}{\% endif \%}{\% endfor \%}",
    "url" : ""
}
{\% if forloop.rindex != 1  \%}
,
{\% endif %}

{% endfor %}

]

}
{% endhighlight %}

由于文章中的動態代碼會被解析，所以做了替換，代碼中%被替換成%,使用中請去除%前面的轉義符

這段代碼是一個雙層循環，將文章的標題與標簽組合，同時和url一起組合為json字符串，方便后續ajax調用。

瀏覽器獲取文章索引，此處也即一個ajax調用，使用$.ajax或者$.getJson都可以，此處可以參考一下ajax的異步請求。

頁面交互以及按鍵控制，為了能夠有一個更好的交互，對搜索進行了很多的按鍵的操作:

PC下雙擊Ctrl鍵打開或者關閉搜索框，搜索框展示時按下Esc鍵關閉搜索框，按鍵的檢測在js中也是很容易進行，此處也不在列代碼了。

為了移動端也可以很好的搜索，在頁面的右下角加入搜索懸浮按鈕，點擊后打開搜索頁面，而在搜索頁面，右上角提供關閉按鈕，這樣整體下來就完美的實現了搜索。

jekyll bootstrap搭建的博客默認使用的是Disqus評論插件,當然不是說Disqus不好，只是針對我們國內的用戶來說,似乎并不是最好的選擇。所以我們改為多說（容易上手）。

創建成功之后 我們會得到如下代碼

這段代碼有三個地方需要修改

最后我們就可以在頁面中看到多說了。

先注冊個百度統計的賬號(站長賬號，適合個人博客)，注冊成功后；

按照提示，把代碼復制到 head.html 中的head的標簽里；（這里特指我的博客文件）