使用github pages搭建個人博客


一、環境准備

使用Github Pages搭建個人博客,一勞永逸,可以讓我們更加專注於博客的撰寫。博客的更新是通過將新建或改動的博客放在指定文件夾並推送到遠程Github倉庫來完成的,所以我們本地需要有Git環境,如果還沒有安裝Git,可以看下面的文章:

  1. 安裝Git
  2. Git關聯遠程GitHub倉庫

二、搭建博客

1、新建倉庫

username.github.io作為倉庫名字。

2、本地克隆

本地創建文件夾,用於存放遠程倉庫,打開所創建的文件夾,右鍵選擇git bash here,表示在當前目錄打開git bash程序,然后執行如下命令,將剛才創建的倉庫克隆到本地:

git clone https://github.com/AmazingChen/amazingchen.github.io.git

如果步驟1中創建倉庫時,沒有勾選Initialize this repository with a README,將有如下提示:

warning,可以忽略,或手動在遠程倉庫創建一個readme.md,然后重新clone

3、新建主頁

在倉庫文件夾下創建index.html

<!DOCTYPE html>
<html>
	<head>

	</head>
	<body>
	<p>hello, my first page!</p>
	</body>
</html

4、推送到遠程倉庫

在倉庫文件夾下,右鍵選擇git bash here,然后執行命令:

git add --all
git commit -m "add index.html"
git push origin master

5、驗證

成功push到遠程倉庫后,訪問 username.github.io,看到如下界面,就表示成功通過Github Pages搭建了個人的博客。

三、更換主題

上面裸奔的博客主頁,跟原始人類一樣,你一定不滿意,我們穿越幾千年文明,直接站在巨人的肩膀上,選一套主題吧。

Github Pages基於Jekyll構建,Jekyll 可以幫助我們把純文本轉換為靜態博客網站,實現一勞永逸。

你可以在JekyllThemes找到喜歡的主題,也可以在其他地方找。

"I want you, Vno-Jekyll." 我選擇Vno。

1、下載主題

下載后,首先將我們倉庫文件夾下的文件清空,但是要保留.git文件夾:

然后將下載的主題壓縮包解壓到倉庫文件夾下,結果如下:

訪問 Jekyll-目錄結構 詳細了解每個文件夾的功能:

.
├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _site
├── .jekyll-metadata
└── index.html

2、搭建Jekyll環境

只有主題文件是不夠的,我們需要搭建Jekyll環境,通過遵循Jekyll的規范,讓Jekyll幫助我們生成靜態網站。

(1) 安裝Ruby:Ruby安裝教程

(2)打開CMD,執行命令安裝Jekyll:

gem install jekyll

(3)進入倉庫文件夾,執行命令:

bundle install

注意,必須進入倉庫文件夾下再執行上述命令,否則會有如下提示,表示bundle找不到gemfile文件:

Rails 3中引入Bundle來管理項目中的所有Gem依賴,該命令只能在一個含有Gemfile的目錄下執行,bundle install 命令將嘗試更新系統中已存在的gem包。更多參考:bundle install 命令

(4)啟動Jekyll服務

bundle exec jekyll serve

啟動Jekyll服務時,可能會遇到如下錯誤:

  Conversion error: Jekyll::Converters::Scss encountered an error
  while converting 'css/main.scss':
                    Invalid GBK character "\xE2" on line 10
jekyll 3.4.0 | Error:  Invalid GBK character "\xE2" on line 10

很明顯,是編碼問題,參考網上方法解決 Invalid GBK character "\xE2" 過程中的發現,找到D:\RailsInstaller\Ruby2.3.3\lib\ruby\gems\2.3.0\gems\sass-3.7.2\lib\sass.rb文件,在require后追加:

Encoding.default_external = Encoding.find('utf-8')

然后重新啟動Jekyll服務,看到如下打印,表示啟動成功:

(5)驗證

訪問 http://127.0.0.1:4000,當你發現你的博客首頁從一個原始人變成光鮮亮麗的現代人時,表示博客主題已經應用成功了。

(6)推送到遠程倉庫

做完上述操作后,由於還沒有將修改提交到遠程倉庫,所以當你訪問username.github.io時,你看到的還是一個光溜溜的原始人,執行以下命令完成進化吧皮卡丘:

git add .
git commit -m "apply theme"
git push origin master


成功推送到遠程倉庫后,等待幾分鍾,訪問username.github.io,OK,成功。天黑請閉眼,有問題請留言。

四、發布博客

在倉庫文件夾下,進入_posts目錄,所有的文章都必須放在_posts文件夾下,訪問 Jekyll-目錄結構 詳細了解每個文件夾的功能。

以markdown文檔為例,按照如下格式創建md文件。

yyyy-MM-dd-filename.md


完成后push到遠程倉庫,即可完成更新。

五、修改主題

將網站的信息改成自己的,修改_config.yml文件:

# Basic
title: 陳賢靖
subtitle: 井與陸地,海和島嶼。
description: Android Developer.
creator: <a href="http://onev.cat">@onevcat</a>

url: "https://amazingchen.github.io/#blog"

permalink: /:year/:month/:title/

# Format
highlighter: rouge

# supported colors: blue, green, purple, red, orange or slate. If you need clear, leave it empty.
# cover_color: red

# The blog button should not be removed.
blog_button:
    title: Blog
    description: Visit blog

# Navigation buttons in the front page.
nav:
    - {title: Projects, description: My Projects, url: 'https://github.com/AmazingChen/VHabit'}
    # - {title: Another Button, description: A button, url: 'http://example.com'}

# Pagination
plugins: [jekyll-paginate]
paginate: 10
paginate_path: "page/:num/"

# Comment
comment:
    disqus: vno-jekyll
    # duoshuo: 
    
# Social
social:
    github: AmazingChen
    mail: shixianjingla@gmail.com

# Google Analytics
ga:
    # id: your_ga_id
    # host: your_host


如果你對這套主題不太滿意,並且具備web基礎,可以動手修改。

如果不想博客數據被人輕易獲取,建議將github倉庫設置為私有。

修改之后,我的博客長這樣:陳賢靖

完。


免責聲明!

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



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