使用GitHub搭建我的博客

時間 2019-11-19

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

原文原文鏈接

博客已經從博客園慢慢搬到GitHub 上，可能在博客園上顯示不是很規整，能夠移步到另外的一個上面看 Blog

兩邊博客同時更新。歡迎各位star 和 follower

搭建過程

在搭建博客時候也踩了很多坑，以前寫博客在博客園上面寫的，無奈博客園的界面太……，本身本來寫了過一個博客系統可是也部署在了阿里雲的服務器上面，可是後期沒有續費就GG了。在後面看各路大佬在Github上搭建博客，本身也學着搭建了一個，在這過程當中也是踩了很多的坑。其中仍是要謝謝幾位博主的，我也是根據幾位博主的博客本身一點點的搭建起來的。html

廢話少說咱們下面就開始搭建博客git

咱們的博客系統是基於Jekyll開源的，部署GitHub上面。這樣咱們能夠省去搭建服務器的過程。github

轉載修改自 BYBlog 感謝這位同窗。由於他的博客少走了不少彎路web

展現效果

首先咱們看下博客的展現效果瀏覽器

網頁版本的展現效果緩存

手機版本展現效果服務器

開始進入搭建的過程

註冊GitHub帳號markdown

咱們搭建博客的方式是Github Pages + jekyll 的方式。app

咱們註冊一個GitHub 帳號dom

若是你不知道GitHub，那你就應該先google下GitHub。而後在本身註冊下登錄下在Starr Fock 下項目體驗下

拉取博客模版

在GitHub 上搜索下個人博客系統 wsccoder.github.io 進入到個人倉庫

點擊這裏

點擊右上角的 Fork 將這個倉庫 Fork到你本身的帳號下面。等一會以後在刷新你的GitHub界面，你就會發現這個倉庫已經在你的GitHub帳號下面了

Star 和 Fork的區別在於star的項目對其進行修改以後不能將其推到源倉庫中，而Fork能夠進行推送。推送以後源倉庫的做者能夠進行審覈，而後將你的代碼整合到源倉庫中

修改倉庫名

點擊setting 進入修改

將這個倉庫的名稱修改成 你的Github帳號名.github.io，而後 Rename保存

而後在瀏覽器界面輸入 你的Github帳號名.github.io 就會顯示下面的界面

下面你已經離成功不遠了，如今你的博客已經完成初步了。後續的配置可使你的博客更加的豐富

咱們看下整個網站的結構

 
  ├── _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
├── _data
|   └── members.yml
├── _site
├── img
└── index.html 
 

這裏面的內容較多，要是想深刻的瞭解的話google下文檔。咱們在基本配置的時候只須要記住下面幾個就好了

_config.yml 全局配置文件 //咱們配置的主要地方
_posts 放置博客文章的文件夾
img 存放圖片的文件夾

修改配置

在大家的項目根目錄上面找到_config.yml 這個文件而後對其進行修改基本配置，咱們博客的全部全局配置都在這個配置文件中修改

而後點擊修改

那麼如今咱們就進入配置裏面對基本的配置進行修改

基礎配置分爲幾部分

基礎設置
側邊欄
社交帳號

下面咱們將對其分別進行配置和講解

基礎設置

 
  # Site settings title: You Blog #博客的標題 SEOTitle: 你的博客 | You Blog  #顯示在瀏覽器上搜索的時候顯示的標題 header-img: img/post-bg-rwd.jpg #顯示在首頁的背景圖片 email: You@gmail.com description: "You Blog"  #網站介紹 keyword: "wsc, wsccoder Blog, 王守昌的博客, Java, Go, iPhone, mac pro, book" url: "https://qiubaiying.github.io" # 這個就是填寫你的博客地址 baseurl: "" # 目前不用填寫  
 

**側邊欄**

 
  # Sidebar settings sidebar: true # 是否開啓側邊欄. sidebar-about-description: "說點裝逼的話。。。" sidebar-avatar:/img/avatar-by.JPG # 你的我的頭像 這裏你能夠改爲我在img文件夾中的兩張備用照片 img/avatar-m 或 avatar-g  
 

社交帳號

能夠點擊這個社交帳號的圖標跳轉到你的社交網站的我的中心

下面是填寫社交帳號的用戶名，沒有能夠不用填寫

 
  # SNS settings
