使用GitHubpages+hexo 搭建一個(gè)心儀的個(gè)人博客

(一)前言:

建議:慢慢看,也就這一篇用心了點(diǎn)寫

說來話長,一把辛酸淚,可算是弄好了。

1 起因:在很早很早,大一的時(shí)候,估計(jì)快記不得日子了,那時(shí)候來到PC吧創(chuàng)業(yè)團(tuán)隊(duì),一個(gè)大一級的學(xué)長通過買源碼創(chuàng)建了一個(gè)社區(qū)論壇,因?yàn)槟菚r(shí)候的社區(qū)比較流行,學(xué)長讓我們注冊個(gè)賬號,發(fā)個(gè)心情,然后加個(gè)積分,再升個(gè)等級,常來逛逛,呵呵,好滿足的感覺。從那以后,我就想著是否有一天我也可以做出讓身邊的小伙伴都來觀摩一下我的網(wǎng)站。


2 沒想到的是,這一想就想了9年之久,一干就干了快十年,這次終于可以很難勉勉強(qiáng)強(qiáng)的對學(xué)長們說:諾,歡迎來到我的博客小屋,如果你想了解我,那么請你翻到底吧,(kidding.gif)

逗比的話,就那么點(diǎn),生活中的我也是很逗比,但是更是一個(gè)愛學(xué)向上的騷年,悶騷而不失態(tài)。


好吧,我要開始干活了。

我的各大blog:

  1. 國外的Github地址:
    GitHub
  2. 國內(nèi)的GitHub地址:
    碼云
  3. 我的單純網(wǎng)站:
    http://xudailong.cc/

可能你們會(huì)想,寫個(gè)博客就寫個(gè)博客唄,為什么還裝這么低級的A,弄三個(gè)出來,老實(shí)回答你們吧,我我也不想啊,

  1. 我怕哪一天3.我的單純網(wǎng)站 掛了,因?yàn)?strong>3是用的阿里云買的域名,花錢的額,要是哪天我沒錢了,或者域名解析出錯(cuò), 那不就掛了嘛,畢竟我已經(jīng)掛掉一個(gè)域名了,現(xiàn)在還沒修好,我才用了一個(gè)禮拜沒出頭啊,蛋蛋的憂傷。
  2. 1.國外的GIthub地址,現(xiàn)在是因?yàn)樘斐L問速度可能更不上,可能網(wǎng)絡(luò)訪問速度慢些,但是,我依舊是很喜歡Github的,畢竟我感覺,里面有很多Object讓我happy,所以Github這個(gè)就不算是備胎,真正的備胎是:
  3. 2.國內(nèi)的Github地址:碼云 ,此碼云非彼馬云, 把它當(dāng)做備胎無非就一點(diǎn),國內(nèi)服務(wù)器,訪問網(wǎng)絡(luò)速度快一些,其他的,我也不知道,第一次知道。

現(xiàn)在上幾張成果圖,呵呵,使用的輪子真高(滑稽.gif):

(二) 關(guān)于我的博客

(1)Home頁:

Home頁面.png

(2) 分類與標(biāo)簽頁:

右邊的分類與標(biāo)簽頁.png

(3)單個(gè)文章的編輯日期,作者,分類,標(biāo)簽,查看更多

單個(gè)文章.png

(4)頂部Tab欄

頂部Tab.png

(5)底部分頁,訪客量統(tǒng)計(jì),回到頂部按鈕

底部內(nèi)容.png

(6)博客詳情頁

博客詳情頁.png

以上就是整個(gè)博客的頁面,其實(shí)這個(gè)博客也是后來發(fā)現(xiàn)的,一位比較低調(diào)的阿里前端哥哥擼出來的,且一直在維護(hù)中的Blog。

(三) 其他博客類型

類型一:

吳小龍的博客.png

類型二:

與佳期的博客.png

類型三:

柏?zé)傻牟┛?png

類型四:

Litten的博客.png

類型五:

TGOYO的博客.png

暫且就這么多吧,類型一是現(xiàn)在大多數(shù)ITer 常用的個(gè)人博客類型,Hexo強(qiáng)力驅(qū)動(dòng),雖然我到現(xiàn)在也不知道HexoJekyll有什么不同的區(qū)別

(四)搭建博客辛酸shift

  1. 前面的坑

能成功搭建成這篇博客是根據(jù)類型三:柏?zé)傻牟┛?/strong>進(jìn)行搭建的,但是又不是很喜歡那樣的界面,畢竟我這對前端能懂個(gè)屁的味道就很不錯(cuò)了,于是在博客三的基礎(chǔ)上進(jìn)行進(jìn)行博客五的Fork歷程,

可誰知道博客五上傳的代碼不全,提供的搭建博客教程卻沒有,一臉懵逼臉,在這里我能說博客五是在博客四的基礎(chǔ)上進(jìn)行個(gè)性化設(shè)置的嗎?博客四是位鵝哥哥,博客五我現(xiàn)在看來,實(shí)現(xiàn)的功能應(yīng)該不算多,可能是多了個(gè)網(wǎng)易音樂播放的位置吧,

當(dāng)時(shí)硬是不想使用柏?zé)傻牟┛?/code>,對TGOYO的博客有感覺些,于是,找啊找,找到了浩陽貓哥哥的博客,離我也就5Km不到的廠子里面工作的路人。

于是:我索性跟著博客Fork下來進(jìn)行個(gè)人博客的修改

  1. 路上的風(fēng)景
  1. 注冊一個(gè)Github賬號 or 碼云賬號

