蓝狐狸的博客
蓝狐狸的博客

博客网站搭建

蓝狐狸 蓝狐狸 收录于 默认分类
  约 1200 字 预计阅读 6 分钟 
注意
本文最后更新于 2023-07-24，文中内容可能已过时。

安装部署

安装NodeJs：https://nodejs.org/en/download

安装Git：https://git-scm.com/download/win

安装hexo，输入以下命令

1
2
3
4

npm install hexo-cli -g   # 安装hexo脚手架
hexo init blog            # blog是自定义文件夹名字
cd blog
hexo server    # 启动hexo

注意：网络问题可能有点慢。

安装插件（看个人情况安装）

1
2
3
4
5
6
7
8

npm install hexo-renderer-pug hexo-renderer-stylus --save # 必须安装，不然无法运行，会报错
npm install https://github.com/BluefoxQAQ/hexo-asset-image.git --save # 插入图片用的插件
npm install hexo-generator-search --save # 安装搜索插件
# 主题使用本地静态js，cdn配置相关，可选。需要和主题版本最新，否则可能报错。见下文butterfly主题配置cdn
npm install hexo-butterfly-extjs --save
npm install hexo-deployer-git --save  # 安装github部署插件
npm install hexo-deployer-ftpsync --save  # 安装FTP部署插件
npm install https://github.com/BluefoxQAQ/hexo-deployer-ali-oss.git --save # 阿里云OSS一键部署插件

安装butterfly主题：在根目录运行命令

1

git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

官方文档：https://butterfly.js.org/posts/21cfbf15/

hexo简单命令 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

hexo new "文章名字"       # 新建文章
hexo new post -p /后端/test.md # 在指定目录下新建文章
hexo new page "页面名字"  # 新建页面
hexo generate            # 生成静态页面至public目录
hexo server              # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo s -p 5000           # 更换端口
hexo deploy              # 上传部署，大部分人是部署到GitHub，需要配置
hexo clean               # 清除缓存
hexo help                # 查看帮助
hexo version             # 查看Hexo的版本
缩写命令：
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

配置文件

hexo配置 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Site
title: 蓝狐狸
subtitle: Hello and welcome
description: '我很懒'
keywords:
author: 蓝狐狸
language: zh-CN
timezone: ''

# 设置URL
url: https://www.lanhuli.top
# 自定义文章链接，这里使用hash值
permalink: :hash.html
# 资源文件夹，创建文章时自动创建同名文件夹
post_asset_folder: true
# 更换主题
theme: butterfly

使用ftp上传
deploy:
  type: ftpsync #上传方式，固定ftpsync
  host: xxx.xxx.xxx.xxx #ftp地址
  user: ****	#帐号
  pass: ****	#密码
  remote: /webroot #上传至哪个目录
  port: 21	#端口

butterfly主题配置

顶部导航栏

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

menu:
  首页: / || fas fa-home
  # 具体分类||fas fa-archive:
    # web: /categories/web前端/ || fas fa-music
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  # List||fas fa-list:
    # Music: /music/ || fas fa-music
    # Movie: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码块：只修改样式为mac，其它默认即可

1

highlight_theme: mac

网站图标：默认使用的是butterfly主题的图标，在\blog\themes\butterfly\source\img目录下

1
2

# Favicon（網站圖標）
favicon: /img/favicon.png

头像设置

1
2
3

avatar:
  img: /img/avatar.jpg    # 自定义图片
  effect: false   # 不开启旋转

主页背景图片：

1
2

# The banner image of home page
index_img: /img/background.png

