使用github+jekyll搭建個人博客


聊聊起初

每次看到大牛們的博客,都會激起一顆一定要搭建自己博客的心,畢竟有着一顆向大牛們看齊的心。但是一直不知道如何下手,從最初的csdn寫寫博客到在github上建立倉庫寫代碼分享,雖然也能夠記錄一些事情,但是總感覺缺少點什么——對,就是像是這東西並不是自己的。后來偶然機會知道了github的gh-pages功能可以搭建個人博客,然后興致沖沖地去折騰了一番,但是了解到並不能搭建后台,突然間又像澆了一盤冷水一樣,知道現在都還存留着這個博客的殘骸,看這里http://rynxiao.github.io/blog/#/

之前是想着用react搭建前台頁面,后台用bmob,但是放置久了,心也就冷了,索然不做了。最近才發現原來github的gh-pages也可以使用jekyll來搭建,好吧,怪自己孤陋寡聞。然后就試着了解了一下jekyll,也就是這博客的由來。

經歷過程

閑話說了,聊聊經歷過程吧,順便記錄自己踩下的坑。本人是在windows上進行操作,至於其他平台上的操作,請小伙伴們自行搜索。

搭建博客有兩種安裝過程:1.使用jekyll搭建;2.從jekyll模板中找到一個自己喜歡的,fork進自己的博客,然后修改_config.yml文件,下面分別來講講兩種方式的搭建。

一、使用jekyll服務搭建

1.1 安裝ruby以及ruby相關工具(DevKit)

由於jekyll是基於ruby語言開發的,因此我們需要安裝ruby以及ruby相關的工具(DevKit)。具體的ruby可以到官網上去下載,不過畢竟是國外網站,如果沒有好的翻牆工具還是比較慢的。這里我已經准備好了,點rubyDevKit下載。點擊exe文件進行自定義目錄安裝。安裝完成之后,確保ruby的環境已經配置到了系統的變量中。比如我的DevKit安裝目錄是:D:\develop\DevKit。進入DevKit目錄,輸入如下命令:

C:\Users> cd D:\develop\DevKit

C:\Users> D:

D:\develop\DevKit> ruby dk.rb init

D:\develop\DevKit> ruby dk.rb install

可以使用gem -vruby -v來確認是否已經安裝成功

ruby+Devkit

1.2 更改gem sources

使用gem sources發現是https://rubygems.org/,國外網站的通病就是下載很慢,因此我們需要替換一個國內的源。

gem sources -add https://gems.ruby-china.org/ --remove https://rubygems.org/ 替換源

gem sources -u 更新緩存

gem sources 查看替換后的源

gemsources

看到更新之后的源被替換成了http://gems.ruby-china.org/,沒錯,就是http,我試了用https一直是不成功的。

1.3 安裝jekyll

經過上面兩步之后,我們就可以安裝jekyll了。調用命令:

gem install jekyll

之后使用jekyll -v來查看jekyll版本,可以看到我的版本是3.4.0。記錄一下,本人並沒有安裝3.0.0以前的版本,這是在網上看到的:

這里稍微強調一下,這個版本和之前的2.x. x版本有些許不一樣,可能在后面_config.yml的寫法上可能有差異,不過沒關系,這並不影響我繼續前進

jekyllversion

1.4 創建博客

至此我們就可以用jekyll來創建博客了,具體命令如下:

jekyll new myblog

cd myblog

jekyll server

然后在http://127.0.0.1:4000端口來查看你創建的博客。

1.5 可能會遇到的坑

  • 端口占用

port

看到jekyll啟動服務的4000端口已經被占用,我們需要找到占用的程序,然后干掉它。

// 1.查看所有的端口使用情況,顯示PID

netstat -ano 

// 2.找到端口被占用的PID,比如PID為14325

tasklist /svc /FI "PID eq 14325"

// 3.打開任務管理器,找到相應的程序,殺掉就好

// FoxitProtect.exe 默認會綁定4000端口,因此殺掉這個進程就行

如下圖,正常啟動如下:

jekyllserver

在瀏覽器中輸入127.0.0.1:4000就可以看到我們的博客模樣:

blog

1.6 后話

