Hexo 博客搭建教程（二）
續(xù)上一篇：《Hexo 博客搭建教程》
2. 本地搭建Hexo項目
Hexo 是一個博客框架，項目語法是 Markdown，當(dāng)然你也可以配置其他。
安裝 Hexo
1. 環(huán)境準(zhǔn)備
基礎(chǔ)環(huán)境配置完善 (詳見基礎(chǔ)物料) 可以輸入一下命令進行環(huán)境 check 是否安裝成功。
git --version
node -v
npm -v
2. 安裝
npm install -g hexo-cli3. 初始化博客項目
執(zhí)行一下命令
hexo init xxx.github.io
cd xxx.github.io
項目結(jié)構(gòu)如下：
hiciciya.github.io├── db.json├── node_modules // 依賴├── package.json // 應(yīng)用程序信息├── scaffolds //模板文件夾│ ├── draft.md│ ├── page.md│ └── post.md├── source // 資源文件夾│ └── _posts├── themes //主題 博客風(fēng)格├── _config.landscape.yml└── _config.yml //網(wǎng)站配置信息
4. 本地運行項目
npm run server
or
hexo -s
項目本地就運行起來了！it'S WORK。
我們看到首頁默認(rèn)有一篇 HelloWord 的文章。我們來思考如何去控制這篇文章，在已生成目錄中去找與 Helloword 內(nèi)容相匹配的文件，發(fā)現(xiàn) /source/_posts/HelloWord 與我們看到的文章內(nèi)容匹配。
├── source│ └── _posts
5. 嘗試修改初始化的文章內(nèi)容
---title: 我的第一篇文章---
頁面中文章名稱跟著變化生效了。
得出的結(jié)論就是 /source/_posts 下的 md 控制文章視圖。
6. 新建文章
執(zhí)行 hexo new MyWord
順著我們剛才的邏輯 /source/_posts 應(yīng)該增加一個 名為 MyWord.md 的文件。
這樣一篇文章就新建成功了！編輯文章內(nèi)容，在 MyWord.md 可以隨便來點內(nèi)容。
---title: MyWorddate: 2021-06-03 13:49:16tags:---### 我的世界很簡單 簡單到我每頓只吃大龍蝦
頁面同步更新哈
恭喜第一篇博文發(fā)表成功！但是此刻僅是在本地哈。
3. 部署 Githubpages
部署思路
本地代碼變化
同步到遠(yuǎn)端倉庫
客戶端同步更新
能自動化實現(xiàn)該流程是理想狀態(tài)，持續(xù)集成（CI）工具則是最優(yōu)解。Hexo 官方推薦 Travis。
開始部署
1. Travis與github關(guān)聯(lián)
點擊 https://www.travis-ci.com/ 進入 Travis 官網(wǎng)，右上角點擊`Sign in`按鈕。
進入 登錄界面，點擊 SIGN IN WITH GITHUB 按鈕。
登錄成功！
2. Github 配置 Travis CI 權(quán)限
點擊當(dāng)前頁按鈕 Activate all repositories using GitHub Apps
進入授權(quán)頁面，點擊 Approve Install
初次關(guān)聯(lián)的話，會重定向一些頁面。如果有需要就選擇綠色按鈕，綠色代表同意，完成授權(quán)。
3. 新建 Personal Access Token
點擊 github.com/settings/to… 點擊 Generate new token
鍵入 Token 名稱，在 Note 項填入 GH_TOKEN 并只勾選 repo 的權(quán)限。
左下角 Generate token Token 生成成功，復(fù)制新生成的 Token，如下圖所示：
4. Travis CI 配置 Environment Variables 對應(yīng)的項目倉庫配置環(huán)境變量
回到 Travis CI 主頁，右側(cè)選擇選項目倉庫，點擊右上角 More options 下拉選擇Settings，滾動至 Environment Variables。
新建環(huán)境變量 Name 為 GH_Token VALUE，作為我們在 GitHub 生成的 Token。
ps：請確保 DISPLAY VALUE IN BUILD LOG 不被勾選，避免你的 Token 被泄漏。
項目配置CI
1. 新建一個 .travis.yml
復(fù)制以下內(nèi)容至 .travis.yml 文件
2. 提交本地代碼至遠(yuǎn)端
git add .
git commit -m "add travis config"
git push origin master
Travis CI 應(yīng)該會自動開始運行，并將生成的文件推送到同一 repository 下的 gh-pages 分支下。
回到 Travis CI 官網(wǎng)，如下圖所示，完成部署。
3. 修改 GithubPages 部署分支
回到 Github 對應(yīng)項目主頁，點擊 Settings。
右側(cè)側(cè)邊欄選擇 Pages Source，選擇分支為 gh-pages（默認(rèn)部署為 master 分支) 點擊 Save。
4. 瀏覽器 訪問 xxxx.github.io
沒有成功？？？我原本也是這樣認(rèn)為的，各種百度，吸取百家之長后，原來此時只是需要等 10 分鐘或者 20 分鐘。
穩(wěn)?。。?！
done!!!
推薦閱讀：
拉新活動必備——node + fc 部署海報生成服務(wù)
恭喜你又在前端道路上進步了一點點。
點個“在看”和“贊”吧！