在GitHub上快速搭建屬于自己的個人博客

創(chuàng)建 GitHub 賬號

有一個 GitHub 賬號可以跳過這步在孝，沒有的話去注冊一個。

1钟鸵、注冊的具體步驟如下：

進入 GitHub 官網(wǎng)：https://github.com/
點擊注冊按鈕：點擊右上角的 “Sign up” 或者下方的 “Sign up for Github”击孩。
輸入用戶名 “Username”、郵箱地址 “Email address”挟冠、密碼 “Passport”于购，再點擊下方的 “Create an account”。
個人計劃選擇 Free 免費 (Developer 開發(fā)商付費的知染，可以創(chuàng)建私有的倉庫)肋僧，再點繼續(xù) “Continue”。
接下來選擇您的個人計劃控淡，然后點擊提交 “Submit”嫌吠，或者也可以什么都不填寫選擇提交 “Summit” 或跳過 “skip this step”。
選擇 “skip this step” 后掺炭，需登錄你注冊時填寫郵箱辫诅，打開 GitHub 發(fā)的驗證郵件。
登錄郵箱后涧狮，發(fā)現(xiàn)沒有收到郵件炕矮，需進入電子郵箱配置么夫，進行重新發(fā)送。
在郵箱中點擊 “Verify email address“ 后肤视，即跳轉到 GitHub 登錄頁面档痪，輸入用戶名和密碼即可完成注冊---成功登錄。

2邢滑、如需 GitHub 注冊賬號圖解腐螟，參考文章如下：

最新GitHub賬號注冊（詳細圖解）
如何注冊Github賬戶

3、配置 SSH key

為什么要配置這個呢困后？

因為你提交代碼肯定要擁有你的 GitHub 權限才可以乐纸，但是直接使用用戶名和密碼太不安全了，所以我們使用 SSH key 來解決本地和服務器的連接問題摇予。

cd ~/.ssh  # 檢查本機已存在的ssh密鑰

如果提示：no such file or directory汽绢，說明你沒有配置 SSH key。

ssh-keygen -t rsa -C "Email Address" # abc@126.com

然后連續(xù)3次回車趾盐，最終會生成一個文件在用戶目錄下庶喜，打開用戶目錄，找到.ssh\id_rsa.pub文件救鲤，記事本打開并復制里面的內容久窟，打開你的 GitHub 主頁，進入個人設置 -> SSH and GPG keys -> New SSH key：

將復制的內容粘貼到 Key 的內容輸入框中本缠，Title 隨便填斥扛，然后保存。

在終端輸入如下命令丹锹，測試是否成功稀颁。

ssh -T git@github.com # 注意郵箱地址不用改

如果提示 Are you sure you want to continue connecting (yes/no)?，輸入 yes楣黍，然后會看到：

Hi dgynfi! You've successfully authenticated, but GitHub does not provide shell access.

看到這個信息說明 SSH 已配置成功匾灶！

此時你還需要配置：

git config --global user.name "dnynfi" # 你的 github 用戶名，非昵稱
git config --global user.email "xxx@163.com" #填寫你的 github 注冊郵箱

搭建 GitHub 博客

創(chuàng)建倉庫

新建一個名為你的用戶名.github.io的倉庫租漂，比如說阶女，如果你的 github 用戶名是 test，那么你就新建test.github.io的倉庫（必須是你的用戶名哩治，其它名稱無效）秃踩，將來你的網(wǎng)站訪問地址就是 https://test.github.io 了，是不是很方便业筏？

由此可見憔杨，每一個 github 賬戶最多只能創(chuàng)建一個這樣可以直接使用域名訪問的倉庫。

幾個注意的地方：

注冊的郵箱一定要驗證蒜胖，否則不會成功消别；
倉庫名字必須是：username.github.io抛蚤，其中username是你的用戶名；
倉庫創(chuàng)建成功不會立即生效妖啥，需要過一段時間霉颠；

創(chuàng)建成功后对碌，以后你的網(wǎng)站所有代碼都是放在這個倉庫里啦荆虱。

搭建網(wǎng)站

對于小白來說，搭建一個個人博客網(wǎng)站還是有些困難的朽们。最直接便捷的方式就是 fork 和 clone 自己喜歡的網(wǎng)站模板怀读。

接下來介紹一下我的博客，預覽如下圖骑脱，然后分四部分進行說明菜枷。

Hansen's Blog

開始
各組成部分
評論與 Google/Baidu Analytics
- 評論
- 網(wǎng)站分析
高級部分

環(huán)境要求

如果你安裝了 jekyll ，那你只需要在命令行輸入jekyll serve就能在本地瀏覽器預覽主題叁丧。你還可以輸入jekyll serve --watch啤誊，這樣可以邊修改邊自動運行修改后的文件。

經(jīng) @BrucZhaoR 的測試拥娄，好像兩個命令都是可以自動運行修改后的文件的蚊锹，刷新后可以實時預覽。官方文件是建議安裝 bundler 稚瘾，這樣你在本地的效果就跟在 github 上面是一樣的牡昆。詳情請見這里：https://help.github.com/articles/using-jekyll-with-pages/#installing-jekyll