RSS: false
weibo_username:     username
zhihu_username:     username
github_username:    username
facebook_username:  username
jianshu_username:	jianshu_id 
 

評論系統

我以前使用的是根據前博主的 Disqus 評論系統，可是博主說了這個評論系統會被牆因此咱們只着重的介紹另外的以惡搞評論系統 Gitalk 評論系統

具體配置評論系統能夠參考另一個博主的博客爲博客添加 Gitalk 評論插件

網站統計

由於咱們這個博客系統是沒有本身的訪問統計的，因此咱們須要本身進行配置訪問統計而後借用第三方平臺進行統計

咱們可使用 Baidu Analytics 和 Google Analytics 拿到在這兩個網站註冊的時候獲取的track_id 進入到咱們的配置文件中進行替換

由於我沒有使用百度的，因此將百度的給註釋掉了。切記要更換 track_id 不然的話你的網站的反問記錄會記錄在個人後臺中（尷尬😅）

要是目前不想統計能夠直接都給註釋掉

 
  # Analytics settings # Baidu Analytics ba_track_id: 83e259f69b37d02a4633a2b7d960139c # Google Analytics ga_track_id: 'UA-90855596-1' # Format: UA-xxxxxx-xx ga_domain: auto  
 

咱們如今能夠看下Google Analytics後臺的界面是什麼樣的

好友

 
  # Friends friends: [ { title: "Tuya", href: "http://tuya.com" },{ title: "cctv", href: "http://www.cctv.com" },{ title: "Apple", href: "https://apple.com" },{ title: "Apple Developer", href: "https://developer.apple.com/" } ]  
 

保存

各位大哥切記要保存啊，提交啊。要否則我們配置的都沒有用了。。

過幾十秒而後刷新下你的主頁

鐺鐺鐺。恭喜你你的我的博客搭建完成啦。

寫文章

在這裏寫文章的話就不像通常的博客網站你在後臺編寫或者在本身的文本編輯器上面寫讓後複製到後臺編輯器裏面。咱們這裏須要本身建立文件而後將你的日誌文件push到你GitHub上面。

建立文章

咱們建立的文章都保存在這個文件夾得下面。

每次咱們要建立發表新文章的時候止須要在這個文件夾下面建立一個新的md的文件就ok了

咱們在GItHub的界面上建立一個文章

而後在編輯這個文章

以後點擊保存，估計過個十幾秒，你再刷新你的博客首頁就能看見你發佈的新文章了。

格式

每一篇文章文件命名採用的是2017-02-04-Hello-2017.md時間+標題的形式，空格用-替換鏈接。

文件的格式是 .md 的 MarkDown 文件。

咱們的博客文章格式採用是 MarkDown+ YAML 的方式。

YAML 就是咱們配置 _config文件用的語言。

MarkDown 是一種輕量級的「標記語言」，很簡單。花半個小時看一下就能熟練使用了

大概就是這麼一個結構。

 
  ---
layout:     post   				    # 使用的佈局（不須要改）
title:      My First Post 				# 標題 
subtitle:   Hello World, Hello Blog #副標題
date:       2017-02-06 				# 時間
author:     BY 						# 做者
header-img: img/post-bg-2015.jpg 	#這篇文章標題背景圖片
catalog: true 						# 是否歸檔
tags:								#標籤
    - 生活
---

## Hey
>  這是一遍博客

 哈哈哈哈哈  博客完成了 
 

按格式建立文章後，提交保存。進入你的博客主頁，新的文章將會出如今你的主頁上.

到這裏，恭喜你！）。

到這裏的話，一個博客的所有是大功告成了。

首頁標籤

在首頁能夠看到這些特點標籤，當你的文章出現相同標籤（默認相同的標籤數量大於1），纔會自動生成。

因此當你只放一篇文章的時候是不會出現標籤的。

建站的初期，博客比較少，若你想直接在首頁生成比較多的標籤。你能夠在 _congfig.yml中找到這段：

 
  # Featured Tags
featured-tags: true                     # 是否使用首頁標籤
featured-condition-size: 1              # 相同標籤數量大於這個數，纔會出如今首頁 
 

將其修改成featured-condition-size: 0, 這樣只有一個標籤時也會出如今首頁了。

相反，當你博客比較多，標籤也不少時，這時你就須要改回 1 甚至是 2 了。

——————————— 後面部分是徹底將前博主的文章轉載過來了————————————

自定義域名

