文章導航
1 基礎
在開始之前,如果你下面的 技術
或 工具
有所瞭解或比較熟悉,可以加快你的進度:
- Github
- 版本控制工具
Git
- Hexo
- node
- 包管理工具
npm/yarn
如果你不太熟悉這些,也沒有很大的關係,至少先搭建起來是沒有問題的。
博主的博客搭建完成,歡迎踩踩~ 小鯉魚
2 創建Github遠程倉庫
註冊GitHub賬號 (Sign up)
只需要一個能夠驗證的郵箱即可,填寫相關信息之後會發郵件驗證。
☞ Github官網
新建倉庫 (Create Repository)
註冊完成之後登錄 (Sign in)
登錄之後選擇右上角的 +
號選擇新建倉庫 (New Repository)
【注意】
倉庫名 (Repository name)必須是 username.github.io
的形式,username
就是GitHub賬號的 username
。
然後點擊 Create Repository
就可以創建了。
創建之後,點擊 Setting
往下翻,找到 Github Pages
可以看到 your site is published at https://username.github.io
就說明成功了。這個地址就是你的私人博客的地址。
【tips】
之前是直接新建了一個名爲 username.github.io
的倉庫,如果你之前存在其他的倉庫,那你把它重命名成 username.github.io
也是可以達到同樣的效果。
3 使用Hexo創建本地項目
安裝Hexo
需要先全局安裝 hexo
,這裏使用的是 npm
安裝方式 (國內使用cnpm更快)
npm install hexo-cli -g
安裝完成之後,在命令行工具輸入 hexo -v
檢查是否安裝成功。
如果你能看到下面的結果就說明成功了。
如果看到 'hexo' 不是內部或外部命令,也不是可運行的程序或批處理文件。
說明環境變量存在一些問題。
hexo常用命令
如果只是搭建博客的話,下面的幾個命令就足夠了:
#初始化一個項目
hexo init
#生成靜態網頁文件,g是generate的縮寫
hexo g
#運行到服務器端,s是server的縮寫
hexo s
#部署到遠端GitHub
hexo deploy
#清理生成的文件
hexo clean
創建本地項目
新建一個空的文件夾,雙擊打開,右鍵 Git Bash Here
,或者你也可以手動切換到這個目錄下,執行 hexo init
你有可能會卡死在 Install dependencies
的地方,那麼你需要檢查 yarn
的安裝與環境配置。
現在在你的本地項目目錄下執行hexo g
和 hexo s
就可以在本地運行了。
默認的運行地址是 http://localhost:4000
hexo g
會幫你生成靜態的網頁文件
hexo s
會幫你部署並運行起來
熟悉目錄結構
node_modules #本地依賴模塊
public #hexo g生成的目錄,包含靜態網頁文件,就是看到的博客
source #源文件,用來存放我們的.md源文件
themes #主題文件夾,裏面存放主題
_config.yml #項目配置文件,用來配置博客具體的顯示內容等
db.json #存儲一些用到的數據
package.json #依賴配置
.deploy_git #hexo s部署到遠端的時候會生成的文件夾,是根據public文件夾生成的,內容是差不多的
【博客文件文件夾】
最基礎的我們要知道 source > _post
文件夾是我們存放博客 .md
文檔的地方,hexo
會根據這裏的文件生成對應的靜態博客網頁。
4 推送到遠端 Github
安裝 deployer
插件
npm install hexo-deployer-git --save
配置_config.yml
打開項目的_config.yml
文件,找到 deploy
,這裏使用的是 SSH
的方式。
打開 Github
上面對應的倉庫,選擇 clone or download
複製你的 SSH key
,分支默認 master
生成公私鑰
在推送的時候需要用到。
ssh-keygen -t rsa -C "註冊git使用的郵箱"
一路回車,看到下面的結果說明成功。
添加公鑰到 Github
找到生成的 id_rsa.pub
公鑰文件,複製公鑰內容到 GitHub
步驟:Setting -> Deploy keys -> add deploy key -> Add key
記得勾選寫權限,即允許推送 (Allow write access)
開始推送
hexo deploy
推送完成就可以在GitHub上看到剛剛推送的內容,同時在博客地址也可以看到。
5 進階優化
更換主題
Hexo主題官網
選擇自己喜歡的主題,克隆到本地,放在 themes
文件夾下;
修改 _config.yml
文件中的 theme
字段爲 主題的名字就可以了。
其他
還支持添加 評論系統
網站訪問統計
等,有些興趣的小夥伴可以研究。