開始

你可以通用修改_config.yml文件來輕松的開始搭建自己的博客:

# Site settings
title: Hansen's Blog                # 你的博客網(wǎng)站標題
SEOTitle: Hansen's Blog | 漢生的博客  # 在后面會詳細談到
description: "Hansen's Blog"        # 隨便說點，描述一下

# SNS settings      
github_username: dgynfi           # 你的github賬號
weibo_username: u/2617525300      # 你的微博賬號摊欠，底部鏈接會自動更新的丢烘。

# Build settings
# paginate: 10                    # 一頁你準備放幾篇文章

Jekyll 官方網(wǎng)站還有很多的參數(shù)可以調，比如設置文章的鏈接形式...些椒，網(wǎng)址在這里：Jekyll - Official Site播瞳，中文版的在這里：Jekyll中文。

寫一篇博文

要發(fā)表的文章一般以md/markdown的格式放在這里_posts/免糕，你只要看看這篇模板里的文章你就立刻明白該如何設置赢乓。

yaml 頭文件長這樣:

---
layout:     post
title:      "Hello 2015"
subtitle:   "Hello World, Hello Blog"
date:       2015-01-29 12:00:00
author:     "dyf"
header-img: "images/post-bg-distance.jpg"
tags: Life
---

側邊欄

長這樣:

blog-sidebar.png

設置是在_config.yml文件里面的Sidebar settings那塊。

# Sidebar settings
sidebar: true  # 添加側邊欄
sidebar-about-description: "簡單的描述一下你自己"
sidebar-avatar: /images/avatar.jpg # 你的大頭貼说墨，請使用絕對地址.

側邊欄是響應式布局的骏全，當屏幕尺寸小于992px的時候入宦，側邊欄就會移動到底部饥脑。具體請見 bootstrap 柵格系統(tǒng) https://v3.bootcss.com/css/

關于我

Mini-About-Me 這個模塊將在你的頭像下面净捅，展示你所有的社交賬號寻行。
這個也是響應式布局纽甘，當屏幕變小時候，會將其移動到頁面底部娃弓，只不過會稍微有點小變化雾狈，具體請看代碼。

標簽云

看到這個網(wǎng)站 Medium 的標簽云非常的炫酷母怜，所有我在將他加了進來余耽。這個模塊現(xiàn)在是獨立的，可以呈現(xiàn)在所有頁面苹熏，包括主頁和發(fā)表的每一篇文章標題的頭上碟贾。

# Featured Tags
featured-tags: true
featured-condition-size: 1     # A tag will be featured if the size of it is more than this condition value

唯一需要注意的是featured-condition-size: A tag will be featured if the size of it is more than this condition value.

內部有一個條件模板{% if tag[1].size > {{site.featured-condition-size}} %} 是用來做篩選過濾的.

好友鏈接

好友鏈接部分。這會在全部頁面顯示轨域。

設置是在_config.yml文件里面的Friends那塊袱耽，自己加吧。

# Friends
friends: [
    {
        title: "Foo Blog",
        href: "http://foo.github.io/"
    },
    {
        title: "Bar Blog",
        href: "http://bar.github.io"
    }
]

HTML5演示文檔布局

HTML5 幻燈片的排版：

這部分是用于占用 html 格式的幻燈片的干发，一般用到的是 Reveal.js, Impress.js, Slides, Prezi 等等朱巨。我認為一個現(xiàn)代化的博客怎么能少了放 html 幻燈的功能呢~

其主要原理是添加一個 iframe，在里面加入外部鏈接枉长。你可以直接寫到頭文件里面去冀续，詳情請見下面的 yaml 頭文件的寫法。

---
layout: keynote
iframe: "http://hansenteng.com/js-module-7day/"
---

iframe 在不同的設備中必峰，將會自動的調整大小洪唐。保留內邊距是為了讓手機用戶可以向下滑動，以及添加更多的內容自点。

disqus 國際比較流行桂敛，界面也很大氣功炮、簡介，如果有人評論术唬，還能實時通知薪伏，直接回復通知的郵件就行了。缺點是評論必須要去注冊一個 disqus 賬號粗仓，分享一般只有 Facebook 和 Twitter 嫁怀，另外在墻內加載速度略慢了一點。想要知道長啥樣借浊，可以看以前的版本點這里最下面就可以看到塘淑。

多說國內主流社交軟件都有分享按鈕，登陸方便蚂斤，比較好管理存捺，就是界面丑了一點。當然你是可以自定義界面的 css 的，詳情請看多說開發(fā)者文檔捌治。

首先岗钩，你需要去注冊一個賬號，不管是 disqus 還是多說的肖油。不要直接使用我的凹嫦拧！

其次森枪，你只需要在下面的 yaml 頭文件中設置一下就可以了视搏。