搭建好博客以後你可能不想直接使用 baiyingqiu.github.io 這麼長的博客域名吧, 想換成想 qiubaiying.top 這樣簡短的域名。那咱們開始吧！

購買域名

首先，你必須購買一個本身的域名。

我是在阿里雲購買的域名

用阿里雲 app也能夠註冊域名，域名的價格根據後綴的不一樣和域名的長度而分，好比我這個 qiubaiying.top 的域名第一年才只要4元~

域名儘可能選擇短一點比較好記住，注意，不能選擇中文域名，好比 張三.top ,GitHub Pages 沒法處理中文域名，會致使你的域名在你的主頁上使用。

註冊的步驟就不在介紹了

解析域名

註冊好域名後，須要將域名解析到你的博客上

管理控制檯 → 域名與網站（萬網） → 域名

選擇你註冊好的域名，點擊解析

添加解析

分別添加兩個A 記錄類型,

一個主機記錄爲 www,表明能夠解析 www.qiubaiying.top的域名

另外一個爲 @, 表明 qiubaiying.top

記錄值就是咱們博客的IP地址，是 GitHub Pagas 在美國的服務器的地址 151.101.100.133

能夠經過這個網站或者直接在終端輸入ping 你的地址，查看博客的IP

ping qiubaiying.github.io

細心地你會發現全部人的博客都解析到 151.101.100.133 這個IP。

而後 GitHub Pages 再經過 CNAME記錄跳轉到你的主頁上。

修改CNAME

最後一步，只須要修改咱們github倉庫下的 CNAME 文件。

選擇 CNAME 文件

使用的註冊的域名進行替換,而後提交保存

這時，輸入你本身的域名，就能夠解析到你的主頁了。

大功告成！

進階

若你對博客模板進行修改，你就要看看 Jekyll 的開發文檔,是中文文檔哦，對英語通常的朋友簡直是福利啊（好比說我😀）。

還要學習 Git 和 GitHub 的工做機制了及使用。

你能夠先看看這個git教程，對git有個初步的瞭解後，那麼相信你就能將本身圖片傳到GitHub倉庫上，或者能夠說掌握了使用git管理本身的GitHub倉庫的技能呢。

對於輕車熟路的程序猿來講，這篇教程就算就結束了，由於下面的內容對於大家來講 so eazy~

但相信不少小白都一臉懵逼，那咱們繼續👇。

利用GithHub Desktop管理GitHub倉庫

GithHub Desktop 是 GithHub 推出的一款管理GitHub倉庫的桌面軟件，換句話說就是將你在Github上的文件同步到本地電腦上，並將修改後的文件同步到Github遠程倉庫。

下載

點擊圖片進入下載頁面，選擇對應的平臺進行下載

下面以Mac平臺爲例：

安裝

將下載好的文件解壓，將這隻小貓拖到應用程序文件夾中

就能夠在Launchpad找到這隻小貓咪~

登陸

點開應用,會彈出登陸框，

輸入你的GitHub帳號和密碼進行登陸

登陸後關閉窗口

而後返回引導窗，一直按 Continue 繼續

Continue

仍是Continue~

進入主界面，先右鍵Remve 刪除這個用戶指導，賊煩~

克隆倉庫

選擇你的倉庫克隆到本地

管理倉庫

如今文件夾中打開

打開後你會的發現文件結構和你在Github上的如出一轍~

你最早關心的多是你的頭像~在img文件夾中把替換個人頭像就行了。

不只是圖片，全部在Github上的的操做均可以進行。

保存修改

當你對倉庫文件夾的文件下進行修改、添加或刪除時，均可以在 GitHub Desktop 中看到

例如我在 img 中添加了一張圖片 avatar-demo.png 添加了一張圖片

就能夠在看到GitHub Desktop顯示了個人修改

保存修改只要按 Commit to master，而後能夠寫上你的修改說明

同步

將修改同步到 GitHub 遠程倉庫上只須要一步：點擊右上角的同步按鈕

完成

打開你的GitHub上的倉庫，你就能夠看到已經和本地同步了

能夠看到你提交的詳情： add img

這樣，你已經能輕鬆管理本身的博客了。

想上傳頭像，背景，或者是刪掉你不要的圖片（個人頭像😏）已是 so eazy了吧~

注意

你在 GitHub 網站上進行 Commit 操做後，須要在GitHub Desktop上按一下同步按鍵才能同步網站上的修改到你的本地。

