Hexo結合Stun靜態博客搭建從入門到入土

摘要

• 安裝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 許可協議。轉載請註明出處！