uxawseny

0%

Hexo新版与新版本next安装配置完整流程(持续更新)

发表于 更新于

1.安装git

  • 直接下载git.exe(windows)或者通过brew安装git即可(mac)

2.安装node12

  • 直接官网下载node.msi(windows)或者dmg文件即可(mac)

3.安装新版hexo

  • 参考链接

https://hexo.io/zh-cn/docs/setup

1
2
3
4
5
6
7
8
npm install -g hexo-cli
hexo -v
hexo init hexo
cd hexo
npm install

不是到github需要安装git
npm install --save hexo-deployer-git

4.下载next

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
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
cd hexo
git clone https://github.com/theme-next/hexo-theme-next themes/next
hexo下的hexo配置文件，
_config.yml

1.配置主题:
 theme: next
 
2.配置语言:
 language: zh-Hans
 
3.站点描述等:
  # Site
  title: Hexo
  subtitle: ''
  description: ''
  keywords:
  author: John Doe
  #language: en
  timezone: ''
  
  改为：
  # Site
  title: uxawseny
  subtitle:
  description: uxawseny@gmail.com
  author: uxawseny
  language: zh-CN
  #language: zh-Hans
  timezone:
  
4.hexo new时同步创建对应文件夹
	###sudo npm install https://github.com/CodeFalling/hexo-asset-image --save
	###安装hexo-asset-image：npm install hexo-asset-image --save
	
  post_asset_folder: false
	改为:
  ##新建文章时，在相同目录下创建同名文件夹
  post_asset_folder: true
  
5.github部署设置
  deploy:
    type: ''
    
  改为：
  deploy:
    type:  git
    repo:  git@github.com:uxawseny/uxawseny.github.io.git
    branch:  master
  ## repo:  https://git.coding.net/uxaw/uxaw.coding.me.git
  ## https://github.com/uxawseny/uxawseny.github.io.git
  
  6.文章摘要(新版next主题移除了auto_excerpt)
    excerpt_description:true（next主题里的配置）

 		新版next主题移除了auto_excerpt功能，需要单独安装，安装完增加上面的配置即可：
 		https://github.com/ashisherc/hexo-auto-excerpt
 		
 		npm install --save hexo-auto-excerpt
 		hexo的配置文件增加：
 		excerpt_length: 400
 		
  7.hexo-neat 静态资源压缩
		npm install hexo-neat --save
		
    # 博文压缩
    neat_enable: true
    # 压缩html
    neat_html:
      enable: true
      exclude:
    # 压缩css  
    neat_css:
      enable: true
      exclude:
        - '**/*.min.css'
    # 压缩js
    neat_js:
      enable: true
      mangle: true
      output:
      compress:
      exclude:
        - '**/*.min.js'
        - '**/jquery.fancybox.pack.js'
        - '**/index.js'

next配置

【必读】更新说明及常见问题 · Issue #4 · next-theme/hexo-theme-next (github.com)

  • 配置参考

https://blog.csdn.net/sinat_33381791/article/details/82767481

http://theme-next.iissnan.com/getting-started.html

  • next自定义配置文件_config.next.yml(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
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
############################## 1.主题模式
scheme: Gemini

############################## 2.底部时间
footer:
  powered: false
  since: 2016
  # color: "#808080"

# footer:
#   # Specify the date when the site was setup. If not defined, current year will be used.
#   #since: 2016
#   # Icon between year and copyright info.
#   icon:
#     # Icon name in Font Awesome. See: https://fontawesome.com/icons
#     name: heart
#     # If you want to animate the icon, set it to true.
#     animated: false
#     # Change the color of icon, using Hex Code.
#     color: "#808080"

############################## 3.语言切换按钮
language_switcher: true

############################## 4.本地搜索
##############################npm install hexo-generator-searchdb --save
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

############################## 5.ico图标
# favicon:
#   small: /img/favicon.ico
#   medium: /img/favicon.ico
#   apple_touch_icon: //img/favicon.ico
#   safari_pinned_tab: /img/favicon.ico


############################## 6.右上角github地址
github_banner:
  enable: true
  permalink: https://github.com/uxawseny
  title: Follow me on GitHub


############################## 7.边栏目录
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

############################## 8.代码拷贝和高亮
############################## npm i hexo-renderer-swig
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

############################## 9.栏目分类
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

############################################7.头像
avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /img/avatar.jpg
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

############################################8.头像下方的github图标
social:
  GitHub: https://github.com/uxawseny || github
  # E-Mail: mailto:uxawseny@gmail.com || envelope
  # Weibo: https://weibo.com/3826549465 || weibo
  #Google: https://plus.google.com/yourname || google
  # Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype


############################################9.侧边栏位置
sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

安装最新版hexo 5.x和next-v8后，所有需要另外安装的npm模块整理

  • 模块清单

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    1.安装hexo与卸载：
    sudo npm uninstall hexo-cli -g
    sudo npm install -g hexo-cli

    2.额外模块：
    ##git
    npm install --save hexo-deployer-git
    ##静态资源压缩
    npm install hexo-neat --save
    ##本地搜索
    npm install hexo-generator-searchdb --save 
    ##文章摘要
    npm install --save hexo-auto-excerpt
    ##本地图片
    npm install hexo-asset-image --save
    sudo npm install https://github.com/CodeFalling/hexo-asset-image --save
    ##代码拷贝按钮
    npm i hexo-renderer-swig

    ##安装hexo时的warning信息：
    warning hexo-renderer-stylus > stylus > css-parse > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    warning hexo-renderer-stylus > stylus > css-parse > css > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    warning hexo-renderer-stylus > stylus > css-parse > css > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated