堅持原創輸出,點擊藍字關注我吧

作者:清菡
博客:Oschina、雲+社區、知乎等各大平台都有。
目錄
-
一、環境准備 -
安裝 Node js
-
-
二、安裝 Hexo 博客框架 -
三、使用 Hexo 搭建博客(本地啟動) -
四、部署到遠端(Github)上公開使用 -
五、注意
Hexo 博客框架比較成熟,出了問題,網上可以搜索到很多的解決方式。無論是 Windows 還是 Linux,操作其實都是差不多的。我的是 Windows10 的電腦操作的。這個是我的個人博客地址:qinghan586.github.io
一、環境准備
提前裝好 Git,這里不多講解了,可以百度安裝下。
安裝 Nodejs
下載 nodejs:https://nodejs.org/en/

安裝直接點擊下一步、下一步就可以了。
安裝完以后會有兩個組件:1.是 npm 包管理器;2.是 Nodejs 本身。
如果是 mac,需打開終端切換到 root 用戶:
sudo su
輸入密碼,敲回車。

輸入clear
清一下。
查看 node 的版本:node -v
查看 npm 包管理器的版本:npm -v
Windows 電腦我是直接以管理員身份打開 cmd,輸入:
查看 node 的版本:node -v
查看 npm 包管理器的版本:npm -v
因為 Hexo 需要 Nodejs 支持的、生成的,所以這是前置步驟。
二、安裝 Hexo 博客框架
需借助 npm 包管理器來安裝。因為國內安裝鏡像源很慢,所以利用 npm 安裝 cnpm。
用淘寶鏈接進行安裝:
npm install -g cnpm --registry=https://registry.npm.taobao.org
敲cnpm
就可以自動補全了,這個工具說明就有了。
看下 cnpm 的版本:cnpm -v

安裝 Hexo 框架:
cnpm install -g hexo-cli

hexo -v
來驗證下。
可以看到 Hexo 的博客框架是基於 node 的。

三、使用 Hexo 搭建博客(本地啟動)
方式一:
在開始之前,輸入 pwd 看下所處路徑。
新建一個 blog 文件夾:mkdir blog
方式二:
我是直接在 E 盤自己手工創建了一個 blog 文件夾。
所有博客的東西全部都在 blog 里面生成。所以大家如果出了什么錯,直接連 blog 文件夾整個刪除就行了。注意:千萬不能只刪除 blog 文件夾里面的內容,卻不刪除 blog 文件夾,這樣操作會出問題的。
進入 blog 的目錄中,位於這個目錄下,就可以使用 Hexo 生成我們的博客。
mac 下輸入 sudo,表示用管理員的命令來執行,用 mac 電腦需要加上。
初始化一個博客:sudo hexo init
初始化一個博客:hexo init
您看,它會自己去克隆。還會默認克隆一個 Landscape 主題:


安裝完成了!
看該目錄下的所有子目錄和文件:ls
列出該目錄下的所有子目錄和文件的詳細信息:ls -l
啟動博客:hexo s
輸入localhost:4000
問下,看看博客是不是已經成功,已經有了,就像這樣:

您看,還簡介了 Hexo 怎么使用:

hexo s
就是hexo server
,寫一篇博客,可以用hexo s
這個命令啟動預覽下。
hexo n "我的第一篇博客文章"

切換到 source,輸入命令:cd source/_posts/
用 vim 編輯器:

可以進行編輯,也可以不編輯直接發布。
點擊鍵盤的 i 進行編輯,shift 和 esc 同時按下(這里我記得是這樣用的,如果不行可以百度下),然后輸入:wq
保存退出。這個不太好用,編輯用 Visual Studio Code 這個工具即可。
這樣博客文章就創建好了。
輸入 pwd,看到在 source 目錄下,需要退 2 層回去:cd ../..

這樣就到了 blog 目錄。
接着輸入以下命令:
清理下:hexo clean
生成下:hexo g
啟動下:hexo s
刷新下:http://localhost:4000

以上 Hexo 博客的搭建已經完成了。
四、部署到遠端(Github)上公開使用
1.登錄自己的 Github。
2.新建一個倉庫:
注意:一定是你的昵稱.github.io
例如我的 Github 昵稱是 qinghan586
,那么這里輸入qinghan586.github.io



現在是個空倉庫,地址是這個,先放着。
繼續在 blog 目錄下,輸入命令行操作:
裝 Git 部署的插件:cnpm install --save hexo-deployer-git

里面的紅色警告可以忽略不管。
去 blog 文件下,直接看到一個_config.yml
,修改_config.yml
即可。注意:blog
文件夾下的其它文件下也有_config.yml
文件,別改錯了文件。
文件的最底部修改成這樣:
deploy:
type: git
repository: https://github.com/qinghan586/qinghan586.github.io.git
branch: master
注意:deploy: type: repository: branch: 后面都有一個英文的空格。
用 nopad++修改后一定要保存!
部署到遠端:hexo d
自動部署,需輸入賬號密碼:

往遠端推成功后,刷新 Github 倉庫,發現多了很多東西,這些就是我的博客內容:

訪問qinghan586.github.io
就可以直接打開,並看到博客部署到 Github 上去了。
下載好看的主題:
好看的 Hexo 主題地址:https://hexo.io/themes/
自己來換個主題,克隆到 themes 主題下去:
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
git clone https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

themes 文件夾下就出現你下載的主題了。
現在把主題配置到博客上去:
修改_config.yml
文件:
theme: yilia
theme: volantis
你用哪個主題就換哪個主題的名字,注意名稱前面有個英文空格。
輸入以下命令:
hexo clean
hexo g
hexo s
啟動本地服務:http://localhost:4000
看看,主題已經換了。

推到遠端(github)上去:hexo d
推送完成!

訪問qinghan586.github.io
可看到主題成功換了!
以上整個過程已經完成了。
后續學下 css,然后才會把自己的博客修改的很漂亮。先搭建起來,再考慮博客內容美觀的問題。
五、注意
修改_config.yml
文件后,需要把主題配置到博客上去,輸入
hexo clean
hexo g
hexo s
推到遠端(github)上去:hexo d
都不行的情況下,可以換成這樣的命令再次輸入下:
npm install hexo-deployer-git --save
hexo clean
hexo generate
hexo deploy
出現提示 nothing to commit, working tree clean
我是這樣提交文章成功的,依次輸入:
git add .
git commit -m "one"
hexo clean
hexo generate
hexo deploy
hexo g
hexo d
hexo s
hexo s
后就出來了,域名本地都可以訪問了。
如果 Hexo 部署提交不上,Github 倉庫上文件未更新。
刪除 .deploy_git
目錄,再執行hexo d -g
就可以了。
Github 比較慢,刷新后要耐心等待下。
開啟無痕模式加載網頁,ctrl+shift+delete
清除緩存有時候不一定管用(原因不明)。
較為靠譜的參考鏈接:https://segmentfault.com/q/1010000003481894?utm_source=sf-similar-question
公眾號 「清菡軟件測試」 首發,更多原創文章:清菡軟件測試 95+原創文章,歡迎關注、交流,禁止第三方擅自轉載。
