小白初入Hexo
搭建
27 分钟 读完 (大约 4025 个字) 0次访问

小白初入Hexo

1 前言

使用github + hexo搭建个人博客，需要进行一定的步骤：

  • 安装Git

  • 安装Node.js

  • 安装Hexo

  • GitHub创建个人仓库

  • 生成SSH添加到GitHub

  • 将hexo部署到GitHub

  • 更换主题

  • 发布文章

  • hexo常用命令

2 搭建hexo博客

2.1 安装Git

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。

windows：到git官网上进行下载,Download git,下载后会有一个Git Bash的命令行工具，以后就用这个工具来使用git。

linux：对linux来说实在是太简单了，因为最早的git就是在linux上编写的，只需要一行代码

1
sudo apt-get install git

安装好后，用git -version 来查看一下版本

2.2 安装node.js

Hexo是基于node.js编写的，所以需要安装一下node.js和里面的npm工具。

windows：node.js选择LTS版本就行了。

linux：

1
2
sudo apt-get install nodejs
sudo apt-get install npm

安装完后，打开命令行

1
2
node -v
npm -v

检查一下有没有安装成功

顺便提醒一下，windows在git安装完后，就可以直接使用git bash来敲命令行了。

2.3 安装hexo

前面git和node.js安装好后，就可以安装hexo了，你可以先创建一个文件夹floder，然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash打开）。

输入命令

1
npm install -g hexo-cli

依旧用hexo -v查看一下版本

至此就全部安装完了。

接下来初始化一下hexo

1
hexo init “floder”

这个floder可以自己取什么名字都行，然后

1
2
cd “floder” //进入文件夹
npm install

新建完成后，指定文件夹目录下有：

  • node_modules: 依赖包
  • public：存放生成的页面
  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题
  • ** _config.yml: 博客的配置文件**
1
2
hexo generate //简化hexo g
hexo server   //简化hexo s

打开hexo的服务，在浏览器输入localhost:4000就可以看到你生成的博客了（由于刚开始没有主题或index.html，出现白屏属于正常现象），使用ctrl+c可以把服务关掉。

2.4 GitHub创建个人仓库

首先，你先要有一个GitHub账户，去注册一个吧。

2.5 生成SSH添加到GitHub

回到你的git bash中，

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

可以用以下两条，检查一下你有没有输对

1
2
git config user.name
git config user.email

然后创建SSH,连续三次回车

1
ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

而后在GitHub的setting中，找到SSH keys的设置选项，点击New SSH key 把你的id_rsa.pub里面的信息复制进去。

在gitbash中，查看是否成功

1
ssh -T git@github.com

2.6 将hexo部署到GitHub

这一步，我们就可以将hexo和GitHub关联起来，也就是将hexo生成的文章部署到GitHub上，打开站点配置文件 _config.yml，翻到最后，修改为 YourgithubName就是你的GitHub账户

1
2
3
4
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: master

这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

1
npm install hexo-deployer-git --save

然后

1
2
3
hexo clean
hexo generate
hexo deploy

其中 hexo clean清除了你之前生成的东西，也可以不加。 hexo generate 顾名思义，生成静态文章，可以用 hexo g缩写 hexo deploy 部署文章，可以用hexo d缩写

注意deploy时可能要你输入username和password。

过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了！！

2.7 更换主题

这里我们首先要下载主题，推荐一种我是用的主题icarus（hexo-theme-icarus）

页面预览：

将文件下载解压后放到hexo项目中的themes文件夹里。

现在需要更改配置文件，首先要知道在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml，它们均是用于站点配置使用的。其中，一份位于站点根目录下（比如我的：F:\IDEA\gitProject\blog\myblog_config.yml），主要包含 Hexo 本身整站的配置；另一份位于主题目录（F:\IDEA\gitProject\blog\myblog\themes\icarus_config.yml）下，这份配置由主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为站点配置文件， 后者称为主题配置文件。下面我们先来看看站点配置文件的配置修改。

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
#主页标题
title: 程序员的江湖
#副标题
subtitle: 'xx的博客'
# 网站描述
description: '互联网行业新知，终身学习践行者'
keywords:
#作者，左下角显示
author: 姓名
#设置头像
avatar: /images/xx.jpg
#语言
language: zh-CN
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
#填自己的github pages网址
url: http://yourname.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false   #发布图片需要改为true，后面有说明
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# 主题切换（在themes文件夹里）
theme: icarus

