今天參考的是大神的教程,學了一個新東西,但是可能由於原教程中運用的npm包與我當前使用的npm包版本不同的原因,有出過多處運行錯誤,但都在此教程中解決了;
總結了下命令:
npm install hexo -g 全局安裝
hexo -v 查看當前版本
hexo init 初始化
hexo install 安裝組件
hexo g 生成加載頁面
hexo s 開啟服務 http://localhost:4000/
npm install --save hexo-deployer-git 部署git
hexo d 部署 hexo
前言
本次我會逐步演示如何在Github上搭建自己的靜態博客,先看看我之前已經搭建好的博客效果:https://zouchanglin.github.io很多東西呢只是正對自己喜歡的風格來選擇的,比如博客的風格,我自己比較喜歡Next主題的風格,Github上的項目地址是:https://github.com/iissnan/hexo-theme-next ,大家也可以根據自己喜歡的風格自行選擇!
工具
markdown編輯器
由於我們寫博客是需要使用markdown的語法的,一款好用的markdown文件編輯器必不可少,這個也是任憑大家自己選擇,我個人比較喜歡使用Atom,這是一款跨平台的文本編輯器,用了一段時間感覺還不錯。markdown語法很簡單,在后面我會做一些簡單的介紹。我也是最近才開始使用markdown來寫博客,我以前是習慣在CSDN上寫博客的,什么插入圖片、插入代碼、插入音樂、插入視頻…之類的問題通通不用擔心,這些坑我都踩過了,現在總結一下經驗而已。Atom的下載地址:https://atom.io/ 安裝過程很簡單在此不贅述!
Git工具
這個不用說,提交代碼必備,直接使用它的命令行工具就很OK,說到命令行大家也不用擔心,常用的就那么幾個,Git的下載地址:https://git-scm.com/download/win 安裝過程很簡單在此不贅述,安裝完成后鼠標右鍵菜單就會多出兩個選項:Git GUI Here 、Git Bash Here,其中Git Bash Here就可以在當前目錄下打開Git的命令行!
Node.js
Node.js是一個Javascript運行環境,是一個基於Chrome JavaScript運行時建立的平台, 用於方便地搭建響應速度快、易於擴展的網絡應用。Node.js 使用事件驅動, 非阻塞I/O 模型而得以輕量和高效,非常適合在分布式設備上運行數據密集型的實時應用。hexo正是需要這個環境,所以安裝安裝Node.js是必不可少的,下載鏈接:http://nodejs.cn/download/ 安裝過程也是非常簡單,不在贅述!
注意:上面Git工具和Node.js環境是必須安裝的,Atom只是一個方便於我們編輯md文件的工具,可以先不安裝!
上述工具安裝完成后,打開Windows的命令行,分別輸入3個命令看看是否安裝完成:
node -v 、npm -v 、git –version 出現版本號即說明安裝完成!
Hexo
Hexo簡介
hexo是個什么東西呢?總的來說就是把你的markdown文件轉化為HTML靜態頁面的一種東西,瀏覽器是不會直接解析markdown文件的,所以我們需要把自己寫的markdown文件先轉化為HTML靜態頁面才能被瀏覽器解析,這個過程就需要Hexo來幫我們完成。更多內容請參考:http://coderunthings.com/2017/08/20/howhexoworks/ 這篇文章說的很詳細!
安裝過程
首先我們將本地的博客push到遠程倉庫中,本地博客得先有個存放位置,於是我們現在本地新建一個文件夾,名稱隨意(但是最好不要帶中文和空格,對於一個程序員來講,路徑中包含中文或者空格簡直是血的教訓…),我就在A盤下新建一個名稱為hexo的文件夾
然后進入到剛剛新建的文件夾,右鍵Git Bash Here,輸入npm install hexo -g,開始安裝Hexo,安裝完成后輸入 hexo -v 查看版本,出現如圖所示信息即使安裝成功
完成上一步操作之后,我們需要初始化這個文件夾,輸入hexo init 即可初始化該文件夾,可以看到初始化之后中文件夾中多出來了如此多的內容!
忙活了這么一大堆,現在該生成HTML靜態資源文件了,輸入命令hexo g完成頁面的生成
我們先在本地看看效果吧,輸入hexo s開始服務器,地址是http://localhost:4000/ ,然后打開瀏覽器就會出現我們的頁面:
出現上面的頁面就意味着我們成功了一半!
Githu博客倉庫的建立
首先我們得申請一個Github賬號,已有Github賬號的跳過
此時需要我們認證一下郵箱的內容,我就直接在Android端認證了,出現Your email was verified.即是認證成功,在PC端登陸自己的Github的賬號就OK了
接下來建立正式建立我們的博客倉庫,點擊Strat a Project即可
注意倉庫名稱一定是你的Github用戶名.github.io才是可以的
注意倉庫名稱一定是你的Github用戶名.github.io才是可以的
注意倉庫名稱一定是你的Github用戶名.github.io才是可以的
如果在創建倉庫的時候沒有勾選創建一個README文件的話,就創建完成之后在創建一個就好了,點擊README,之后點擊Commit new File就OK了!
此刻在瀏覽器輸入https://你的Github用戶名.github.io/,應該就會看到你的Github主頁,如果顯示404NotFound之類的請配置一下profile即可,或者有一定延遲或者瀏覽器緩存,請在網絡一切正常的情況下進行相關操作!
關聯Github遠程和本地倉庫
Git個人信息
還是在博客根目錄打開Git Bash Here
- 設置Git的用戶名和email:
1 |
git config --global user.name "你的Github用戶名" |
- 生成ssh密鑰
|
ssh-keygen -t rsa -C "你注冊Github使用的郵箱" |
找到剛才生成的ssh密匙文件,復制其中的全部內容
按照圖片所示操作
出現上圖即配置完畢
配置Deploy
在博客根目錄下找到_config.yml文件中,找到deploy,修改為
1 |
deploy: |
開始部署
當上述操作都完成之后,輸入命令 hexo g 重新生成一下,然后使用命令hexo d 部署到Github遠程倉庫,這個時候一般會遇到一個問題:
這個時候我們需要執行一條命令
1 |
npm install --save hexo-deployer-git |
出現上圖則說明安裝成功,接着我們就可以直接使用命令hexo d部署了,首次使用ssh密匙的時候,需要我們輸入一個yes確認一下
接着輸入一下我們之前設定的倉庫密碼就好了
接下來,看看我們部署的效果:https://你的Github用戶名.github.io 由於我們還未安裝自己的主題,所以看到的是hexo的默認主題,效果如下,如果暫時無法部署遠程倉庫的話就只能在本地使用hexo s開啟服務器,然后訪問http://localhost:4000/ 來查看效果!
安裝主題
下載主題
這個主題大家可以自由選擇,我個人比較推薦使用next主題,它的Github地址我已經子在前言中給出,選擇Clone or download下載zip包即可,解壓之后會獲得一個叫做hexo-theme-next-master的文件夾,我們直接將文件夾重命名為next即可,然后將next文件夾copy到我們的博客根目錄下
修改配置文件
博客根目錄下,有一個_config.yml文件,修改其中的屬性theme: next,注意”:”后面有一個空格,修改之后保存!
重新生成資源
使用命令 hexo g 生成靜態資源,主要是指html文件
重新部署
使用命令 hexo d 重新部署到遠程倉庫,當然如果只是測試效果的話暫時其實沒必要立馬就部署到倉庫,我們只需要 hexo s 開啟本地服務器,然后訪問http://localhost:4000/ 即可,然后就可以訪問到修改過主題之后的效果
到這里主題已經全部安裝完成,但是界面是不是太過於簡約了?接下來說說如何使用這些配置文件使博客變得更加美觀!
hexo命令總結
命令簡寫 | 原始寫法 | 用途解釋 |
---|---|---|
hexo g | hexo generate | 生成靜態資源,理解為生成靜態網頁即可 |
hexo d | hexo deploy | 部署到遠程倉庫,每次部署需要輸入密碼 |
hexo s | hexo server | 開啟本地服務器,用於再無網絡或者網速較慢的情況下快速查看博客效果 |
hexo new page “頁面名” | hexo n page “頁面名” | 匹配新菜單項的內容 |
hexo new “文章名稱” | hexo n “文章名稱” | 新建一篇文章 |
本地倉庫配置文件與主題配置文件
本次倉庫配置文件
博客根目錄下,有一個_config.yml文件,打開之后我會做一個屬性說明
我的配置文件如下
1 |
# Hexo Configuration |
需要修改的地方:博客名稱、副標題、簡介、博客作者、博客語言、時區、主題配置、Deployment(之前已經修
改好了)
主題配置文件
1 |
# 要顯示的菜單:主頁、關於、標簽、分類、歸檔、日程、站內地圖、公益404 |
額外說明
當上述步驟都完成之后,每次修改之后配置文件或者源文件的時候都需要使用hexo g命令重新生成靜態資源,然后就可以在本地開啟服務器進行預覽
之后我們點擊分別點擊一下關於、標簽、分類、日程,除了首頁可以點擊之外,其他的都會出現這樣一個東西:Cannot GET /about/ 或者Cannot GET /categories/等等,這是由於我們沒有在本地建立相關的靜態文件導致的
還是在博客根目錄下Git Bahs Here打開命令行,缺什么就新建什么,比如要新建關於、標簽、分類、日程的頁面
1 |
hexo new page "about" |
於是博客根目錄下的source文件夾下就出現了about、tags、categories等文件夾,里分別有對應index.md文件
- img文件夾是存放博客中圖片的文件夾,這個稍后我會做出介紹
- _ posts文件夾存放了我們寫的博客,我們寫的markdown文件就存放在此
- 關於就是about里面的index.md文件了,這個版式比較隨意,可以自己隨便寫一些自我介紹
- 標簽就是tags文件夾下的index.md文件,對於此文件我們需要做出如下修改
- 分類就是categories里面的index.md文件,與tags相同,我們只需要把 type: “categories” 這一句加上即可
注意:對於此類菜單里的頁面來說,我們只需要做出一次修改即可,一旦把文章類型(即type屬性)申明為tags、categories…hexo就會幫我們自動填充內容,會根據你文章的變化一起變化,無需我們手動進行修改!
博文相關操作
新建文章
接下來還得說說新建文章,畢竟搭建好了博客,不就是要寫點東西嘛!
1 |
hexo new "文章名" |
新建好了之后,我們發現在source文件夾里面幫我們創建好了markdown文件,我們需要做的就是直接開始編輯markdown就好了,比如我新建了一個MyTestBlog
怎樣對文章進行分類和添加標簽呢?只需要做如下編輯
寫的時候一定要注意格式,”:”后面都是有空格的
刪除文章
這個沒啥好說的,我們的所有文章都是放在source\_ posts\下面的,直接刪除相應的markdown文件即可
編輯文章
基本語法
基本的markdown語法在這里不在贅述,基本語法請參照https://www.jianshu.com/p/0130ad32a08d 或者自行百度,很多博客都講述了markdown的基本語法
插入圖片
這個功能由於經常用到,我把它單獨拿出來說一下,首先先在source文件夾下面新建一個文件夾用來存儲圖片,文件夾名稱為img,其他名稱也是可以的,然后將要插入的圖片放在該文件夾下,命名不要太復雜,也不要有中文名稱,比如將2018050899.png放進去,當我們需要插入圖片的時候,只要按照如下寫法就可以將圖片插入了,在這里注意圖片的書寫路徑,如果在本地預覽的話需要寫成這樣的寫法 (../img/2018050899.png) ,但是在服務器上的相對路徑卻不是這樣,而是不需要上一級目錄的標識,按照如下寫法即可<感謝來自李仁單的建議>:
1 |
 |