修改我的介紹

修改我的介紹須要修改根目錄下的 about.html 文件

看不懂 HTML 標籤？不要緊，對照着修改就行了~ 還有注意這個有中英介紹

常見問題

最近有不少人給我提問題，我這邊總結一下

配置文件修改後沒有效果

刷新幾遍瀏覽器就行了~

不行的話，先清除瀏覽器緩存再試試。

404錯誤

檢查你的倉庫名是否有按照要求填寫
肯定 Fork 的是否是個人倉庫~

修改CNAME文件，域名仍是不變

清除瀏覽器緩存就OK~

其餘問題

直接在評論中提出來或私信我，我會一一替你們解決的😀

其餘

最近有人往個人遠程倉庫不停的 push，一天連收幾十封郵件！例如像這樣的

緣由大可能是直接Clone了個人倉庫到本地，沒有刪除個人遠程倉庫地址，添加完本身的倉庫地址後，一口氣推送到全部遠程倉庫（包括個人😂）~

打擾了個人工做和生活~

因此，請不要往個人倉庫上推送分支！

我發現一個問題是，不少人每次修改博客的內容都commit一次到遠程倉庫，而後再查看修改結果，這樣效率很是低！

來，上車！

在本地調試博客

注：下面的操做是在 Mac 終端進行的。 Windows 環境下的配置請參考 @夢幻之雲提供的這篇文章。

有心的同窗在 jekyll官網就會發現 jekyll 的提供的實例代碼。

 
  ~ $ gem install jekyll bundler
~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~/my-awesome-site $ bundle install
~/my-awesome-site $ bundle exec jekyll serve
# => 打開瀏覽器 http://localhost:4000 
 

這段命令建立了一個默認的 jekll 網站，而後在本機的 4000 窗口展現。聰明的你應該發現怎麼作了吧~

安裝 jekyll和 jekyll bundler

 
  $ gem install jekyll
$ gem install jekyll bundler

進入你的 Blog 所在目錄，而後建立本地服務器

$ jekyll s

而後會顯示

 
  Auto-regeneration: enabled for '/Users/baiying/Blog'
Configuration file: /Users/baiying/Blog/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop. 
 

你就能夠在 http://127.0.0.1:4000/ 看到你的博客，你對本地博客的修改都會在這個地址進行顯示，這大大提升了對博客的配置效率。

使用ctrl+c就能夠中止 serve

Star

若本教程順利幫你搭建了本身的我的博客，請不要害羞，給個人 github倉庫點個 star 吧！

由於最近發現 Fork 將近破百，加上直接 Clone 倉庫的，保守估計已經幫助上百人成功的搭建了本身的博客，~~但是 Star 卻僅僅只有 12！可能仍是作的不夠好吧！~~如今已經破百了，感謝你們的Star！

別無他求，點個 Star 吧！

心滿意足！

補充

修改網站的 icon

要修改如圖所示的網站 icon：

在博客 img 目錄下找到並替換 favicon.ico 這個圖標便可，圖標尺寸爲32x32。

修改主頁的座右銘

最近有很多小夥伴私信我：如何修改主頁的座右銘？

就是這個：

很簡單，找到博客目錄下的 index.html 文件，修改這句話就能夠了。

如何在博客文章中上插入圖片

博客的文章用的是 MarkDown 格式，若是沒用過 MarkDown 真的強烈推薦花半個小時學習一下。

MarkDown 中添加圖片的形式是 :![](圖片的URL)

例如：

![MarkDown示例圖片](//upload-images.jianshu.io/upload_images/2178672-eb2effd6b942a500.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)就會顯示下面這張圖片

https://ws3.sinaimg.cn/large/006tNc79gy1fj9xhjzobbj30yg0my75z.jpg就是這張圖片的URL，咱們能夠在瀏覽器輸入這個URL找到或下載這張圖片。

因此，要在 MacDown 中插入圖片，這張圖片就須要上傳到圖牀（網上），而後在引用這張圖片的URL。

將圖片上傳到圖牀

Mac 上的圖牀神器：iPic

直接在App Store上下載，誰用誰知道！

使用方法很簡單，直接拖動圖片到 P 圖標上，或者選中圖片按快捷鍵 ⌘+U，就能請示上傳。

上傳成功就能直接粘貼圖片的URL。

用 iPic 上傳圖片後，獲取URL插入文章中就能夠了。