前言
hexo靜態博客很早就耳聞了,鑒于時間和精力,之前一直沒決心要做一個自己的個人網站。在使用hexo搭建靜態博客之前,還有一個小插曲,之前曾經考慮過使用wordpress搭建個人網站,阿里云服務器和域名都已經購買,并且已經在服務器上配置好了相關內容,但是域名備案需要服務器運行3個月,只能通過ip地址訪問wordpress博客,這個點就很影響個人網站的使用,并且阿里云服務器一年的費用達到2000多,也是一筆不小的開銷。綜合權衡對比之后,轉而投向谷歌github、百度coding的hexo靜態個人網站,好處是免費并且有平臺提供的特定域名地址,并且hexo可以滿足目前這些所有的需要,個性化定制型強,搭配目前使用人數最多的next主題,簡直是帥到不要。并且現在很多搜索到的個人博客,基本都是hexo+next主題的搭配,可見其受歡迎程度。言歸正傳,下面就把玩hexo從搭建到收錄全過程分享給大家,很多坑點網上是找不到的,千篇一律的內容很難分析問題。
相關資料
關鍵地址
NexT主題官方文檔 hexo的一些部署配置可以簡單參看,主要看NexT主題怎么在hexo中配置,定制個性化內容。
leancloud網站 博客集成閱讀數,valine評論系統都需要用到。
hexo個性化icon網站 里面的icon名稱可以使用到hexo中,替換并定制化icon,hexo的圖標都是關聯到這里的。
coding網站 國內存放靜態博客界面代碼
github網站 國外存放靜態博客界面代碼
注意:個人把靜態博客分別上傳到coding、github,方便國內和國外的搜索引擎爬取到內容。自己可以酌情選用。
百度收錄站點 提交coding域名
谷歌收錄站點 提交github域名
相關地址
valine評論系統用于博客集成評論系統
Node.js hexo需要先安裝node.js環境
Git hexo在上傳時需要用到git
5.1: git@github.com:iissnan/hexo-theme-next.git (個人使用版本)
6.0: git@github.com:theme-next/hexo-theme-next.git
正文
準備工作
本地環境需要安裝Node.js和Git,可以在上面的地址找到安裝下載界面。
安裝并初始化hexo
上面兩個準備工作完成后,可以選擇一個目錄,右鍵選擇Git Bash Here打開終端,依次執行如下命令:
(使用cmd的終端也行,不過需要配置git的環境變量,這里直接使用git自帶的終端方便)
npm install -g hexo-cli
hexo init Hexo
cd Hexo
npm install
都執行成功后,會在目錄生成一個Hexo文件夾,以后Hexo文件夾就是本地靜態網站配合和文章存放的地方。接下來啟動本地hexo,先本地預覽hexo,執行如下命令:
hexo s
當看到命令行窗口出現,INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.的內容時,說明啟動成功了,然后在瀏覽器輸入網址:http://localhost:4000/ 即可看到本地hexo網站了。
另外,補充幾個hexo關鍵的操作命令:
hexo clean #清空hexo,主要刪除Hexo根目錄下的public文件夾
hexo g #重新成功public文件夾內容
hexo s #啟動本地hexo服務
hexo d #發布到遠程倉庫
以后每次同步遠程倉庫,基本都是上面的命令順序。
替換默認的hexo主題(landscape–>NexT)
hexo默認的主題是landscape,目前NexT主題是使用最多的,個性化定制性都很好,使用NexT主題替換landscape默認主題,我們需要先把NexT主題拷貝到Hexo本地,在終端輸入:
git clone https://github.com/iissnan/hexo-theme-next themes/next
拷貝成功后,使用編輯器打開Hexo根目錄下的_config.yml文件,把里面的landscape主題替換成next主題,然后hexo clean,hexo g,hexo s,接著刷新瀏覽器就可以看到新配置的NexT主題了。
# Site
title: Hexo # 此處改為你站點的標題
subtitle: # 此處改為你站點的副標題
description: # 此處改為你站點的說明
keywords: # 此處改為你站點的關鍵字
author: John Doe # 此處改為你的名字
language: # 此處改為 zh-CN
timezone: # 此處改為 Asia/Shanghai
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/ # 此處可以改為 :title/
permalink_defaults:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape # 此處改為 next
上傳本地博客到github或者coding
把本地靜態代碼上傳到遠程倉庫,如github、coding等。首先我們需要在兩個平臺上有賬號,并且分別創建項目倉庫,注意,新建的項目名稱是有特定要求的,github上的名稱必須是:{user_name}.github.io,coding上的名稱必須是:{user_name}.coding.me,這樣子上傳到遠程倉庫的靜態文件,在訪問的時候才不會出現樣式混亂和404問題,每個平臺只提供一個這樣的pages頁面,而格式也是固定的,按照人家平臺的規定來就行了。其中,用戶名就是當時注冊的時候用的是那個名稱,別搞亂了,不是后面修改資料的昵稱,用戶名一般修改不了。
上傳之前,先把ssh在本地配置一下,打開Hexo根目錄下的_config.yml文件,找到deploy并如下修改:
(把其中的github和coding的ssh替換成自己的就行了,注意一下,需要先在平臺上配置好publickey,玩git的應該都知道)
deploy:
type: git
repo:
github: git@github.com:xxx/xxx.github.io.git,master
coding: git@git.coding.net:xxx/xxx.coding.me.git,master
修改好了之后,執行命令,上傳到遠程倉庫:
hexo g -d
最后,瀏覽器打開遠程倉庫地址,查看代碼,然后分別把github或coding的pages打開,等待一會,然后訪問pages地址就可以看到你提交的個人網站了。
百度、谷歌收錄操作
讓百度、谷歌收錄個人網站,需要兩個平臺上的驗證文件放在博客的根目錄下(這里選擇推薦的一種驗證方式)。打開上面提到的百度收錄,谷歌收錄的網址,統一選擇文件驗證的方式,百度這邊的話在添加地址的時候,第一次可能需要填寫個人信息,補充完畢后,添加網站,然后根據提示下一步操作即可,谷歌的也是類似。
這里提一個坑點:百度、谷歌的驗證方式都是使用文件驗證,從平臺上下載的驗證文件在放根目錄的說法中,網上大多數的說法都是說直接把文件放到Hexo根目錄的source目錄下,然后上傳到遠程倉庫,但是實驗證明這種做法是有問題的,當我們執行hexo g生成靜態界面的時候,hexo會把多余的內容添加到source目錄下的驗證文件中,導致百度或者谷歌驗證一直失敗。
解決方法:在hexo g操作之前,驗證文件先不加入到source目錄中,等待hexo g執行成功后,手動把驗證文件copy到Hexo根目錄下的public目錄中,然后執行hexo d上傳到遠程倉庫,最后再測試平臺上的驗證文件,可以看到百度、谷歌都驗證成功了。最后就等待收錄通過后,輸入site:地址,測試一下是否搜索到博客地址。谷歌的收錄速度很快,上傳到倉庫后幾個小時就可以搜索到我的網站了,而百度則慢點,可能要一兩個星期,有備案填入在百度上則會加快收錄速度。
結語
上面就是Hexo網站從配置到谷歌、百度收錄的全過程了,另外關于Hexo的個性化配置,評論系統的配置等這些還是有很多細節和坑點,可以持續關注,晚些時間會放出關于hexo主題個性化定制的相關內容。可以以本博客顯示作為參考。
最后,如果在搭建hexo博客過程中,有解決不了的問題或者想讓熟悉的人快速幫你配置并指導,可以添加wechat596有償服務,添加好友時備注:昵稱-hexo服務。
歡迎點擊欣賞個人網站