最近在玩Coding,搭建靜態博客不用花錢錢買域名和租服務器。搭建一下個人博客玩玩。使用Hexo,寫下來希望對大家有用。
工具/原料
Git
Coding
Hexo
Node.js
方法/步驟
創建項目
你需要在 Coding 上面新建一個項目,項目名稱隨意:比如我的chenlianjiang。
填寫項目名稱、描述、設置屬性、初始化文件,最後點擊“創建項目”
安裝博客
我們在本地隨便找一個盤來安裝的 hexo :
$hexo init chenlj-hexo-blog
進入目錄文件夾裡面,使用 npm install 把 package.json 裡面需要的東西都安裝好。
接著我們需要在本地先預覽一下自己博客的樣子,就要先安裝 hexo server :
$ npm install hexo-server --save
安裝好之後在命令行裡面運行 hexo server ,然後在瀏覽器的地址欄上面輸入localhost:4000 就可看到自己博客的樣子。
Hexo全局配置
本地瀏覽自己的博客沒問題後,我們就需要把它部署到 Coding 上了。
1 編輯根目錄下 _config.yml 文件,我們找到 deploy 這一項,修改如圖:
2 修改好 _config.yml 文件過後,我們還需要安裝 hexo-deployer-git 才能夠部署到 Coding 上面。
npm install hexo-deployer-git --save
接著我們就生成靜態頁面和把代碼 push 到 Coding 上:
$ hexo clean
$ hexo g
$ hexo d
注意把代碼 push 到 Coding 上之前會讓你輸入你的 Coding 用戶名和密碼。
如果使用ssh協議需要先配置好公鑰。
使用Coding演示
我們進入演示模式的配置頁面裡:
在開啟演示模式之前,會提醒你沒有檢測到環境,你直接強制開啟就可以了。
接著我們在高級選項中把運行環境設為 HTML ,部署版本為 master ,設置訪問域名。然後應用內存選用 256M 就足夠了。
最後點擊一鍵部署,等待部署成功就行了。
然後你可以訪問域名來查看自己是否部署成功了。
設置自動部署
我們在設置裡找到 webhook, 然後點擊新建 Hook 、
第一個輸入框中是填你的博客域名,然後在後面加上 /_ 。
第二個輸入框是輸入一個 token ,我們直接填寫 {{TOKEN}} 就可以了。
回到演示裡,在左邊的欄目中找到環境變量,變量名填寫為 WEBHOOK_TOKEN ,值為 {{TOKEN}} ,接著重新啟動應用就 ok 了!
測試自動部署
設置好自動部署之後我們要測試一下是否 push 代碼的時候就會自動部署。
創建一個新的文章(可以什麼都不寫),然後生成靜態頁面 push 到倉庫去:
$ hexo new test
$ hexo g
$ hexo d
我們回到瀏覽器在輸入博客的地址,如果那篇新寫好的文章出現在首頁了,說明我們自動部署成功了。以後再也不用自己去手動部署一次了!