利用Jekyll在GitHub Pages上部署部落格
開始之前
需要對Git的基本操作有些瞭解:
Git基本操作
##設定全域性使用者名稱和email,作為每次提交的記錄
git config --global user.name “name"
git config --global user.email “mail.com”
##新增一個倉庫
git remote add origin [email protected]….git
git push -u origin master
##當提示許可權不夠時,新增ssh公鑰
##在使用者的.ssh目錄下找id_rsa.pub等檔案,沒有的話去生成
ssh-keygen -t rsa -C " [email protected]”
##設定pull的預設地址
git branch --set-upstream-to=origin/master
##設定push的預設地址
git remote add origin [email protected]….git
##配置別名
git config --global alias.xx ''
##臨時儲存工作區
git stash
git stash pop
## 回滾
git reset —hard 版本號
## 強行回滾遠端伺服器
git push -f
配置別名後會很方便,如果我有一個這樣的別名:
在提交的時候用ci就行了。單個人使用Git,不協同工作的話,還是比較簡單的。bogon:portfolio zhangao$ git config --global alias.ci commit -m
GitHub Pages
GitHub Pages上比較簡單,只需要建立一個和你使用者名稱相同的Repository就行了,比如:這樣就建立了一個Repository,這樣就能通過username.github.io來訪問了。你也可以在設定裡面選擇生成一個預設的頁面。
下面主要還是說下在使用Jekyll過程中實際的問題
評論系統
我之前使用的是Disqus,後來感覺速度不怎麼樣,就換了多說,多說還是很好用的,適合國內環境。部落格搬家
我之前沒有找到mac版的,就自己做了一個:程式碼高亮
高亮的外掛有很多,Jekyll的Pygments就已經超過pygments: true
然後在需要高亮的程式碼那裡:{% highlight ruby %}
def foo
puts 'foo'
end
{% endhighlight %}
ruby替換為你所使用的語言的短名稱即可。如果設定了pygments之後編譯出錯的朋友需要再加一條配置:excerpt_separator: ""
這是Jekyll的bug導致的,這樣雖然可以用pygments完成程式碼高亮,卻又不能用excerpt取到文章摘要了。最後我使用的是Sunlight,支援的語言比較多,完全可配置,可定製,能支援Objective-C的高亮:但是和我發表在CSDN上的文章使用的程式碼高亮外掛不一樣,我又想要使用這個Sunlight,就只能自己寫個用正則查詢替換的工具轉了:
顯示分類
顯示分類:<h4>分類列表</h4>
<hr>
{% for category in site.categories %}
<li class="category_list_item"><a href="/showCategory.html?categoryName={{ category | first }}">{{ category | first }}</a> ({{ category | last | size }})
</li>
{% endfor %}
顯示所有的分類一般都沒什麼問題,主要在具體分類頁面進行處理。基於Jekyll的靜態特性,這個地方處理起來不太優雅,我參考了其他人的做法,最後選擇將文章列表儲存在JSON裡面:var articleList = [{% for post in site.posts %}
<span style="white-space:pre"> </span>{"title":"{{post.title}}",
"url":"{{site.url}}{{post.url}}",
<span style="white-space:pre"> </span> "date":"{{ post.date | date:'%Y-%m-%d' }}",
"excerpt": '{{ post.excerpt | strip_html | strip_newlines | truncate:170 }}'
{% if post.categories != empty %}
,
"categories":[{% for category in post.categories %}"{{category}}"{% if forloop.last == false %},{% endif %}{% endfor %}]{% endif %}}
{% if forloop.last == false %},{% endif %}{% endfor %}];
我在這裡判斷了文章有沒有分類,如果沒有分類的話,就不新增到這個JSON裡了,另外說下post.excerpt:- excerpt是獲取文章的摘要資訊,這個資訊可以顯示在文章列表裡面
- strip_html是除去HTML標籤,因為摘要裡面不需要顯示圖片之類的,純文字即可
- strip_newlines是去掉換行符
- truncate這個就是字面意思了,摘要的長度
<a href="javascript:void(window.location.href=encodeURI('/showCategory.html?categoryName={{ category | first }}'))">{{ category | first }}</a>
取的時候用decodeURI函式去取。strip_newlines無法去除換行符,或者遇到其他換行符之類的問題
比如我有遇到strip_newlines無法去除換行符的問題,如果去不掉的話,某些內容放進JSON的時候,自然而然的就出現問題了,因為不能連線字串,但是又跨行了。strip_newlines只能去掉Unix的換行符,於是我就再一次使用了我之前寫的全文字替換工具Mac,做了一次替換:實現分頁
Jekyll本身對分頁限制很多,只支援HTML檔案,不支援md,其次,對分類和標籤的分頁也不支援,這就很令人難受,只能將就用用了。在_config.yml檔案裡面新增:paginate: 10
paginate_path: "page:num"
paginate表示開啟分頁並設定每頁的數量;paginate_path是指定分頁時Jekyll尋找HTML檔案的路徑,比如這裡設定為page:num,那麼Jekyll在分頁時,第一頁還是你的部落格的index.html,第二頁就是/page2/index.html,第三頁就是/page3/index.html。如果指定的path不存在會自動往上級目錄找,直到根目錄的index.html,或者這個引數沒有設定的話預設值就是page:num。在首頁裡面對文章進行分頁,用一個簡單的迴圈:{% for post in paginator.posts %}
<a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}
為了生成分頁的連結,在根目錄的index.html檔案裡面加上:{% if paginator.total_pages > 1 %}
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}">上一頁</a>
{% endif %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}">下一頁</a>
{% endif %}
{% endif %}
如果想要顯示所有的頁碼:{% for page in (1..paginator.total_pages) %}
{% if page == 1 %}
<a href="/index.html">{{ page }}</a>
{% else %}
<a href="{{ site.paginate_path | replace: ':num',page }}">{{ page }}</a>
{% endif %}
{% endfor %}
因為第一頁是index.html,不是page1,所以要特殊處理一下。這樣一個簡單的分頁就完成了。附分頁物件paginator的所有屬性:- page當前頁碼
- per_page每頁文章數量
- posts當前頁的文章列表
- total_posts總文章數
- total_pages總頁數
- previous_page上一頁頁碼 或 nil
- previous_page_path上一頁路徑 或 nil
- next_page下一頁頁碼 或 nil
- next_page_path下一頁路徑 或 nil
相關推薦
利用Jekyll在GitHub Pages上部署部落格
開始之前需要對Git的基本操作有些瞭解:Git基本操作##設定全域性使用者名稱和email,作為每次提交的記錄 git config --global user.name “name" git config --global user.email “mail.com” ##
【故障公告】部署在 k8s 上的部落格後臺昨天與今天在訪問高峰多次出現 502
非常抱歉,從昨天上午開始,部署在 k8s 叢集上的部落格後臺(基於 .NET Core 3.1 + Angular 8.2 實現)出現奇怪問題,一到訪問高峰就多次出現 502 ,有時能自動恢復,有時需要我們手動刪除 pod ,由此給您帶來麻煩,請您諒解。 我們的應用都部署在同一個 k8s 叢集上,就這一個
使用 jekyll + github pages 搭建個人部落格
1. 新建 github.io 專案 其實 github pages 有兩個用途,大家可以在官方網頁看到。其中一個是作為個人/組織的主頁(每個賬號只能有一個),另一個是作為 github 專案的專案主頁(每個專案可以有一個)。 而 github pages 本身就支援 jekyll
Connection reset by [server_ip] port 22 (hexo d 部署部落格出錯)
問題 在使用 hexo d 部署部落格和使用 Git/Github 進行 git push -u origin master 時遇到了以下問題: git -c diff.mnemonicprefix=false -c core.quotepath=false push -v --tags origin
hexo d 部署部落格時出錯
問題描述: // 第一次遇到的問題 Error: packet_write_wait: Connection to 192.30.253.113 port 22: Broken pipe packet_write_wait: Connection to 192.30.253.113 port 2
利用Python批量儲存51CTO部落格
一、背景 最近在整理部落格,近在51CTO官網存在文章,想將之前寫的全部儲存到本地,發現用markdown寫的可以匯出,富文字的則不行,就想利用Python批量儲存自己的部落格到本地。 二、程式碼 git地址 #!/bin/env python # -*- coding:utf-8 -*- # _au
關於利用word釋出文章到部落格
目前大部分的部落格作者在寫部落格這件事情上都會遇到以下3個痛點:1.所有部落格平臺關閉了文件釋出介面,使用者無法使用Word,Windows Live Writer等工具來發布部落格。2.釋出到部落格或公眾號平臺的圖片無法轉載。由於所有部落格平臺,公眾號平臺(如微信)開啟了圖片防盜鏈功能,作
在word上寫部落格直接發到CSDN
目前大部分的部落格作者在寫部落格這件事情上都會遇到以下3個痛點:1.所有部落格平臺關閉了文件釋出介面,使用者無法使用Word,Windows Live Writer等工具來發布部落格。2.釋出到部落格或公眾號平臺的圖片無法轉載。由於所有部落格平臺,公眾號平臺(如微信)開啟了圖片防盜鏈功能,作
利用Word來發布部落格到部落格園(onenote類似)
目前大部分的部落格作者在用Word寫部落格這件事情上都會遇到以下3個痛點: 1.所有部落格平臺關閉了文件釋出介面,使用者無法使用Word,Windows Live Writer等工具來發布部落格。使用Word寫部落格需要在第三方部落格平臺註冊帳號,且需要第三方部落格平臺提供API介面。目前的有的部落格平臺均已
基於 Hexo + GitHub Pages 搭建個人部落格
參考 markdown一些語法 1、 --- title: Hello Blog --- 2、連結[CSDN](https://blog.csdn.net/owenfy) 3、大小標題 ## Quick Start ### Create a new post 4、中間
使用Hexo + GitHub Pages 搭建個人部落格
一.前言 之前是在CSDN上寫部落格的,但是無奈其廣告滿天飛,還有因為個人不太喜歡CSDN部落格裡的一些東西,加上看到很多技術大牛都有自己的個人部落格,於是乎!便想著搭建一個自己的個人部落格。其實之前寫部落格還是追求於有很多人來看,以滿足自己這樣的一個慾望,後來慢慢覺得寫部落格無非是記錄一下自己成長的歷
學以致用——轉載CSDN上的部落格
前言 對於喜歡逛CSDN的人來說,看別人的部落格確實能夠對自己有不小的提高,有時候看到特別好的部落格想轉載下載,但是不能一個字一個字的敲了,這時候我們就想快速轉載別人的部落格,把別人的部落格移到
github pages-02-設定部落格-jekyll主題(靜態)
一、設定部落格主題 點選setting進入設定 下拉到GitHub Pages, (1)我的部落格地址為:https://yyhlum.github.io/ (2)點選 Choose a theme 選擇一個jekyll主題作為個人部落格主題 &nbs
在github上寫部落格
在github上混了幾個月,收穫頗多。作為一個開源的堅定信仰者,深深覺得每一個碼農都應該參與到開源社群中,github提供了一個平臺,讓你為開源專案提交程式碼變得異常簡單和直接。以前由於工作異常繁忙和繁雜,雖然看了很多開源的程式碼,從中受益頗多,卻為之貢獻很少,現在醒悟,幾分後悔,但願以後這種情況能夠反轉。說
搭建個人部落格之 Github + hexo: 如何在其他電腦上更新部落格
歡迎點選參觀我的 ——> 個人學習網站 首先將原來電腦上的Hexo目錄下的這幾個檔案複製到新電腦的新建Hexo目錄下 _config.yml package.json
Mac平臺打造github上hexo部落格全過程
簡介 人玩部落格有三個階段,一是在平臺寫,但是寫著寫著就會發現限制太多。比如前些年,你寫個關於goagent的文章就會稽核不過.部落格流量來了,你想掛個廣告之類的也不行。本人是受實名制的影響,在寫部落格上有顧忌。第二個階段是自己購買域名和vps自己搭建後臺,使
Github pages+jekyll寫部落格+域名繫結
安裝jekyll 安裝jekyll前先按照依賴包bundler,下述命令即可安裝 $ gem install bundler 之後,直接可以通過下述命令安裝jekyll $ gem install jekyll 直到出現下面資訊,則安裝成功了。
接上篇部落格:TabHost
正文 TabHost的實現分為兩種,一個是不繼承TabActivity,一個是繼承自TabActivity;當然了選用繼承自TabActivity的話就相對容易一些,下面來看看分別是怎樣來實現的吧。 方法一、定義tabhost:不用繼承TabActivity 1
轉載:在github.io上釋出部落格
文章:在github.io上寫部落格;因為版本問題,文章有修改... 可以在github pages上建立你自己的部落格。那就從github pages的官網開始吧。 按照官網的步驟來吧 1. 首先‘Create a repository’,這裡直接把官網的圖截過來
使用Jekyll + GitHub Pages搭建個人部落格
前言 一直就想搭建一個屬於自己的部落格網站,但是一直拖著沒有執行,在一次偶然的機會看到了鴻洋大神的 如何利用github打造部落格專屬域名,就心血來潮,馬上自己動手做了一個,耗時了近一個星期,終於差不多完成了,特意記錄下來,供他人蔘考。 本部落格同步釋出於