1. 程式人生 > >Github+Jekyll —— 建立個人免費部落格(四)jekyll第一個頁面

Github+Jekyll —— 建立個人免費部落格(四)jekyll第一個頁面

摘要:

        本文中我將介紹一下如何在github上搭建個人Blog(部落格),也順便讓我們掌握一下githubPages功能,另外還涉及到Jekyll技術。

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

    在前面的文章中我們已經完成了開發個人部落格的所有環境配置工作,接下來我們就要開始在這些環境上嘗試搭建我們的第一個個人部落格了。

一、建立部落格本地書寫目錄:

    開啟命令列,定位到本地用於存放部落格工程的目錄(可以自定義),然後執行建立jekyll工程目錄的指令“

jekyll new "工程資料夾名稱"”建立工程:

    

    建立成功後,可以在windows資源管理器下檢視此工作目錄,發現自動建立了一個My_Blog資料夾,且資料夾下生成了一些檔案,這些就是部落格的基本檔案

    

二、啟動jekyll管理程序:

    以上步驟完成了工程的建立,那麼接下來我們嘗試啟動jekyll的管理程序(相當於網頁開發中常用到的apache),然後在瀏覽器中檢視效果。啟動的指令是“jekyll serve”:

    

    好事多磨,像這樣的事怎麼可能一次性成功嘛,遇到問題沒關係,解決了就好,其實這是一個很低階的錯誤,我們很容易看出導致錯誤的原因是找不到檔案,其實是因為我們沒有進入到工程目錄下再執行指令:

    

    正常啟動管理程序後,我們可以看到日誌中有伺服器訪問地址:http://127.0.0.1:4000/,直接在瀏覽器中訪問此地址,看到如下結果則表示啟動成功:

三、個性化設定:

由於我們啟動程序之前並未對jekyll自動生成的部落格框架進行格式修改,所以顯示出來的結果都是使用預設值設定的。我們在將第一版部落格釋出到github之前,還需要進行一些個性化的設定操作(也可以保留預設設定直接釋出),比如:部落格名稱還有個人資訊等。

    這些設定的預設值其實是在_config.yml中配置的:

 

    我們可以稍微對這個配置檔案做一些修改,由於修改不是實時同步的,而是在啟動程序時讀取之後就不再改變的,所以我們修改完之後,回到命令列按Ctr + C結束程序

,然後再重新啟動管理程序:

    

    在瀏覽器重新整理一下,可以看到修改內容已經生效:

 

    我們發現_config.yml檔案只能修改一些邊緣資料的內容,而網頁中間的主體部分,其實是在工程根目錄下的index.html的內容,我們也可以嘗試修改一些內容:

<span style="font-size:18px;">---
layout: default
---

<div class="home">

  <h1 class="page-heading">第一個部落格頁面</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>
    修改了內容的標題和新增一個{{ post.excerpt }}這是內容簡介(這是基於liquid的模板語法),它所引用的內容其實就是_posts目錄下面.markdown檔案中的內容,具體的呼叫關係後面再做詳細解析,這裡我們只是檢視效果: