教你在?

Tags: 個人, 博客,

最近在玩Coding,搭建靜態博客不用花錢錢買域名和租服務器。搭建一下個人博客玩玩。使用Hexo,寫下來希望對大家有用。

工具/原料

Git

Coding

Hexo

Node.js

方法/步驟

創建項目

你需要在 Coding 上面新建一個項目,項目名稱隨意:比如我的chenlianjiang。

填寫項目名稱、描述、設置屬性、初始化文件,最後點擊“創建項目”

教你在 Coding 上搭建 Hexo 個人博客

安裝博客

我們在本地隨便找一個盤來安裝的 hexo :

$hexo init chenlj-hexo-blog

進入目錄文件夾裡面,使用 npm install 把 package.json 裡面需要的東西都安裝好。

接著我們需要在本地先預覽一下自己博客的樣子,就要先安裝 hexo server :

$ npm install hexo-server --save

安裝好之後在命令行裡面運行 hexo server ,然後在瀏覽器的地址欄上面輸入localhost:4000 就可看到自己博客的樣子。

教你在 Coding 上搭建 Hexo 個人博客

教你在 Coding 上搭建 Hexo 個人博客

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 上搭建 Hexo 個人博客

教你在 Coding 上搭建 Hexo 個人博客

教你在 Coding 上搭建 Hexo 個人博客

教你在 Coding 上搭建 Hexo 個人博客

使用Coding演示

我們進入演示模式的配置頁面裡:

在開啟演示模式之前,會提醒你沒有檢測到環境,你直接強制開啟就可以了。

接著我們在高級選項中把運行環境設為 HTML ,部署版本為 master ,設置訪問域名。然後應用內存選用 256M 就足夠了。

最後點擊一鍵部署,等待部署成功就行了。

然後你可以訪問域名來查看自己是否部署成功了。

教你在 Coding 上搭建 Hexo 個人博客

教你在 Coding 上搭建 Hexo 個人博客

教你在 Coding 上搭建 Hexo 個人博客

設置自動部署

我們在設置裡找到 webhook, 然後點擊新建 Hook 、

第一個輸入框中是填你的博客域名,然後在後面加上 /_ 。

第二個輸入框是輸入一個 token ,我們直接填寫 {{TOKEN}} 就可以了。

回到演示裡,在左邊的欄目中找到環境變量,變量名填寫為 WEBHOOK_TOKEN ,值為 {{TOKEN}} ,接著重新啟動應用就 ok 了!

教你在 Coding 上搭建 Hexo 個人博客

教你在 Coding 上搭建 Hexo 個人博客

測試自動部署

設置好自動部署之後我們要測試一下是否 push 代碼的時候就會自動部署。

創建一個新的文章(可以什麼都不寫),然後生成靜態頁面 push 到倉庫去:

$ hexo new test

$ hexo g

$ hexo d

我們回到瀏覽器在輸入博客的地址,如果那篇新寫好的文章出現在首頁了,說明我們自動部署成功了。以後再也不用自己去手動部署一次了!

教你在 Coding 上搭建 Hexo 個人博客

教你在 Coding 上搭建 Hexo 個人博客

教你在 Coding 上搭建 Hexo 個人博客

相關問題答案