1. 程式人生 > >使用Jekyll和github搭建個人部落格

使用Jekyll和github搭建個人部落格

二、Jekyll環境配置

  • 在一個空資料夾中右鍵選擇開啟Git Bash Here,然後依次按以下命令執行,可能會比較慢,因為要下載安裝,所以要耐心等待:
$ gem install jekyll bundler
$ jekyll new blog
$ cd blog
$ bundle install
$ bundle exec jekyll serve
  • 執行$ bundle exec jekyll serve後,開啟瀏覽器輸入http://127.0.0.1:4000/,就可以看到如下圖:
    image.png

三、使用Github Pages服務

  • 建立倉庫,Repository name填寫username.github.io,username是你的github使用者名稱,其它的預設。
    image.png
  • 進入username.github.io倉庫,點選Settings進入選擇一個模板主題。
    image.png
    image.png

四、部署我們電腦上的blog

  • 在前面那個空資料夾中再次右鍵選擇開啟Git Bash Here,git clone我們github上的倉庫。如git clone我的$ git clone https://github.com/lcfu1/lcfu1.github.io.git
  • 開啟剛剛下載的username.github.io資料夾,把我們電腦上的blog複製貼上到這個資料夾上,相同的就選擇替換,執行$ jekyll serve,開啟瀏覽器輸入http://127.0.0.1:4000/,同樣可以看到如下圖:
    image.png
  • 依次執行以下命令,如果不懂Git,可以找一下相關文章看一下,我也寫了一篇關於git的,可以去找來看一下。
$ git status       //檢查本地專案的狀態
$ git add .        //新增全部檔案到追蹤列表
$ git commit -m "first commit"       //提交到本地倉庫
$ git push         //推送到github
  • 在瀏覽器中輸入https://username.github.io/,就可以看到如下圖,以前的模板改變了,變的跟我們在電腦上配置的一樣。
    image.png

五、修改我們的部落格資訊和寫部落格

  • _config.yml 按自己實際情況修改。
  • 我都是用Markdown寫部落格的,你也可以用Textile和HTML。以YEAR-MONTH-DAY-title.MARKUP格式命名並放到_posts中。
  • 然後依次執行
$ git status       //檢查本地專案的狀態
$ git add .        //新增全部檔案到追蹤列表
$ git commit -m "first commit"       //提交到本地倉庫
$ git push         //推送到github

六、繫結域名

  • 到github上開啟我們的username.github.io倉庫,點選Settings進入,在下圖圈圈中輸入你的域名並儲存,但是前提需要你的域名已經解析並添加了你的部落格github域名。
    image.png
  • 購買域名,然後到控制檯按下圖做類似修改進行域名解析。
    image.png

七、修改主題

  • 主題
  • 選擇一個你喜歡的主題,這裡我選的一個Jasper2主題,git clone 到一個空資料夾下,依次執行以下命令,
$ git clone https://github.com/myJekyll/jasper2.git
$ cd jasper2
$ gem install jekyll bundler
$ bundle install
$ bundle exec jekyll serve
  • 執行完$ bundle exec jekyll serve,開啟瀏覽器輸入http://127.0.0.1:4000/,可以看到如下圖:
    image.png
  • 可以把Jasper2資料夾下的檔案複製到你的blog資料夾下,相同的就選擇替換,右鍵選擇開啟Git Bash Here,$ bundle exec jekyll serve,然後再開啟瀏覽器輸入http://127.0.0.1:4000/,可以看到主題變為Jasper2主題了。$ bundle exec jekyll serve後可能會提示一些error,這就需要你後面的修改了。
  • 修改和寫部落格後可以再次推送到github上。
$ git status       //檢查本地專案的狀態
$ git add .        //新增全部檔案到追蹤列表
$ git commit -m "first commit"       
//提交到本地倉庫
$ git push         //推送到github

八、結束

  • 到這裡你的部落格就完成差不多了,後面看個人需要可以新增一些功能。
  • 如果遇到問題,可以自己摸索或谷歌一下,也可以找相關部落格文章文件檢視。
  • 當然也可以在簡書上評論私信我,我知道的儘量幫你解決難題。