Github搭建个人博客（2019最新版,亲测）
版權(quán)聲明：本文為徐代龍?jiān)瓌?chuàng)文章，未經(jīng)徐代龍?jiān)试S不得轉(zhuǎn)載。 https://blog.csdn.net/xudailong_blog/article/details/78762262
敲黑板：如何寫(xiě)一個(gè)自己的小程序并上線(xiàn)
##（一）前言：
建議：慢慢看,也就這一篇用心了點(diǎn)寫(xiě)
說(shuō)來(lái)話(huà)長(zhǎng)，一把辛酸淚，可算是弄好了。
1 起因：在很早很早，大一的時(shí)候，估計(jì)快記不得日子了，那時(shí)候來(lái)到PC吧創(chuàng)業(yè)團(tuán)隊(duì)，一個(gè)大一級(jí)的學(xué)長(zhǎng)通過(guò)買(mǎi)源碼創(chuàng)建了一個(gè)社區(qū)論壇，因?yàn)槟菚r(shí)候的社區(qū)比較流行，學(xué)長(zhǎng)讓我們注冊(cè)個(gè)賬號(hào)，發(fā)個(gè)心情，然后加個(gè)積分，再升個(gè)等級(jí)，常來(lái)逛逛，呵呵，好滿(mǎn)足的感覺(jué)。從那以后，我就想著是否有一天我也可以做出讓身邊的小伙伴都來(lái)觀摩一下我的網(wǎng)站。
2 沒(méi)想到的是，這一想就想了9年之久，一干就干了快十年，這次終于可以很難勉勉強(qiáng)強(qiáng)的對(duì)學(xué)長(zhǎng)們說(shuō)：諾，歡迎來(lái)到我的博客小屋，如果你想了解我，那么請(qǐng)你翻到底吧，（kidding.gif）
逗比的話(huà)，就那么點(diǎn)，生活中的我也是很逗比，但是更是一個(gè)愛(ài)學(xué)向上的騷年，悶騷而不失態(tài)。
好吧，我要開(kāi)始干活了。
我的各大blog：
GitHub
碼云
http://xudailong.cc/
可能你們會(huì)想，寫(xiě)個(gè)博客就寫(xiě)個(gè)博客唄，為什么還裝這么低級(jí)的A，弄三個(gè)出來(lái)，老實(shí)回答你們吧，我?我也不想啊，
現(xiàn)在上幾張成果圖，呵呵，使用的輪子真高(滑稽.gif):
（二） 關(guān)于我的博客
（1）Home頁(yè)：
（2） 分類(lèi)與標(biāo)簽頁(yè)：
（3）單個(gè)文章的編輯日期，作者，分類(lèi)，標(biāo)簽，查看更多
（4）頂部Tab欄
（5）底部分頁(yè)，訪(fǎng)客量統(tǒng)計(jì)，回到頂部按鈕
（6）博客詳情頁(yè)
以上就是整個(gè)博客的頁(yè)面，其實(shí)這個(gè)博客也是后來(lái)發(fā)現(xiàn)的，一位比較低調(diào)的阿里前端哥哥擼出來(lái)的，且一直在維護(hù)中的Blog。
##（三） 其他博客類(lèi)型
類(lèi)型一：
類(lèi)型二：
類(lèi)型三：
類(lèi)型四：
類(lèi)型五：
暫且就這么多吧，類(lèi)型一是現(xiàn)在大多數(shù)ITer 常用的個(gè)人博客類(lèi)型，Hexo強(qiáng)力驅(qū)動(dòng)，雖然我到現(xiàn)在也不知道Hexo跟Jekyll有什么不同的區(qū)別
##（四）搭建博客辛酸shift
能成功搭建成這篇博客是根據(jù)類(lèi)型三：柏?zé)傻牟┛?/strong>進(jìn)行搭建的，但是又不是很喜歡那樣的界面，畢竟我這對(duì)前端能懂個(gè)屁的味道就很不錯(cuò)了，于是在博客三的基礎(chǔ)上進(jìn)行進(jìn)行博客五的Fork歷程，
可誰(shuí)知道博客五上傳的代碼不全，提供的搭建博客教程卻沒(méi)有，一臉懵逼臉，在這里我能說(shuō)博客五是在博客四的基礎(chǔ)上進(jìn)行個(gè)性化設(shè)置的嗎？博客四是位鵝哥哥，博客五我現(xiàn)在看來(lái)，實(shí)現(xiàn)的功能應(yīng)該不算多，可能是多了個(gè)網(wǎng)易音樂(lè)播放的位置吧，
當(dāng)時(shí)硬是不想使用柏?zé)傻牟┛?#xff0c;對(duì)TGOYO的博客有感覺(jué)些，于是，找啊找，找到了浩陽(yáng)貓哥哥的博客，離我也就5Km不到的廠(chǎng)子里面工作的路人。
于是：我索性跟著博客Fork下來(lái)進(jìn)行個(gè)人博客的修改
Github官網(wǎng)
在Github上搜索：xudailong.github.io 進(jìn)入到我的倉(cāng)庫(kù)中
可能你已經(jīng)進(jìn)入到了這個(gè)頁(yè)面，那么接下來(lái)我們要進(jìn)行的操作。
點(diǎn)擊紅色的Fork后，就可以變成我們自己的倉(cāng)庫(kù)了。
Fork成功后，就成我們自己的名下了，這時(shí)候，我們需要進(jìn)行博客的簡(jiǎn)單設(shè)置。
找到Settings點(diǎn)擊，進(jìn)行頁(yè)面的設(shè)置。
這里我們找到Rename下的前面的框內(nèi)的內(nèi)容，我們要改成與我們自己的github一樣的；用戶(hù)名，這里我已經(jīng)改過(guò)了，一定要記得用戶(hù)名與倉(cāng)庫(kù)名要一致，就是兩處畫(huà)紅線(xiàn)的地方。
當(dāng)rename完后，我們?cè)诋?dāng)前頁(yè)面往下拉，直到出現(xiàn)GitHub Pages：
這里有一句話(huà)：
Your site is published at https://643435675.github.io/
好了，現(xiàn)在就能正常的訪(fǎng)問(wèn)剛剛我們Fork過(guò)來(lái)的頁(yè)面，此時(shí)你的博客地址應(yīng)該是：xxx.github.io
xxx 是你的Github用戶(hù)名*
當(dāng)你在瀏覽器的新窗口輸入：xxx.github.io
此時(shí)能就能訪(fǎng)問(wèn)到你的博客了，但是你的博客里面依舊顯示是我的博客內(nèi)容，所以，接下來(lái)，我們進(jìn)行博客的修改。
（五） 將博客修改成自己的博客
（1）先說(shuō)個(gè)概念，現(xiàn)在的github個(gè)人搭建博客方式有兩種，
一種是：
GitHub Pages + Hexo 的方式
另外一種是：
GitHub Pages + jekyll 的方式
我采用的搭建博客的方式是第二種：
使用GitHub Pages +jekyll的方式。
我們現(xiàn)在用Git工具將整個(gè)項(xiàng)目Git clone下來(lái)，可以看一下現(xiàn)在的目錄結(jié)構(gòu)：
這里進(jìn)行一下各個(gè)文件（夾）的用途
- _config.yml ：全局配置文件
- posts :放文章的文件夾
其他的文件夾是各頁(yè)面的HTML文件，你可以點(diǎn)進(jìn)去看看，嘗試改變一下
其中：_config.yml 文件中：
# Welcome to Jekyll! # # This config file is meant for settings that affect your whole blog, values # which you are expected to set up once and rarely need to edit after that. # For technical reasons, this file is *NOT* reloaded automatically when you use # 'jekyll serve'. If you change this file, please restart the server process.# Site settings title: 徐代龍的技術(shù)專(zhuān)欄 brief-intro: Android and Python Coder baseurl: "" # the subpath of your site, e.g. /blog url: "https://643435675.github.io" # the base hostname & protocol for your sitepermalink: /:year/:month/:day/:title/# other links twitter_username: #gaohaoyang126 facebook_username: #gaohaoyang.water github_username: 643435675 email: 643435675@QQ.com weibo_username: 3115521wh zhihu_username: hll643435675 linkedIn_username: gaohaoyang dribbble_username:description_footer: 來(lái)自徐代龍的個(gè)人專(zhuān)欄！# comments # two ways to comment, only choose one, and use your own short name # 兩種評(píng)論插件，選一個(gè)就好了，使用自己的 short_name duoshuo_shortname: #hygblog disqus_shortname: #gaohaoyang# statistic analysis 統(tǒng)計(jì)代碼 # 百度統(tǒng)計(jì) id，將統(tǒng)計(jì)代碼替換為自己的百度統(tǒng)計(jì)id，即 # hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; # xxxxx字符串 baidu_tongji_id: 1cc1fc4b4b456bf7c99ce80aec5bf009 google_analytics_id: UA-72449510-4 # google 分析追蹤id# Build settings markdown: kramdownkramdown:input: GFMsyntax_highlighter: rouge# port # port: 1234# url category_dir: category/ tag_dir: tag/# excerpt excerpt_separator: "\n\n\n\n"# paginate plugins: [jekyll-paginate] paginate: 6 port: 4001你可以一邊修改一邊進(jìn)行調(diào)試，
# paginate plugins: [jekyll-paginate] paginate: 6 port: 4001paginate中paginate的6為每頁(yè)顯示6篇文章，port：4001 是jekyll啟動(dòng)端口號(hào)，
# statistic analysis 統(tǒng)計(jì)代碼 # 百度統(tǒng)計(jì) id，將統(tǒng)計(jì)代碼替換為自己的百度統(tǒng)計(jì)id，即 # hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; # xxxxx字符串 baidu_tongji_id: 1cc1fc4b4b456bf7c99ce80aec5bf009 google_analytics_id: UA-72449510-4 # google 分析追蹤id這里進(jìn)行了百度統(tǒng)計(jì)與谷歌統(tǒng)計(jì)，只要替換一下統(tǒng)計(jì)id就可以成為你自己的id了。
（2）使用Jekyll修改靜態(tài)博客
請(qǐng)?jiān)敿?xì)跟這篇教程走:
Jekyll 搭建靜態(tài)博客
請(qǐng)務(wù)必走完，因?yàn)樯厦孢@博客講的很清楚，很詳細(xì)，環(huán)境搭建好，剩下的就簡(jiǎn)單了。
我再簡(jiǎn)明一下步驟：
一 ：安裝Ruby
二 ：安裝RubyGems
三：用RubyGems安裝Jekyll
四：cd到博客文件夾，開(kāi)啟服務(wù)器
五：訪(fǎng)問(wèn) http://localhost:4000/
六：提交代碼到遠(yuǎn)程GitHub上
我按照上面的教程走完，大概步驟是這樣子的：
spencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master) $ gem install jekyll Successfully installed jekyll-3.6.2 Parsing documentation for jekyll-3.6.2 Done installing documentation for jekyll after 2 seconds 1 gem installedspencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master) $ jekyll s Configuration file: F:/myself/643435675.github.io/_config.ymlSource: F:/myself/643435675.github.ioDestination: F:/myself/643435675.github.io/_siteIncremental build: disabled. Enable with --incrementalGenerating...done in 5.499 seconds.Please add the following to your Gemfile to avoid polling for changes:gem 'wdm', '>= 0.1.0' if Gem.win_platform?Auto-regeneration: enabled for 'F:/myself/643435675.github.io'Server address: http://127.0.0.1:4001/Server running... press ctrl-c to stop.spencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master) $ jekyll serve Configuration file: F:/myself/643435675.github.io/_config.ymlSource: F:/myself/643435675.github.ioDestination: F:/myself/643435675.github.io/_siteIncremental build: disabled. Enable with --incrementalGenerating...done in 2.859 seconds.Please add the following to your Gemfile to avoid polling for changes:gem 'wdm', '>= 0.1.0' if Gem.win_platform?Auto-regeneration: enabled for 'F:/myself/643435675.github.io'Server address: http://127.0.0.1:4001/Server running... press ctrl-c to stop.
最后是提交到github上面：
可以參照這一篇文章：
git 提交代碼到github上
博客搭建參考：
（一）浩陽(yáng)神：https://gaohaoyang.github.io/（特別感謝浩陽(yáng)哥哥，雖然你離我只有五公里遠(yuǎn)）
（二）Devin喲神：http://www.jianshu.com/p/f389ad8c49bd
（三）BYQiu神:http://www.jianshu.com/p/e68fba58f75c
最后博客就這樣子搭建完了，至于域名解析的話(huà)，還有把博客搭建在碼云上，這里可以自己去摸索。
（3）域名解析的情況：
（三）BYQiu神:http://www.jianshu.com/p/e68fba58f75c
這篇只是說(shuō)對(duì)了部分，理應(yīng)域名解析是不把值直接用github的服務(wù)器地址值進(jìn)行設(shè)置的，因?yàn)槲疫@里面試過(guò)了，他有可能會(huì)變，在公司跟在自己的電腦ping的是不一樣的地址，有的情況可能會(huì)遇到域名解析失敗的情況，這里一定要先實(shí)名認(rèn)證了，然后再做其他操作才不會(huì)出現(xiàn)域名解析失敗的情況 ，當(dāng)然你可以看一下這篇文章，可能會(huì)稍微懂一些：
注冊(cè)局設(shè)置暫停解析（serverHold）
下面就寫(xiě)完了，這對(duì)于很小白的我都可以做出來(lái)，如果你想弄一個(gè)的話(huà)，你覺(jué)著你行不行呢？
（o(￣︶￣)o）
ad time
歡迎關(guān)注「蛇崽網(wǎng)盤(pán)教程資源」公眾號(hào) ，在微信后臺(tái)回復(fù)「領(lǐng)取資源」，獲取IT資源200G干貨大全。
在微信后臺(tái)回復(fù)「130個(gè)小程序」，即可免費(fèi)領(lǐng)取享有導(dǎo)入就能跑的微信小程序
在微信后臺(tái)回復(fù)「Flutter移動(dòng)電商」，即可免費(fèi)領(lǐng)取Flutter移動(dòng)電商系列全套
總結(jié)
以上是生活随笔為你收集整理的Github搭建个人博客（2019最新版,亲测）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 爬虫之获取各大网站热搜并实现语音播报
- 下一篇： 科目三考试经验与技巧——长春长德科目三考