插入代碼
如果我們已知是什么語言的代碼(比如Java),就寫上Java ;如果不知道的話也可以不寫
1 |
public class Demo{ |
主題配置優化
添加搜索功能
首先我們需要安裝一個hexo-generator-searchdb
1 |
npm install hexo-generator-searchdb --save |
修改本地配置文件,博客根目錄下的_config.yml文件,如果沒有就添加search屬性並做如下配置:
search:
path: search.xml
field: post
format: html
limit: 10000
修改主題配置文件
我的路徑:/博客根目錄/themes/next下的_config.yml文件:
local_search:
enable: true
注意:每個冒號后面都有空格。如果next主題在5.1.1以上的話就不用我這樣設置,直接在主題配置文件中找到canvas_nest: false,把它改為canvas_nest: true就行了
首頁顯示文章摘要
標簽圖標修改
默認的標簽無圖標,是一個”#”,這個是可以修改的:
修改模板 /themes/next/layout/_ macro/post.swig,搜索 rel=”tag”>#,將 # 換成
隱藏powered By Hexo / 強力驅動
打開themes/next/layout/_ partials/footer.swig,使用””隱藏之間的代碼即可,或者直接刪除。
動態背景
直接在主題配置文件中找到canvas_nest: false,把它改為canvas_nest: true就行了
注意分號后面要加一個空格
Github的服務器離我們比較遠,hexo d提交后可能沒有立即看到效果,等待幾分鍾就好了,推薦方法是直接在本地預覽,都修改好了再提交到Github服務器,有時候瀏覽器有緩存,需要多次刷新才可以看到效果!!!
結語
以上就是我的博客的搭建全過程,以后會增加留言或者評論的功能,現在只能這樣了,我的過程也不一定適用於每一個人,可能會有很多隱藏的問題,
文章來源:https://zouchanglin.github.io