主页侧边栏设置(aside)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# aside (側邊欄)
# --------------------------------------
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right，显示在右边
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: false  # 默认true，不喜欢，改为false
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx
  card_announcement:
    enable: true
    content: 随便写写，随缘更新。
  card_recent_post:
    enable: true  # 最新文章
    limit: 5 # if set 0 will show all
    sort: date # date or updated
    sort_order: # Don't modify the setting unless you know how it works
  card_categories:
    enable: false  # 显示所有分类
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
    sort_order: # Don't modify the setting unless you know how it works
  card_tags:
    enable: false  # 显示所有标签
    limit: 40 # if set 0 will show all
    color: false
    orderby: random # Order of tags, random/name/length
    order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
    sort_order: # Don't modify the setting unless you know how it works
  card_archives:
    enable: false  # 显示归档
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
    sort_order: # Don't modify the setting unless you know how it works
  card_webinfo:
    enable: false  # 显示网站咨询
    post_count: true
    last_push_date: true
    sort_order: # Don't modify the setting unless you know how it works
  card_post_series:
    enable: true  # 排序
    orderBy: 'date' # Order by title or date
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending

顶部图片：直接透明化

1
2

# If the banner of page not setting, it will show the top_img
default_top_img: Transparent

404页面

1
2
3
4

error_404:
  enable: true  # 开启主题自带的404页面
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

文章目录设置

1
2
3
4
5
6
7
8

# toc (目錄)
toc:
  post: true  # 文章页是否显示 TOC
  page: false  # 普通页面是否显示 TOC
  number: true # 是否显示章节数
  expand: true  # 是否展开 TOC
  style_simple: true # for post  简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）
  scroll_percent: true # 是否显示滚动进度百分比

文章过期提醒：以更新时间为基准

1
2
3
4
5
6
7
8
9

# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
  message_prev: 这篇文章距离更新已经过了
  message_next: 天，其中某些内容可能已经过时了。
  # 这篇文章距离更新已经过了 365 天，其中某些内容可能已经过时了。

文章分享

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

# 注意：只能二选一
# Share.js
# https://github.com/overtrue/share.js
sharejs:
  enable: true  # 默认true，不喜欢分享，可以设置为false
  sites: facebook,twitter,wechat,weibo,qq

# AddToAny
# https://www.addtoany.com/
addtoany:
  enable: false  # 同上
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

设置网站背景

1
2

background: url(/img/background.png) # 完美
footer_bg: Transparent

动态彩带背景：没开启

1
2
3
4

# Fluttering Ribbon (動態彩帶)
canvas_fluttering_ribbon:
  enable: false
  mobile: false

鼠标点击特效：看你喜欢哪个，我用的烟火特效

1
2
3
4

fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

页面美化：没开启，个人觉得不开也挺好的。

1
2
3
4
5
6

# Beautify (美化頁面顯示)
beautify:
  enable: false
  field: post # site/post
  title-prefix-icon: # '\f0c1'
  title-prefix-icon-color: # '#F47466'

全局字体设置

1
2
3
4
5
6
7

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: Microsoft YaHei
  code-font-family: consolas

主页 subtitle

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - 生活并不会总被预料，有意外才是生活。

CDN更换

网站有时候样式显示不出来，可能是CDN挂了。默认是jsdelivr，可以改成unpkg

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
  # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev version can only choose. ( dev版的主題只能設置為 local )
  internal_provider: local

  # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # when set it to local, you need to install hexo-butterfly-extjs
  third_party_provider: unpkg

如果使用本地资源，需要改为 third_party_provider: local，同时安装hexo-butterfly-extjs插件。

注意：hexo-butterfly-extjs插件对butterfly主题版本有一定要求，建议使用最新版本主题或安装低版本插件，否则运行hexo g命令时报错。

多端同步问题

在多台电脑上编辑博客内容，可以用git分支进行同步，但是个人觉得每次都要pull和push有点麻烦。我个人使用坚果云同步source目录，配置文件和模板文件上传云盘，至于hexo环境和主题只需要在开始安装一次就行。

当我更换新电脑时，重新安装hexo环境、主题、插件，把配置文件从云盘下载到根目录，在用坚果云将source目录同步过来就行了。这样，不管在哪一台电脑上编辑文章，坚果云会自动帮我同步至最新。

npm命令

查看全局安装的包：npm ls -g

查看当前项目安装的包：npm ls

生成github的ssh秘钥 

1
2

ssh-keygen -t rsa
cat id_rsa.pub
更新于 2023-07-24 
CC BY-NC-SA 4.0
Blog
返回 | 主页
0%