背景
大四理工科學(xué)生,精力旺摩疑、時(shí)間多周伦。覺得有一個(gè)自己的空間,寫點(diǎn)自己感興趣的東西這事挺酷的未荒。
我為什么要搭建個(gè)人博客
博客是一個(gè)很酷的產(chǎn)品专挪。雖然博客輝煌的年代已經(jīng)過去,但我認(rèn)為在這個(gè)后博客時(shí)代的博文會(huì)更純粹也更精髓片排。
我要搭建一個(gè)怎么樣的博客
- 免費(fèi)
莫名其妙的原因寨腔,就是不想買域名,買空間率寡。
- 獨(dú)立
獨(dú)立的才是自己的迫卢。
- 簡潔
內(nèi)容是博客的靈魂,所以博客界面必須足夠簡潔冶共。我想搭建的博客看不到胡里花哨的東西乾蛤,能讓人只專注到內(nèi)容上面。這也是我不用新浪博客捅僵、網(wǎng)易博客等現(xiàn)成博客的原因之一家卖。
怎樣去實(shí)現(xiàn)它
在知乎上面瞎逛的時(shí)候,碰巧看到這樣一個(gè)回答庙楚。你見過最棒的個(gè)人博客是什么上荡?溫柔的回答。
剛好滿足我對個(gè)人博客的一些幻想馒闷。所以確定了用GitHub+Hexo+Next主題的思路酪捡。
正題
以上是背景叁征,接下來進(jìn)入正題。
準(zhǔn)備:配置開發(fā)環(huán)境
依次下載安裝:
怎樣打開Git逛薇?
- 開始界面點(diǎn)擊Git Bash
- 進(jìn)入目標(biāo)文件夾鼠標(biāo)右鍵打開Git Bash
推薦使用第二種方法捺疼。
一. 注冊訪問Github
Github為廣大開發(fā)者提供了一個(gè)非常好的平臺(tái),不僅是代碼的開源永罚,同時(shí)Github還提供了開發(fā)者可以在Github上建立自己的站點(diǎn)啤呼。這個(gè)功能的局限是只能創(chuàng)建靜態(tài)的網(wǎng)站。
注冊完成后尤蛮,需要驗(yàn)證郵箱媳友。我第一次平時(shí)用的163郵箱,不過沒有收到驗(yàn)證郵件产捞。發(fā)現(xiàn)很多同學(xué)都遇到跟我一樣的問題醇锚,換成QQ郵箱之后OK。
接下來:
- 新建Repository
-
頁面右上角坯临,新建Repository
新建repository.jpg -
創(chuàng)建yourname.github.io焊唬,打勾表示名稱可用
新建repository名稱.jpg
- 配置SSH-Key
- 檢查是否已經(jīng)有SSH Key:打開Git Bash
$cd ~/.ssh
如果說沒有這個(gè)目錄,就直接看第三步看靠。 - 備份
-
生成一個(gè)新的SSH赶促。
$ssh-keygen -t rsa -C "your e-mail"
之后直接回車,不用填寫東西挟炬。然后就生成一個(gè)目錄.ssh 鸥滨,里面有兩個(gè)文件:id_rsa , id_rsa.pub。
成功之后是這樣的:
SSH-Key成功結(jié)果.jpg - 把這個(gè)SSH放到github上:進(jìn)入account-setting 谤祖,把id_rsa.pub的內(nèi)容復(fù)制進(jìn)去就可以了婿滓。
二. Hexo
關(guān)于Hexo
- 快速,簡單而高效的靜態(tài)博客框架
Hexo初始化博客框架
1.安裝Hexo
$ npm install -g hexo-cli
2.初始化框架
$ hexo init <yourFolder>
$ cd <yourFolder>
$ npm install
初始化完成后粥喜,指定文件夾的目錄如下
.
├── _config.yml //網(wǎng)站的配置信息凸主,您可以在此配置大部分的參數(shù)。
├── package.json
├── scaffolds //模版文件夾额湘。當(dāng)您新建文章時(shí)卿吐,Hexo 會(huì)根據(jù) scaffold 來建立文件。
├── source //資源文件夾是存放用戶資源的地方锋华。
| ├── _drafts
| └── _posts
└── themes //主題文件夾嗡官。Hexo會(huì)根據(jù)主題來生成靜態(tài)頁面。
3.新建文章(創(chuàng)建一個(gè)hello world)
$ hexo new "Hello World"
會(huì)在/source/_post里添加hello-world.md文件供置,之后新建的文章都將存放在此目錄下谨湘。編輯hello-world.md文件可修改內(nèi)容。
4.生成網(wǎng)站
$ hexo generate
此時(shí)會(huì)將/source的.md文件生成到/public中芥丧,形成網(wǎng)站的靜態(tài)文件紧阔。
5.本地服務(wù)器
$ hexo server
輸入http://localhost:4000 即可查看網(wǎng)站。
可修改:
$ hexo server -p 3000
此時(shí)续担,輸入http://localhost:3000 查看網(wǎng)站擅耽。
6.部署網(wǎng)站
$ hexo deploy
部署網(wǎng)站之前需要生成靜態(tài)文件。
可以用$ hexo generate -d直接生成并部署物遇。此時(shí)需要在_config.yml中配置你所要部署的站點(diǎn):
-
到此為止完成網(wǎng)站的雛形乖仇。輸入yourname.github.io可訪問博客主頁。例如:http://moyatao.github.io/ 询兴。
繞坑:
部署的時(shí)候有可能會(huì)出錯(cuò)乃沙,別急,加這一步操作就ok了$ npm install hexo-deployer-git --save
在此感謝知友“溫柔”的幫助诗舰,這是他的博客:http://ursocute.github.io/
附:
三. Next主題
NexT 主旨在于簡潔優(yōu)雅且易于使用警儒,所以首先要盡量確保NexT的簡潔易用性。
這是一個(gè)擴(kuò)展主題眶根,由一個(gè)臺(tái)灣學(xué)生iissnan開發(fā)蜀铲。主題秉承精于心,簡于形的理念属百。
- 下載Next主題
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next - 啟用Next主題
下載完成后记劝,打開站點(diǎn)配置文件,找到theme字段族扰,并將其值更改為 next厌丑。
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next - 驗(yàn)證是否可用
運(yùn)行hexo s --debug,并訪問http://localhost:4000 渔呵,確保站點(diǎn)正確運(yùn)行怒竿。
附:
四. Markdown語法
Markdown 是一種「電子郵件」風(fēng)格的「標(biāo)記語言],Hexo支持Markdown厘肮。
打開之前生成的Hello World.md文件愧口,驚奇地發(fā)現(xiàn),就是用Markdown語法寫的类茂。
Markdown 編輯器
網(wǎng)上搜索一下耍属,網(wǎng)友推薦的Markdown編輯器很多,看個(gè)人選擇巩检。我對簡書這個(gè)產(chǎn)品比較有好感厚骗,用的是簡書的Markdown在編輯器。效果就是醬紫滴:
備注:
- 正在學(xué)習(xí)Markdown基礎(chǔ)語法兢哭,第二篇博客內(nèi)容就整理Markdown語法领舰。
附:
感悟
從想要搭建一個(gè)獨(dú)立免費(fèi)的個(gè)人博客開始,網(wǎng)上搜索各種資料。用過一個(gè)國外的傻瓜式軟件冲秽,生成的界面太粗糙舍咖,而且不穩(wěn)定。這點(diǎn)與我的初心不符直接放棄锉桑。
瞎逛了幾天之后排霉,終于確定了用本文的方法,然后開始摸索民轴。什么懂不懂的小白攻柠,用了三天時(shí)間,終于搭建了我的第一個(gè)個(gè)人博客Mr H's Blog后裸。過程中遇到了一些問題瑰钮,但我這人就喜歡和自己死磕到底。感謝網(wǎng)友的分享和熱情幫助微驶。