duoshuo_username: _你的用戶名_
# 或者
disqus_username: _你的用戶名_

最后多說是支持分享的，如果你不想分享疲恢，請這樣設置：duoshuo_share: false凶朗。你可以同時使用兩個評論系統(tǒng)，不過個人感覺怪怪的显拳。

網(wǎng)站分析

網(wǎng)站分析，現(xiàn)在支持百度統(tǒng)計和 Google Analytics 搓萧。需要去官方網(wǎng)站注冊一下杂数，然后將返回的 code 貼在下面：

# Baidu Analytics
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900

# Google Analytics
ga_track_id: 'UA-49627206-1'  # Format: UA-xxxxxx-xx
ga_domain: hansenteng.com

自定義

如果你喜歡折騰，你可以去自定義我的這個模板的 code 瘸洛，Grunt 的環(huán)境已經(jīng)搭好了揍移。（非常感謝 Clean Blog 這個模板）

There are a number of tasks it performs like minification of the JavaScript, compiling of the LESS files, adding banners to keep the Apache 2.0 license intact, and watching for changes. Run the grunt default task by entering grunt into your command line which will build the files. You can use grunt watch if you are working on the JavaScript or the LESS.

Try to understand code in _include/ and _layouts/, then you can modify Jekyll Liquid template directly to do more creative customization.

標題底圖

標題底圖是可以自己選的，看看幾篇示例 post 你就知道如何設置了反肋，詳情請見：【_posts】那伐。

標題底圖的選取完全是看個人的審美了，我也幫不了你石蔗。每一篇文章可以有不同的底圖罕邀，你想放什么就放什么，最后寬度要夠养距，大小不要太大诉探，否則加載慢啊。

但是需要注意的是本模板的標題是白色的棍厌，所以背景色要設置為灰色或者黑色肾胯，總之深色系就對了。

搜索展示標題

我的博客標題是 “Hansen's Blog”耘纱，但是我想要在搜索的時候顯示 “Hansen's Blog | 漢生的博客” 敬肚，這個就需要 SEO Title 來定義了。

其實這個 SEO Title 就是定義了<head><title>標題</title></head>束析，這個里面的東西和多說分享的標題艳馒，你可以自行修改的。

綁定域名

當然畸陡，你不綁定域名肯定也是可以的鹰溜，就用默認的 xxx.github.io 來訪問虽填，如果你想更個性一點，想擁有一個屬于自己的域名曹动，那也是 OK 的斋日。

首先你要注冊一個域名，域名注冊以前總是推薦去godaddy墓陈，其實現(xiàn)在覺得國內的阿里云和騰訊云等也挺不錯的恶守，價格也不貴，畢竟都是大公司贡必，放心兔港！

綁定域名分2種情況：帶 www 和不帶 www 的。

域名配置最常見有2種方式仔拟，CNAME 和 A 記錄衫樊，CNAME 填寫域名，A 記錄填寫 IP利花，由于不帶 www 方式只能采用 A 記錄科侈，所以必須先 ping 一下你的用戶名.github.io的 IP，然后到你的域名 DNS 設置頁炒事，將 A 記錄指向你 ping 出來的 IP臀栈，將 CNAME 指向你的用戶名.github.io，這樣可以保證無論是否添加 www 都可以訪問挠乳，如下：

然后到你的 github 項目根目錄新建一個名為 CNAME 的文件（無后綴）权薯，里面填寫你的域名，加不加 www 看你自己喜好睡扬，因為經(jīng)測試：

如果你填寫的是沒有 www 的盟蚣，比如 mygit.me，那么無論是訪問 http://www.mygit.me 還是 http://mygit.me 威蕉，都會自動跳轉到 http://mygit.me
如果你填寫的是帶 www 的刁俭，比如 www.mygit.me，那么無論是訪問 http://www.mygit.me 還是 http://mygit.me 韧涨，都會自動跳轉到 http://www.mygit.me
如果你填寫的是其它子域名牍戚，比如 abc.mygit.me，那么訪問 http://abc.mygit.me 沒問題虑粥，但是訪問 http://mygit.me 如孝，不會自動跳轉到 http://abc.mygit.me

另外說一句，在你綁定了新域名之后娩贷，原來的你的用戶名.github.io并沒有失效第晰，而是會自動跳轉到你的新域名。

喜歡折騰的同學，參考文章如下：

使用hexo+github搭建免費個人博客詳細教程
基于github搭建自己的個人博客
使用Github搭建屬于自己的博客

最后

附上項目博客和倉庫地址茁瘦，覺得還行呢品抽，麻煩順手給個star。對在 GitHub 上搭建個人博客網(wǎng)站感興趣的小伙伴甜熔，希望能夠幫助到你圆恤。

博客地址【https://dgynfi.github.io】
倉庫地址【https://github.com/dgynfi/dgynfi.github.io】

點贊+關注，第一時間獲取技術干貨和最新知識點腔稀，謝謝你的支持盆昙！

最后祝大家生活愉快~