相信很多盆友們都想搭建屬于自己的博客,但是想要擁有自己獨立的服務(wù)器和域名還是蠻麻煩的,既要進(jìn)行網(wǎng)站備案(還不一定能通過)還要自己搞網(wǎng)頁的樣式等等。 有了gihub就可以輕松搭建自己的博客。
gihub+hexo搭建博客的原理大致是這樣的: hexo生成本地靜態(tài)博客文件,在git的時候?qū)⑽募馕龀伸o態(tài)網(wǎng)頁, 通過hexo與自己的gihub相關(guān)聯(lián),將自己的靜態(tài)博客git到自己的gihub中。通過gihub就可以輕松的查看自己的博客。下面就讓我們詳細(xì)的了解下搭建的步驟:
一:準(zhǔn)備工作
安裝node node的官方網(wǎng)址為:http://nodejs.cn/download/
安裝git git的官方網(wǎng)址:https://git-scm.com/downloads
將node和git下載下來 無腦下一步即可實現(xiàn)安裝
測試電腦中node和git是否安裝成功在控制臺輸入以下命令:
git –version
node -v
npm -v
二:創(chuàng)建gihub page博客
在自己的gihub創(chuàng)建一個以自己賬戶名相同的 repository 創(chuàng)建完畢點擊setting 設(shè)置page的樣式 并且發(fā)布
此時我們得到了一個默認(rèn)的gihub博客頁面(圖片就不出啦,點擊自己的gihub網(wǎng)址就能看到)
三:下載安裝hexo
在命令行輸入
npm install hexo-cli -g
等待安裝成功 如果出現(xiàn)warn 可嘗試
sudo npm install -g hexo-cli
在user下新建一個名為MyBlog的文件(這里以MyBlog為例)利用命令行切換到剛才新建的MyBlog
cd ~/MyBlog
hexo init MyBlog
npm install
這時等待hexo初始化到MyBlog文件中
此時 ls 我們可以看到文件中有這樣的結(jié)構(gòu)
|– _config.yml
|– package.json
|– scaffolds
|– source
| |– _drafts
| |– _posts
|– themes
安裝hexo server 輸入以下命令:
sudo npm install hexo-server
hexo g
hexo server
可以看到下圖
將鏈接復(fù)制到Safari可以看到默認(rèn)的hexo主題頁面
四:Hexo與gihub相關(guān)聯(lián)
打開MyBlog文件夾 在主目錄中可以找到_config.yml文件 用文本編輯器打開,在文件的最底修改deploy ?repo換成自己博客的gihub倉庫地址
輸入命令行
npm install hexo-deployer-git –save
將生成靜態(tài)頁面并部署到github的倉庫中,執(zhí)行:
hexo g
hexo deploy
或者
hexo d -g
** INFO Deploy done: git 即上傳成功,這時就可以通過gihub倉庫 看到本地上傳的資源
五:Hexo的基本配置和Hexo主題樣式
hexo支持多種主題樣式,大家可以從https://hexo.io/themes/尋找自己喜歡的主題樣式
或者從這里找到自己心儀的主題https://www.zhihu.com/question/24422335
博主這里用到的是(litten/hexo-theme-yilia)的主題, 以此為例
控制臺切換到MyBlog文件夾下 輸入命令行安裝主題:
git clonehttps://github.com/litten/hexo-theme-yilia.gitthemes/yilia
安裝less,主題使用less作為css預(yù)處理工具:
npm install hexo-renderer-less –save
安裝feed生成RSS:
npm install hexo-generator-feed –save
安裝json-content,用于生成靜態(tài)站點數(shù)據(jù),提供搜索功能的數(shù)據(jù)源:
npm install hexo-generator-json-content –save
開啟標(biāo)簽頁:
hexo new page tags
修改MyBlog/source/tags/index.md的源數(shù)據(jù):
layout: tags
noDate: true
comments: false
—保存
修改MyBlog文件夾下(主目錄)_Config.yml文件 theme: yilia
——注意 修改_Config.yml 文件 :后面都必須有一個空格 不然會報錯!每個key后面都有一個空格然后再加value——
輸入命令行
hexo clean
hexo g
hexo deploy
將本地修改的文件 上傳到gihub上
也可以先 hexo server本地查看網(wǎng)站 確認(rèn)無誤后再上傳
六:需要注意的事
需要注意的事
1:修改_Config.yml 文件 :后面都必須有一個空格 不然會報錯(重要的事情說三遍)
2:發(fā)布到gihub發(fā)現(xiàn)自己的網(wǎng)頁樣式缺失? 這時候99%的原因是_config.yml 的url和root的路徑有問題
除了修改主目錄下的——config.yml文件 此外在themes文件夾下 你用到的 樣式里面的_config.yml 的root 和url也需要修改
[具體如圖](/Hellopcj/assets/blogimg/configroot.png)
這里面的url是你自己博客的地址 root是在自己項目gihub上存放網(wǎng)頁的目錄
如果還是改不好 可以在Safair調(diào)出控制臺 查看自己gihub網(wǎng)頁的具體結(jié)構(gòu)
調(diào)出Safari控制臺的步驟(在啟動Safari的基礎(chǔ)上) 點擊左側(cè)系統(tǒng)偏好設(shè)置>高級? 勾選最下方 在菜單欄中顯示“開發(fā)”菜單
回到Gihub blog頁面 右鍵鼠標(biāo)點擊 檢查元素 即可查看具體內(nèi)容