摘要：

? ? ? ? 本文中我將介紹一下如何在github上搭建個(gè)人Blog（博客），也順便讓我們掌握一下github?Pages功能，另外還涉及到Jekyll技術(shù)。

===============================分割線====================================

? ? 在前面的文章中我們已經(jīng)完成了開發(fā)個(gè)人博客的所有環(huán)境配置工作，接下來我們就要開始在這些環(huán)境上嘗試搭建我們的第一個(gè)個(gè)人博客了。

一、創(chuàng)建博客本地書寫目錄：

? ? 打開命令行，定位到本地用于存放博客工程的目錄（可以自定義），然后運(yùn)行創(chuàng)建jekyll工程目錄的指令“jekyll new "工程文件夾名稱"”創(chuàng)建工程：

? ??

? ? 創(chuàng)建成功后，可以在windows資源管理器下查看此工作目錄，發(fā)現(xiàn)自動(dòng)創(chuàng)建了一個(gè)My_Blog文件夾，且文件夾下生成了一些文件，這些就是博客的基本文件：

? ??

二、啟動(dòng)jekyll管理進(jìn)程：

? ? 以上步驟完成了工程的創(chuàng)建，那么接下來我們嘗試啟動(dòng)jekyll的管理進(jìn)程（相當(dāng)于網(wǎng)頁開發(fā)中常用到的apache）,然后在瀏覽器中查看效果。啟動(dòng)的指令是“jekyll serve”：

? ??

? ? 好事多磨，像這樣的事怎么可能一次性成功嘛，遇到問題沒關(guān)系，解決了就好，其實(shí)這是一個(gè)很低級(jí)的錯(cuò)誤，我們很容易看出導(dǎo)致錯(cuò)誤的原因是找不到文件，其實(shí)是因?yàn)槲覀儧]有進(jìn)入到工程目錄下再運(yùn)行指令：

? ??

? ? 正常啟動(dòng)管理進(jìn)程后，我們可以看到日志中有服務(wù)器訪問地址：http://127.0.0.1:4000/，直接在瀏覽器中訪問此地址，看到如下結(jié)果則表示啟動(dòng)成功：

三、個(gè)性化設(shè)置：

? ?由于我們啟動(dòng)進(jìn)程之前并未對(duì)jekyll自動(dòng)生成的博客框架進(jìn)行格式修改，所以顯示出來的結(jié)果都是使用默認(rèn)值設(shè)置的。我們?cè)趯⒌谝话娌┛桶l(fā)布到github之前，還需要進(jìn)行一些個(gè)性化的設(shè)置操作（也可以保留默認(rèn)設(shè)置直接發(fā)布），比如：博客名稱還有個(gè)人信息等。

? ? 這些設(shè)置的默認(rèn)值其實(shí)是在_config.yml中配置的:

?

? ? 我們可以稍微對(duì)這個(gè)配置文件做一些修改，由于修改不是實(shí)時(shí)同步的，而是在啟動(dòng)進(jìn)程時(shí)讀取之后就不再改變的，所以我們修改完之后，回到命令行按Ctr + C結(jié)束進(jìn)程，然后再重新啟動(dòng)管理進(jìn)程：

? ??

? ? 在瀏覽器刷新一下，可以看到修改內(nèi)容已經(jīng)生效：

?

? ? 我們發(fā)現(xiàn)_config.yml文件只能修改一些邊緣資料的內(nèi)容，而網(wǎng)頁中間的主體部分，其實(shí)是在工程根目錄下的index.html的內(nèi)容，我們也可以嘗試修改一些內(nèi)容：

<span style="font-size:18px;">--- layout: default ---<div class="home"><h1 class="page-heading">第一個(gè)博客頁面</h1><ul class="post-list">{% for post in site.posts %}<li><span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span><h2><a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h2><h2>{{ post.excerpt }}</h2></li>{% endfor %}</ul><p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p></div></span> ? ? 修改了內(nèi)容的標(biāo)題和添加一個(gè){{ post.excerpt }}這是內(nèi)容簡介（這是基于liquid的模板語法），它所引用的內(nèi)容其實(shí)就是_posts目錄下面.markdown文件中的內(nèi)容，具體的調(diào)用關(guān)系后面再做詳細(xì)解析，這里我們只是查看效果：

? ??

總結(jié)

以上是生活随笔為你收集整理的Github+Jekyll —— 创建个人免费博客（四）jekyll第一个页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。