## 摘要 * 安裝npm，安裝hexo相關依賴，安裝主題stun * 修改hexo配置，修改stun配置，部署到github，gitee實現靜態訪問 * 給部落格加上全域性搜尋，訪問量統計 * hexo部落格編寫模板 > tips: 以下{$xxx}均為使用者自定義 ## 搭建環境 ### 建立倉庫 1.github > 倉庫命名為：{$你的ID}.github.io 2.gitee > 倉庫命名為：{$你的ID} ***倉庫名大小寫一致，訪問路徑也是*** ### 環境安裝 1.安裝npm > https://nodejs.org/en/download/ 2.安裝cnpm ``` npm install cnpm ``` 3.安裝部落格搭建框架hexo ``` cnpm install -g hexo-cli ``` 4.新建一個資料夾，並且之後所有操作都基於該資料夾 ``` mkdir {$xxx} cd {$xxx} ``` 5.安裝依賴，下載主題 ``` cnpm install --save hexo-deployer-git cnpm install --save hexo-render-pug cnpm install --save hexo-generator-search git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun ``` 6.增加頁面導航 ``` hexo new page categories hexo new page tags ``` > 專案目錄/source/categories/index.md 加上 > > ``` > type: categories > ``` > > 專案目錄/source/tags/index.md 加上 > > ``` > type: tags > ``` ### 修改配置檔案 1.修改部署資料夾下/_config.yml（挑選重要部分修改） ``` #展示設定 title: {$自定義文字} language: zh-CN url: {$部落格地址} #主題 theme: stun #git相關 deploy: type: git repo: github: {$你的部落格倉庫} gitee: {$你的部落格倉庫} branch: master #搜尋相關 search: path: search.json field: post content: true ``` 2.修改部署資料夾下/themes/stun/_config.yml(挑選重要部分修改) ``` #取消導航欄註釋（注意空格對齊） menu: categories: /categories/ || fas fa-layer-group tags: /tags/ || fas fa-tags #更改圖示(最好使用連結地址，我這裡使用的圖床，圖床使用見下一篇部落格) favicon: small: https://gitee.com/BothSavage/PicGo/raw/master/image/favicon-16x16.png medium: https://gitee.com/BothSavage/PicGo/raw/master/image/favicon-32x32.png #更改背景大圖 header: bg_image: enable: true url: https://gitee.com/BothSavage/PicGo/raw/master/image/背景.png #更改頭像大圖，並設為圓形 author: avatar: url: https://gitee.com/BothSavage/PicGo/raw/master/image/頭像.png rounded: true #開啟訪問統計 busuanzi: enable: true #開啟搜尋功能 local_search: enable: true ``` ### 執行 1.基礎命令 ``` hexo c #清理一下 hexo g #生成 hexo s #部署到本地4000埠 hexo d #部署到遠端Github倉庫 ``` 2.推薦命令 ``` #第一次嘗試本地是否能訪問 hexo c && hexo g && hexo s #以後每次新增文章 hexo c && hexo g && hexo d ``` ### 部落格檔案存放地點 > 專案目錄/source/_posts ## markdown檔案規範 1.文章元資料 ``` #分別指定文章標題，時間，類別，標籤 --- title: Hexo結合Stun靜態部落格搭建從入門到入土 date: 2020-12-19 20:40:11 categories: - 雜項 tags: - 前端 - 建站 --- ``` 2.主頁不顯示文章全部 ``` 上面是顯示內容 ``` ## 其他高階功能 stun主題支援 * 評論系統 * 站長工具 * 資料公式 * 網站特效 * ................ 詳情請檢視 https://theme-stun.github.io/docs/zh-CN/ ## 參考 [1].[菜鳥教程：NodeJS安裝配置](https://www.runoob.com/nodejs/nodejs-install-setup.html) [2].[Stun主題指南](https://theme-stun.github.io/docs/zh-CN/) [3].[靜態部落格搭建](https://www.yuque.com/u2063760/xbfae1/gf45k1) [4].[_more截斷文章_多標籤新增](https://blog.csdn.net/Aoman_Hao/article/details/79291741) [5].[在gitee上部署靜態網站（或者個人部落格）](https://blog.csdn.net/zhangyu4863/article/details/80473412) 本文作者: [Both Savage](https://bothsavage.github.io/) > 本文連結: [https://bothsavage.github.io/2020/12/19/%E6%9D%82%E9%A1%B9/Hexo%E7%BB%93%E5%90%88Stun%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%85%A5%E5%9C%9F/](https://bothsavage.github.io/2020/12/19/%E6%9D%82%E9%A1%B9/Hexo%E7%BB%93%E5%90%88Stun%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%85%A5%E5%9C%9F/) 版權宣告: 本部落格所有文章除特別宣告外，均採用 [BY-NC-SA](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en) 許可協議。轉載請註明