Github官網(wǎng)

  1. Fork(拉?。┪业牟┛湍0?br> 在Github上搜索:xudailong.github.io 進(jìn)入到我的倉庫中

可能你已經(jīng)進(jìn)入到了這個(gè)頁面,那么接下來我們要進(jìn)行的操作。

紅色的Fork.png

點(diǎn)擊紅色的Fork后,就可以變成我們自己的倉庫了。

Fork成功頁.png

Fork成功后,就成我們自己的名下了,這時(shí)候,我們需要進(jìn)行博客的簡單設(shè)置。

Settings位置.png

找到Settings點(diǎn)擊,進(jìn)行頁面的設(shè)置。

重新rename.png

這里我們找到Rename下的前面的框內(nèi)的內(nèi)容,我們要改成與我們自己的github一樣的;用戶名,這里我已經(jīng)改過了,一定要記得用戶名與倉庫名要一致,就是兩處畫紅線的地方。

當(dāng)rename完后,我們在當(dāng)前頁面往下拉,直到出現(xiàn)GitHub Pages

GitHub Pages頁面.png

這里有一句話:

Your site is published at https://643435675.github.io/

好了,現(xiàn)在就能正常的訪問剛剛我們Fork過來的頁面,此時(shí)你的博客地址應(yīng)該是:xxx.github.io
xxx 是你的Github用戶名*

當(dāng)你在瀏覽器的新窗口輸入:xxx.github.io
此時(shí)能就能訪問到你的博客了,但是你的博客里面依舊顯示是我的博客內(nèi)容,所以,接下來,我們進(jìn)行博客的修改。

(五) 將博客修改成自己的博客

(1)先說個(gè)概念,現(xiàn)在的github個(gè)人搭建博客方式有兩種,

一種是:
GitHub Pages + Hexo 的方式
另外一種是:
GitHub Pages + jekyll 的方式

我采用的搭建博客的方式是第二種:
使用GitHub Pages +jekyll的方式。

我們現(xiàn)在用Git工具將整個(gè)項(xiàng)目Git clone下來,可以看一下現(xiàn)在的目錄結(jié)構(gòu):

_config的設(shè)置.png

這里進(jìn)行一下各個(gè)文件(夾)的用途

  • _config.yml :全局配置文件
  • posts :放文章的文件夾

其他的文件夾是各頁面的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ù)專欄
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 site

permalink: /: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: 來自徐代龍的個(gè)人專欄!

# comments
# two ways to comment, only choose one, and use your own short name
# 兩種評論插件,選一個(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 = "http://#/hm.js?xxxxxxxxxxxx";
# xxxxx字符串
baidu_tongji_id: 1cc1fc4b4b456bf7c99ce80aec5bf009
google_analytics_id: UA-72449510-4 # google 分析追蹤id

# Build settings
markdown: kramdown

kramdown:
  input: GFM
  syntax_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: 4001

paginate中paginate的6為每頁顯示6篇文章,port:4001 是jekyll啟動(dòng)端口號,

# statistic analysis 統(tǒng)計(jì)代碼
# 百度統(tǒng)計(jì) id,將統(tǒng)計(jì)代碼替換為自己的百度統(tǒng)計(jì)id,即
# hm.src = "http://#/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)博客

請?jiān)敿?xì)跟這篇教程走:
Jekyll 搭建靜態(tài)博客

請務(wù)必走完,因?yàn)樯厦孢@博客講的很清楚,很詳細(xì),環(huán)境搭建好,剩下的就簡單了。

我再簡明一下步驟:
一 :安裝Ruby
二 :安裝RubyGems
三:用RubyGems安裝Jekyll
四:cd到博客文件夾,開啟服務(wù)器
五:訪問 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 installed

spencer@spencer-it1 MINGW64 /f/myself/643435675.github.io (master)
$ jekyll s
Configuration file: F:/myself/643435675.github.io/_config.yml
            Source: F:/myself/643435675.github.io
       Destination: F:/myself/643435675.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    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.yml
            Source: F:/myself/643435675.github.io
       Destination: F:/myself/643435675.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    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.

Git Bash操作.png

最后是提交到github上面:
可以參照這一篇文章:
git 提交代碼到github上

博客搭建參考:
(一)浩陽神:https://gaohaoyang.github.io/(特別感謝浩陽哥哥,雖然你離我只有五公里遠(yuǎn))
(二)Devin喲神:http://www.itdecent.cn/p/f389ad8c49bd
(三)BYQiu神:http://www.itdecent.cn/p/e68fba58f75c

最后博客就這樣子搭建完了,至于域名解析的話,還有把博客搭建在碼云上,這里可以自己去摸索。

(3)域名解析的情況:

(三)BYQiu神:http://www.itdecent.cn/p/e68fba58f75c
這篇只是說對了部分,理應(yīng)域名解析是不把值直接用github的服務(wù)器地址值進(jìn)行設(shè)置的,因?yàn)槲疫@里面試過了,他有可能會(huì)變,在公司跟在自己的電腦ping的是不一樣的地址,有的情況可能會(huì)遇到域名解析失敗的情況,這里一定要先實(shí)名認(rèn)證了,然后再做其他操作才不會(huì)出現(xiàn)域名解析失敗的情況 ,當(dāng)然你可以看一下這篇文章,可能會(huì)稍微懂一些:
注冊局設(shè)置暫停解析(serverHold)

下面就寫完了,這對于很小白的我都可以做出來,如果你想弄一個(gè)的話,你覺著你行不行呢?

(o( ̄︶ ̄)o)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容