超級干貨系列 hexo+gihub搭建博客

相信很多盆友們都想搭建屬于自己的博客,但是想要擁有自己獨立的服務(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)容

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容