一口一口吃掉Hexo(二)


如果你想得到更好的閱讀效果,請訪問我的個人網站 ,版權所有,未經許可不得轉載!

本次系列教程的第二篇文章我會介紹如何在本地安裝Hexo,請注意我使用的Windows系統,如果你是Mac或者Ubuntu,請參考官方文檔,理論上來說會比windows簡單。

本地安裝Hexo

安裝Git

  • 下載並安裝Git
  • 如果你已經在本地使用過Git,並且綁定了你的Github賬號,那么請看下一步吧!如果你是首次使用Git,那么你應當幫頂一下你的Github賬號,在這里注冊你的Github賬號。
  • 使用下面的命令創建SSH Key。
$ ssh-keygen -t rsa -C "youremail@example.com"
  • 如果一切順利的話,可以在用戶主目錄里找到.ssh目錄,里面有id_rsaid_rsa.pub8兩個文件,這兩個就是SSH Key的秘鑰對,id_rsa是私鑰,不能泄露出去,id_rsa.pub是公鑰,可以放心地告訴任何人。
  • 登陸GitHub,打開“Account settings”,“SSH Keys”頁面,然后,點“Add SSH Key”,填上任意Title,在Key文本框里粘貼id_rsa.pub文件的內容,點“Add Key”,你就應該看到已經添加的Key。

安裝Node.js

這里下載並安裝程序。

安裝Hexo

所有的環境搭建好之后就可以打開git bash,並使用下面的命令進行安裝。

$ npm install -g hexo-cli

搭建網站

安裝 Hexo 完成后,執行下列命令,Hexo 將會在指定文件夾中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

這個過程需要一定的時間,請耐心等待。
建成之后的目錄結構大致如下,可能會有所差異,並無大礙。

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml 是網站的配置信息,大部分時候你會使用到他。
  • source 目錄下面存放的是你編寫的博客文章,在 _posts 目錄下為你已經發表的文章,在 _drafts 目錄下為你存放的草稿文章,當然你可能沒有這個文件夾,因為一開始你還沒有新建草稿文章。
  • themes 目錄為你的博客網站使用的主題,程序默認的主題landscape,他長這樣:

landscape


本地調試Hexo

啟動你的網站

  • 使用如下命令進入你的博客網站目錄,例如我的目錄為/e/blog。
cd /e/blog
  • 執行如下命令啟動Hexo服務。
hexo s
或者
hexo server
  • 如果幸運的話,執行完上面的命令之后你將可以通過瀏覽器訪問localhost:4000看到博客網站的主頁,他大概長這樣,你已經看過了對吧。

landscape

  • 如果你出現的問題,請聯系我或者自行google。

本地更換主題

如果你不喜歡默認主題的話,那就在這里找到你喜歡的吧!相信總有一款適合你。

我這個系列的教程將會使用Indigo這個主題,基本來說設置大同小異,他長這樣:
Indigo

安裝主題

確認你的Hexo版本在3.0以上,以及Node版本為6.x以上,進入Hexo根目錄(例如我的為/e/blog),執行以下命令。

git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

依賴安裝

在Hexo的根目錄下安裝下面的依賴,如果你已經安裝過了,那就不用再次安裝。

Less

$ npm install hexo-renderer-less --save

Feed

$ npm install hexo-generator-feed --save

Json-content

$ npm install hexo-generator-json-content --save

QRCode

用於生成分享二維碼

$ npm install hexo-helper-qrcode --save

開啟標簽頁

當初就是在這里沒有開啟,所以最后點擊“標簽“的時候是會出現異常的

hexo new page tags

修改blog/source/tags/index.md

layout: tags
comments: false
---

開啟分類頁

hexo new page categories

修改blog/source/categories/index.md

layout: categories
comments: false
---

開心地瀏覽吧!

同樣是打開瀏覽器,訪問localhost:4000,就可以看到親切的Indigo主題了。
如果你發現遇到了問題,請你來到這里查看解決方法,如果這里不能滿足你,請向作者發Issues,或者站內留言or給我發郵件 Wensibob@gmail.com

下回見!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM