- 以前寫過 在Github建立個人專屬名片 , 有人提問在GitHub建立網站是怎麼一回事?
- 在github建立的部落格大多是一些靜态的頁面, 每次更新内容需要手動生成頁面, 然後push到github, 我研究了一下可以自動生成靜态頁面的工具, 其中hexo最為熱門, hexo擁有豐富的主題庫, 滿足你折騰的心~
- 以下是我折騰的一些記錄:
環境要求:
- 已安裝node.js
- 已安裝git
全局安裝hexo
npm install -g hexo-cli
初始化項目
hexo init zhaoolee-blog
cd zhaoolee-blog
npm install
- 本地開啟調試服務
hexo s
寫一篇文章
hexo new "在Github建立個人專屬名片"
在sublime打開建立的 ~/zhaoolee-blog/source/_posts/在Github建立個人專屬名片.md
- 回到控制台, 先
Control+c
- 清理緩存
hexo clean
- 再次開啟服務
hexo s
- 檢視效果
- 通過主目錄下
_config.yml
但是預設的主題實在是不太美觀, 就像是設計師喝了一斤伏特加之後, 随手設計出來的, 副标題幾乎看不清, 下面我們要換主題
配置主題
官方推薦的主題庫: https://hexo.io/themes/
- 選一個自己喜歡的主題, 從github擷取源碼
将源碼以git clone的方式添加到 zhaoolee-blog/them
zhaoolee-blog/them
git clone https://github.com/HeskeyBaozi/hexo-theme-lite ./themes/lite/
打開根目錄的__config.yml檔案，将theme字段設為lite
-
Control+c
-
hexo clean
-
hexo s
- 檢視效果,
http://localhost:4000/
-
按照主題的的說明文檔, 修改主題
每個主題的說明文檔都是作者定義的, 略有差别, 但大同小異,這裡以lite為例,
https://github.com/HeskeyBaozi/hexo-theme-lite
- 打開
themes/lite/_config.yml
這個完全按照個人的喜好, 可以對照文檔, 一點點修改, 這是一個非常消耗時間的活動, 改完記得儲存, 然後,_config.yml
control+c
, 重新開機服務hexo clean
hexo s
将hexo生成的頁面, 上傳到github
- 修改主目錄
_config.yml
deploy
type
repo
branch
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/zhaoolee/zhaoolee.github.io.git
branch: master
- 安裝一個與github通信的插件(需要事先在github建好倉庫, 建倉庫流程參考 https://www.jianshu.com/p/0b441a391136 )
npm install hexo-deployer-git
- 重新生成頁面, 并上傳到GitHub
# 清理緩存
hexo clean
# 生成頁面
hexo g
# 上傳到github
hexo d
上面隻是最簡單的玩法, 如果你對靜态部落格搭建非常感興趣, 可以參考以下一些資料:
小結:
- 如果你是一個愛折騰的極客, hexo可以玩的很酷, 但如果你是為了建立自己的部落格, 建議把折騰的心思放到部落格的内容上, 因為通過寫部落格獲得的樂趣,遠比配置幾個靜态頁面要大的多
- 坦率的講, hexo是有很多不足的, 比如純靜态頁面,沒有資料庫的支援,即使添加簡單的留言闆功能, 也要借助第三方, 而國内提供評論服務的三方平台, 由于種種原因, 也紛紛倒閉了, 玩hexo你會有這種感受, 我本來想建立自己的部落格, 後來發現 折騰部落格本身所花費的時間, 比寫部落格花的時間還要多, 哈哈, 有點尴尬, 是以我果斷棄坑了...
- hexo也有很多優點: 借助GitHub, 可以不花一分錢, 快速建立自己的個性化網站, 而且網站大多界面美觀, 如果單純用來發部落格,維護起來也比較簡單
- 玩hexo, 在github建立網站, 本來就是偏極客的, 如果你隻是想寫部落格, 表達自己的思想, 簡書就是很好的選擇, 與hexo相比, 簡書的定制性要差一些,好處在于, 完全不需要自己維護, 你可以通過向專題投稿, 讓你的内容,快速被其他人看到, 與他人的點贊/評論/打賞/互動,讓你對寫部落格保持一種長久的興趣, 而這種興趣往往是最重要的~
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)