# Deployment
## Docs: https://hexo.io/docs/deployment.html
#自己的仓库
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: master

下面是icarus的主题配置文件.config_xml

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
# Version of the Icarus theme that is currently used
version: 2.6.0
# Path or URL to the website's icon
favicon: /images/favicon.svg
# Additional HTML meta tags in an array.
meta: 
# canonical_url of your site
canonical_url: 
# language
# Path or URL to RSS atom.xml
rss: 
# Path or URL to the website's logo to be shown on the left of the navigation bar or footer
logo: /images/logo.svg
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
    # Facebook App ID
    fb_app_id: 
    # Facebook Admin ID
    fb_admins: 
    # Twitter ID
    twitter_id: 
    # Twitter site
    twitter_site: 
    # Google+ profile link
    google_plus: 
# Navigation bar link settings
navbar:
    # Navigation bar menu links
    menu:
        主页: /
        归档: /archives
        分类: /categories
        标签: /tags
        关于: /about
    # Navigation bar links to be shown on the right
    links:
        Download on GitHub:
            icon: fab fa-github
            url: 'https://github.com/ppoffice/hexo-theme-icarus'
# Footer section link settings
footer:
    # Links to be shown on the right of the footer section
    links:
        Creative Commons:
            icon: fab fa-creative-commons
            url: 'https://creativecommons.org/'
        Attribution 4.0 International:
            icon: fab fa-creative-commons-by
            url: 'https://creativecommons.org/licenses/by/4.0/'
        Download on GitHub:
            icon: fab fa-github
            url: 'https://github.com/yourname'
# Article display settings
article:
    # Code highlight settings
    highlight:
        # Code highlight themes
        # https://github.com/highlightjs/highlight.js/tree/master/src/styles
        theme: atom-one-light
        # Show code copying button
        clipboard: true
        # Default folding status of the code blocks. Can be "", "folded", "unfolded"
        fold: unfolded
    # Whether to show article thumbnail images
    thumbnail: true
    # Whether to show estimate article reading time
    readtime: true
# Search plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
    # Name of the search plugin
    type: insight
# Comment plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
comment:
    # Name of the comment plugin
    type: valine
    enable: true
    app_id: xxx
    app_key: xxx
    notify: false
    verify: false
    avatar: "mm" 
    placeholder: 要不要说点啥... 
    shortname: 
# Donation entries
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Donation
donate:
    -
        # Donation entry name
        type: alipay
        # Qrcode image URL支付宝二维码
        qrcode: '/images/xxx.jpg'
    -
        # Donation entry name
        type: wechat
        # Qrcode image URL微信二维码
        qrcode: '/images/xxx.jpg'
# Share plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
    # Share plugin name
    type: sharejs 
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # left sidebar settings
    left:
        # Whether the left sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: false
    # right sidebar settings
    right:
        # Whether the right sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: false
# Sidebar widget settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
    -
        # Widget name
        type: profile
        # Where should the widget be placed, left or right
        position: left
        # Author name to be shown in the profile widget
        author: 姓名
        # Title of the author to be shown in the profile widget
        author_title: Java软件开发工程师
        # Author's current location to be shown in the profile widget
        location: 陕西 西安
        # Path or URL to the avatar to be shown in the profile widget
        avatar: /images/fh.jpg
        # Email address for the Gravatar to be shown in the profile widget
        gravatar: 
        # Whether to show avatar image rounded or square
        avatar_rounded: false
        # Path or URL for the follow button
        follow_link: 'https://github.com/yourname'
        # Links to be shown on the bottom of the profile widget
        social_links:
            Github:
                icon: fab fa-github
                url: 'https://github.com/yourname'
            Facebook:
                icon: fab fa-facebook
                url: 'https://facebook.com'
            Twitter:
                icon: fab fa-twitter
                url: 'https://twitter.com'
            Dribbble:
                icon: fab fa-dribbble
                url: 'https://dribbble.com'
            RSS:
                icon: fas fa-rss
                url: /
    -
        # Widget name
        type: toc
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: links
        # Where should the widget be placed, left or right
        position: left
        # Links to be shown in the links widget
        links:
            Hexo: 'https://hexo.io'
            PPOffice: 'https://github.com/ppoffice'
    -
        # Widget name
        type: category
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: tagcloud
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: recent_posts
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: archive
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: tag
        # Where should the widget be placed, left or right
        position: right
