使用github pages搭建我的博客

時間 2019-11-17

標籤使用 github pages 搭建我的博客欄目 Git 简体版

原文原文鏈接

1、環境準備css

使用Github Pages搭建我的博客，一勞永逸，可讓咱們更加專一於博客的撰寫。博客的更新是經過將新建或改動的博客放在指定文件夾並推送到遠程Github倉庫來完成的，因此咱們本地須要有Git環境，若是尚未安裝Git，能夠看下面的文章：html

2、搭建博客git

一、新建倉庫github

以username.github.io做爲倉庫名字。web

二、本地克隆sass

本地建立文件夾，用於存放遠程倉庫，打開所建立的文件夾，右鍵選擇git bash here，表示在當前目錄打開git bash程序，而後執行以下命令，將剛纔建立的倉庫克隆到本地：ruby

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

若是步驟1中建立倉庫時，沒有勾選Initialize this repository with a README，將有以下提示：markdown

warning，能夠忽略，或手動在遠程倉庫建立一個readme.md，而後從新clone。app

三、新建主頁

在倉庫文件夾下建立index.html：

<!DOCTYPE html>
<html>
    <head>

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

四、推送到遠程倉庫

在倉庫文件夾下，右鍵選擇git bash here，而後執行命令：

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

五、驗證

成功push到遠程倉庫後，訪問 username.github.io，看到以下界面，就表示成功經過Github Pages搭建了我的的博客。

3、更換主題

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

Github Pages基於Jekyll構建，Jekyll 能夠幫助咱們把純文本轉換爲靜態博客網站，實現一勞永逸。

你能夠在JekyllThemes找到喜歡的主題，也能夠在其餘地方找。

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

一、下載主題

下載後，首先將咱們倉庫文件夾下的文件清空，可是要保留.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

二、搭建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，成功。天黑請閉眼，有問題請留言。

4、發佈博客

在倉庫文件夾下，進入_posts目錄，全部的文章都必須放在_posts文件夾下，訪問 Jekyll-目錄結構詳細瞭解每一個文件夾的功能。

以markdown文檔爲例，按照以下格式建立md文件。

yyyy-MM-dd-filename.md

完成後push到遠程倉庫，便可完成更新。

5、修改主題

將網站的信息改爲本身的，修改_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倉庫設置爲私有。

修改以後，個人博客長這樣：陳賢靖

完。