原文鏈接: http://fighting300.com...
其實(shí)很久以前就搭建完博客的基礎(chǔ)部分赏迟,只是懶癌發(fā)作,遲遲沒有補(bǔ)上文章來總結(jié),但是記錄自己的心得還是必要的血当。下面描述下搭建博客的整個(gè)流程和一些問題的解決方案。搭建博客其實(shí)有很多種框架禀忆,比如可能大家熟悉的WordPress臊旭、Hexo等,這里我們將使用很火很流程的Hexo來作為博客基礎(chǔ)框架箩退。
Hexo是一個(gè)快速离熏、簡(jiǎn)潔且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章戴涝,在幾秒內(nèi)滋戳,即可利用靚麗的主題生成靜態(tài)網(wǎng)頁(yè)。
搭建博客的大體流程主要分為:GitHub配置
啥刻、Hexo管理
奸鸯、域名綁定
三個(gè)步驟,非常簡(jiǎn)單可帽。
GitHub配置
首先需要在GitHub上注冊(cè)一個(gè)賬號(hào)(當(dāng)然估計(jì)你們都有了)娄涩。然后創(chuàng)建一個(gè)倉(cāng)庫(kù),命名為xxx.github.io
映跟,xxx會(huì)是你注冊(cè)時(shí)的用戶名蓄拣,所以注冊(cè)賬號(hào)時(shí)認(rèn)真想個(gè)不錯(cuò)的名字吧扬虚,因?yàn)檫@個(gè)地址會(huì)是你的域名(假如你不單獨(dú)申請(qǐng)域名的話)。
Hexo管理
環(huán)境安裝
在進(jìn)行下一步前球恤,你需要在你的Mac上安裝好git(沒安裝過的辜昵,直接去官網(wǎng)找吧,順便面壁思過下)和Node.js咽斧。
Node安裝的最佳方式是使用nvm路鹰,這是Node.js的版本管理器,安裝方式很簡(jiǎn)單收厨。
// 1. Homebrew 安裝方式晋柱,此安裝方式無(wú)需重啟
$ brew install nvm
$ mkdir ~/.nvm
$ export NVM_DIR=~/.nvm
$ . $(brew --prefix nvm)/nvm.sh
// 2. curl安裝
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
安裝完nvm后,執(zhí)行以下命令即可安裝Node诵叁。
$ nvm install stable
Hexo安裝:
$ sudo npm install -g hexo-cli
所有的工具已經(jīng)安裝完成雁竞,下面可以創(chuàng)建博客內(nèi)容,并上傳到我們的github倉(cāng)庫(kù)了拧额。
創(chuàng)建博客
接下來需要用Hexo初始化博客碑诉,并更改設(shè)置,來發(fā)布內(nèi)容到之前創(chuàng)建的GitHub倉(cāng)庫(kù)侥锦。
初始化博客
安裝 Hexo 完成后執(zhí)行下列命令进栽,Hexo將會(huì)在指定文件夾中新建博客所需要的文件。
$ hexo init xxx.github.io
$ cd xxx.github.io
$ npm install
初始化后恭垦,你的文件夾里會(huì)有這些內(nèi)容:
.
├── _config.yml #配置文件
├── package.json #數(shù)據(jù)
├── scaffolds #草稿
├── source #網(wǎng)站內(nèi)容
| ├── _drafts #草稿
| └── _posts #文章
└── themes #主題
更新配置
當(dāng)然我們自己的博客快毛,要選擇好看的主題。Hexo比較好的一點(diǎn)是現(xiàn)在有很多免費(fèi)的主題可以使用番挺,只需要把主題文件文件拷貝到你的/themes目錄下唠帝,做簡(jiǎn)單配置就可以使用該主題了。
知乎上有一篇文章羅列了一些不錯(cuò)的主題玄柏,大家可以參考下襟衰。這里我們使用了極簡(jiǎn)的NexT這款非常火爆常見的主題粪摘。
$ cd xxx.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
之后你需要在xxx.github.io/_config.yml
中配置博客名瀑晒、語(yǔ)言、作者等基礎(chǔ)配置如下(鍵值之間需要有空白)徘意,可配置的選項(xiàng)可以參考Hexo配置苔悦。
title: DragonFly的博客
subtitle: 我曾七次鄙視自己的靈魂
description: iOS開發(fā)、ReactNative開發(fā)映砖、AR
author: DragonFly
language: zh-Hans
......
theme: next // 之前下載的主題名稱
這兒需要重點(diǎn)注意的是要配置博客提交的github地址间坐。
deploy:
type: git //使用Git 發(fā)布
repo: https://github.com/xxx/xxx.github.io.git // 剛創(chuàng)建的Github倉(cāng)庫(kù)
另外主題的配置文件也需要做一些修改啦吧,相應(yīng)的文件目錄為xxx.github.io/themes/next/_config.yml
杜恰,可配置的選項(xiàng)可以參考NexT主題配置。
新建一篇文章
所有基礎(chǔ)框架已經(jīng)創(chuàng)建完成稍走,接下來你可以開始寫第一篇博客了地技,hexo的命令也很簡(jiǎn)單蜈七,使用兩次就記住了。
$ hexo new "My-New-Post" // 這兒是你的文章標(biāo)題莫矗,創(chuàng)建后可以在文檔中修改
更多細(xì)節(jié)可以參考: Writing
啟用本地服務(wù)
寫完文章后飒硅,可以在本地啟用服務(wù),來看你的成果作谚。在瀏覽器中輸入https://localhost:4000
即可訪問你的博客主目錄三娩。
$ hexo server //hexo s
發(fā)布內(nèi)容
測(cè)試沒問題后,我們就可以生成靜態(tài)網(wǎng)頁(yè)文件并發(fā)布到GitHub Pages上了妹懒。
生成靜態(tài)文件的命令:
$ hexo generate //hexo g
發(fā)布的命令:
$ hexo deploy //hexo d
以上命令可以簡(jiǎn)寫為hexo g -d
雀监,這樣你的博客已經(jīng)上傳到GitHub了。此時(shí)你可以在瀏覽器里輸入fighting300.github.io來訪問你的博客眨唬。
另外第一次使用時(shí)会前,你需要在終端配置Github的郵箱和密碼。
域名綁定
或許你對(duì)你的github域名不滿意匾竿,想要使用自己獨(dú)立的域名瓦宜。那么你可以在阿里云旗下的萬(wàn)網(wǎng)購(gòu)買域名(如http://fighting300.com
),購(gòu)買之后進(jìn)行實(shí)名認(rèn)證岭妖。
創(chuàng)建CNAME文件
為了綁定域名临庇,首先需要在source文件夾下創(chuàng)建一個(gè)CNAME文件,文件內(nèi)容為你要設(shè)置的域名(如fighting300.com)昵慌,這樣將你的域名指向了Github服務(wù)器苔巨。用Hexo命令deploy后,幾分鐘后生效废离,你會(huì)看到你的倉(cāng)庫(kù)下GitHub Pages的信息已經(jīng)發(fā)生變化侄泽。
添加DNS解析
阿里云其實(shí)有自帶的DNS解析服務(wù),但是有小伙伴反饋他的DNS解析服務(wù)會(huì)有問題(目前使用過程中暫未發(fā)現(xiàn))蜻韭,可以切換為DNSPod的解析服務(wù)悼尾。兩種DNS的解析配置都很簡(jiǎn)單,只需要添加對(duì)應(yīng)的IP地址到你的域名配置中即可肖方。該IP地址使用ping fighting300.github.io
來獲取到闺魏。
完成上述步驟后,需要等一段時(shí)間上述配置才會(huì)生效俯画,最后你的博客已經(jīng)搭建完成析桥,你可以開啟你的博客之旅了。
本文將持續(xù)記錄一些hexo使用方法和常見錯(cuò)誤的解決方式,如果喜歡泡仗,請(qǐng)持續(xù)關(guān)注本博客埋虹。