# Other plugin settings
plugins:
    # Enable page animations
    animejs: true
    # Enable the lightGallery and Justified Gallery plugins
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
    gallery: true
    # Enable the Outdated Browser plugin
    # http://outdatedbrowser.com/
    outdated-browser: true
    # Enable the MathJax plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
    mathjax: true
    # Show the back to top button on mobile devices
    back-to-top: true
    # Google Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
    google-analytics:
        # Google Analytics tracking id
        tracking_id: 
    # Baidu Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
    baidu-analytics:
        # Baidu Analytics tracking id
        tracking_id: 
    # Hotjar user feedback plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
    hotjar:
        # Hotjar site id
        site_id: 
    # Show a loading progress bar at top of the page
    progressbar: true
    # BuSuanZi site/page view counter
    # https://busuanzi.ibruce.info
    busuanzi: true
busuanzi:
    enable: true
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 访客数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>  阅读数
  page_pv_footer:
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
    # Name or URL of the JavaScript and/or stylesheet CDN provider
    cdn: jsdelivr
    # Name or URL of the webfont CDN provider
    fontcdn: google
    # Name or URL of the webfont Icon CDN provider
    iconcdn: fontawesome

效果预览：

2.8 发布文章

定位到我们的hexo根目录，执行命令：

1
hexo new 'myblog'

hexo会帮我们在_posts下生成相关md文件：

我们只需要打开这个文件就可以开始写博客了，默认生成如下内容：

当然你也可以直接自己新建md文件，用这个命令的好处是帮我们自动生成了时间。

一般完整格式如下：

1
2
3
4
5
6
7
8
---
title: postName #文章页面上的显示名称，一般是中文
date: 2020-04-01 9:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---
以下是正文

那么hexo new page ‘postName’命令和hexo new ‘postName’有什么区别呢？

1
hexo new page "myblog1"

生成如下：

最终部署时生成：hexo\public\myblog1\index.html，但是它不会作为文章出现在博文目录。

如果文章中有图片呢？

安装图片插件

1
npm install hexo-asset-image --save

在根目录_config.yml配置文件中，修改为 post_asset_folder: true。新建文章blog时，这个时候会生成一个blog.md 和 blog的文件夹

1
2
3
4
5
themes 
	_posts #文章目录
		blog		#blog页面中的图片	
			aaa.jpg	#页面图片
		blog.md		#blog页面

然后就可以在文章中引用了图片了，比如：aaa.jpg文章中的引用方法是

1
{% asset_img aaa.jpg 图片描述 %}

这样图片显示就ok了，当然也可以存到云上呦！

默认情况下，生成的博文目录会显示全部的文章内容，如何设置文章摘要的长度呢？

答案是在合适的位置加上即可，例如：

1
2
3
4
5
6
7
8
9
10
# 前言使用github pages服务搭建博客的好处有：
1. 全是静态文件，访问速度快；
2. 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
3. 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；

<!--more-->

4. 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
5. 博客内容可以轻松打包、转移、发布到其它平台；
6. 等等；
1
2
3
hexo g
hexo s
hexo d

部署上去后访问，效果如下

2.9 hexo常用命令

常见命令

1
2
3
4
5
6
7
hexo new "postName"			#新建文章
hexo new page "pageName"	#新建页面
hexo generate				#生成静态页面至public目录
hexo server					#开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy					#部署到GitHub
hexo help					#查看帮助
hexo version				#查看Hexo的版本

缩写：

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令：

1
2
hexo s -g 	#生成并本地预览
hexo d -g 	#生成并上传

到这hexo博客基本使用就已经OK了，博客中畅游吧，老铁！

#

喜欢这篇文章？打赏一下作者吧

emqttd服务搭建
第一个帖子

评论

关注我

链接

分类

最新文章

归档

标签

Git-api 1
emqttd 1
emqttd搭建 1
hexo搭建，博客 1
人脸识别，SDK 1
工具类 1

最新文章

归档

标签

Git-api 1
emqttd 1
emqttd搭建 1
hexo搭建，博客 1
人脸识别，SDK 1
工具类 1
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×