Hexo結合Stun靜態部落格搭建從入門到入土

BothSavage發表於2020-12-19
Hexo

摘要

  • 安裝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.主頁不顯示文章全部

 上面是顯示內容
 <!--more-->

其他高階功能

stun主題支援

  • 評論系統
  • 站長工具
  • 資料公式
  • 網站特效
  • ................

詳情請檢視

https://theme-stun.github.io/docs/zh-CN/

參考

[1].菜鳥教程：NodeJS安裝配置

[2].Stun主題指南

[3].靜態部落格搭建

[4]._more截斷文章_多標籤新增

[5].在gitee上部署靜態網站（或者個人部落格）
本文作者: Both Savage

本文連結: 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 許可協議。轉載請註明出處！

相關文章