如何使用 vercel + hexo 搭建博客
前言
也許你想擁有一套自己的博客，方便面試的時候想展示自我，或者想記錄自己的生活，但是一直沒有找到合適的平台；也許你有一些自己的小玩意想部署到服務器，但是服務器有有點小貴，打工人又舍不得，那么 vercel 平台可能是你不錯的選擇，不用花錢，訪問速度快，域名也有！本文的主要目的是幫助想擁有自己的博客的朋友，提供一套完整的博客搭建方案，那么現在就開干吧！
介紹
vercel: Vercel 提供了一個雲平台，可以優化整個項目開發和部署體驗，它有很強大的功能值得去探索，個人使用是免費的，提供了域名訪問，使用方便快捷。
hexo: Hexo 是一個基於 nodejs 的靜態博客網站生成器，通過使用腳手架安裝后，命令操作簡單，直接開箱使用，支持豐富的主題，支持高度的自定義化，主要使用 markdown 語法。你可以自行開發插件，優化你的博客。
搭建
在搭建博客之前，我們需要一些准備工作，首先是 vercel 平台的賬號，其次是安裝 nodejs 以及 hexo-cli 腳手架。
注冊 vercel
1、首先，在 Vercel 官網（https://vercel.com/）注冊一個新賬戶，注冊新用戶必須使用 Github、Gitlab 或者 Bitbucket 的賬戶進行授權，並綁定手機號。注冊完成后，可以在配置頁面修改自己的郵箱地址。這里建議使用 Github 進行授權登陸，后續可以選擇 Github 上的項目直接部署也會很方便的。
2、注冊成功后，就可以登陸系統，查看和設置相關的東西啦。這里是我目前部署的一些東西。
安裝 hexo-cli
在安裝 hexo-cli 前，需要保證電腦安裝了 nodejs。
nodejs 需要在node 官網下載，安裝好 nodejs 后，也會相應的安裝上 npm，接下來就可以安裝 hexo-cli 了。
安裝命令：npm install hexo-cli -g
檢測是否安裝成功，在終端執行：hexo -v命令，如果出現以下內容則表示安裝成功。
vercel+hexo 創建項目
vercel 平台中支持選擇多種項目模版，包括但不限於 Next.js，Nuxt.js，Hexo，Angular 等多種類型，這里我們選擇的當然是 hexo 模版。
-
登陸系統后點擊
new project，創建新項目
-
進入到項目選擇，可以選擇 git 倉庫中已存在的項目，也可以選擇系統提供的模版項目，這里我們選擇系統提供的模版項目，點擊右方下面的
Browse All Templates找到 Hexo 模版項目。
-
選擇模版后，進入創建項目位置選擇，目前團隊項目是需要專業版的，是需要收費的，選擇個人，點擊
PERSONAL ACCOUNT后面的 select 按鈕。
-
進入到創建倉庫位置，可以選擇 Github、Gitlab、Bitbucket，根據自己的需要選擇倉庫保存地址。這里我選擇 Github。
-
選擇 Github 后，因為我登陸的時候時使用了 Github 了授權，這里也就直接顯示了我的 GitHub 名稱，我們填入倉庫名稱為 hexo，你也可以填入其他的倉庫名稱，比如 blog、myblog 等。Create private Git Repository 可以勾選，也可以不勾選，勾選的話會創建私人倉庫，這樣別人看你的 Github 的時候不會看到這個倉庫。選擇好后，點擊 Continue 進入下一步。
-
進入下一步后，這里需要配置項目名稱 PROJECT NAME，即在項目生成后的 package.json 中的 name 字段，這里我們保持默認就好，也可以填自己喜歡的名字；FRAMEWORK PRESET 默認選擇 Hexo 不變，因為我們要創建的是 hexo 的博客；Build and Output Seettings 中可以配置自定義打包命令，打開后面的 override 選項后，可以設置我們的自定義打包命令和打包后輸出的文件夾名字。
-
這里我們可以先不設置，保持默認，如果有需要后續可以在設置中進行更改，比如我的項目中打包之后使用了 gulp 進行了代碼壓縮，所以這里的命令進行了自定義
-
設置完畢后，點擊 Depoly 進行項目創建，部署即可。等待大概不到 1 分鍾，項目就部署好了。會跳轉到恭喜你，項目創建成功的頁面。這時就可以點擊 visit 按鈕進行訪問了，因為 vercel 提供了免費的域名，所以直接訪問即可。訪問
-
至此，我們的 Hexo 博客就搭建完成了，在 GitHub 中也已經自動創建了這個博客項目，整個過程的操作還是很簡單、很友好的。
基本使用
-
在 GitHub 中將我們創建好的博客項目 clone 到本地：
git clone https://github.com/BoWang816/hexo.git，打開后會有以下文件目錄：
主要有三個文件夾：scaffolds（模版文件夾）、source（源文件夾）、themes（主題文件夾），以及最外層的_config.yml 項目配置文件。
-
在搭建之前我們已經在本地安裝了 hexo-cli 的腳手架，這個時候就可以使用了。在項目文件夾下，打開終端，首先需要安裝項目依賴，通過
npm install或cnpm install或yarn install皆可安裝依賴。 -
依賴安裝成功后，執行
hexo server -p $PORT即可啟動項目，其中$PORT 默認 4000，你也可以修改端口。hexo 也提供了簡易方式啟動命名：hexo s，啟動后在瀏覽器訪問：http://localhosst:4000即可打開。
-
hexo常見的命令
更多命令可點此處查看
-
hexo s啟動本地服務 -
hexo clean清除緩存 -
hexo g打包 -
hexo new post article創建一個名稱為 article 的文章 -
hexo new page about創建一個名稱為 about 的路由頁面 -
配置主題
目前 hexo 官方有 330 套主題可供選擇，另外 GitHub 上也有許多個人開發的主題可以使用，部分主題支持了使用 npm 包的方式進行安裝配置。默認的主題配置方式是將主題倉庫中的內容直接 clone 下來放到 themes 文件夾下，並根據主題名稱在_config.yml 中進行配置。具體的博客主題配置方式需要根據主題中的設置項進行。還有一種是通過安裝 npm 包的方式，這時候就不需要 themes 這個文件夾了，在 package.json 中安裝了主題包以后，根據主題開發者的指導進行配置即可。
總結
至此，我們的博客就成功搭建並可供外部訪問啦。vercel 中也支持自定義域名，如果你有自己的域名也可以在其中配置使用自己的域名進行訪問，比如我的是wangboweb。另外你也無需關注部署發布的問題，只要你在 GitHub 中將你新建的文章進行了 git 提交，vercel 會自觸發打包部署，完事還可以給你發郵件告訴你：大哥，我給你部署成功啦！你可以訪問下看看滴！
參考
更多
推薦一下我現在在用的主題：butterfly