這只是jekyll提供的最基本的博客原型,當然你可以更改其中的樣式、結構來變成自己喜歡的模樣,同時還可以安裝高亮插件、數學公式插件等等,這里就不再贅述,請小伙伴們自行搜索安裝。

jekyll的目錄結構,最重要的就是_includes,_layouts,_posts

_config.yml : 配置文件,用來定義你想要的效果,設置之后就不用關心了。

_includes : 可以用來存放一些小的可復用的模塊,方便通過{ % include file.ext %}(去掉前兩個{中或者{與%中的空格,下同)靈活的調用。這條命令會調用_includes/file.ext文件。

_layouts : 這是模板文件存放的位置。模板需要通過YAML front matter來定義,后面會講到,{ { content }}標記用來將數據插入到這些模板中來。

_posts : 你的動態內容,一般來說就是你的博客正文存放的文件夾。他的命名有嚴格的規定,必須是2012-02-22-artical-title.md這樣的形式,MARKUP是你所使用標記語言的文件后綴名,根據_config.yml中設定的鏈接規則,可以根據你的文件名靈活調整,文章的日期和標記語言后綴與文章的標題的獨立的。

_site : 這個是Jekyll生成的最終的文檔,不用去關心。最好把他放在你的.gitignore文件中忽略它。

2.在github中展示你剛才搭建的博客

2.1 注冊一個github賬號

比如我的github賬號名稱就是rynxiao,注冊請點擊這里https://github.com/

2.2 配置ssh
  • 安裝git客戶端

安裝地址 https://git-scm.com/download/win,快一點可以直接在百度上搜索下載。

  • 檢查是否生成了ssh key

如果生成了ssh key,那么會在windows的C盤用戶目錄下生成一個.ssh的文件夾(比如我的地址就是C:\Users\huyh.ssh),如果沒有,則進行下一步。

  • 在本地創建ssh key
ssh-keygen -t rsa -C "yuzhongzi91@sina.com" //這里以我的郵箱為例子,自行替換
  • 將公鑰中的內容復值到github中的ssh keys中

連續三次回車之后會在.ssh文件夾中生成id_rsa(私鑰)和id_rsa.pub(公鑰),使用編輯工具打開id_rsa.pub,復制內容。

進入自己的github主頁,點擊settings -> SSH and GPG keys -> New SSH key -> 填寫title以及復制剛才公鑰中的內容

  • 驗證

在cmd中輸入命令,顯示出自己的用戶名,則說明已經成功連上github。

ssh -T git@github.com 

ssh

  • 設置git的username和email
git config --global user.name "rynxiao"

git config --global user.email "yuzhongzi91@sina.com"
2.3 上傳自己的代碼到github倉庫

進入自己的github主頁,然后新建一個倉庫,名稱叫做你的用戶名.github.io,例如我的就叫做Rynxiao.github.io

然后進入你本地的博客目錄,例如是myblog,輸入如下命令,下面以我的用戶名為例:

git init                                                                // 初始化git倉庫

git add .                                                               // 添加文件夾中的所有內容到本地倉庫

git commit -m "first commit"                                            // 添加評論

git remote add origin https://github.com/Rynxiao/Rynxiao.github.io.git  // 添加遠程github倉庫地址

git push -u origin master                                               // 提交本地倉庫代碼到遠程倉庫

連上倉庫之后會讓你輸入用戶名和密碼,然后就可以提交代碼了。然后在瀏覽器中輸入Rynxiao.github.io,就可以看到我們在本地中搭建的博客樣子了

二、復制別人現有的博客模板

  • 進入http://jekyllthemes.org/,挑選一個自己喜歡的模板
  • 進入主頁,然后fork至自己的倉庫下
  • 進入自己github主頁,找到剛才的那個倉庫,然后點擊settings,更改名稱,格式為你的賬戶名.github.io,例如我的就叫Rynxiao.github.io
  • 更改倉庫中的config.yml文件,換成自己的信息。詳細的更改配置可以在模板的主頁中讀取,一般都會有介紹
  • 在瀏覽器中輸入你的賬戶名.github.io,就可以看到你喜歡的博客模樣了

參考鏈接

https://bigballon.github.io/posts/jekyll-github.html

http://blog.csdn.net/u014015972/article/details/50497254


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM