博客搭建

本文最后更新于：2021年7月24日 晚上

Github Page搭建静态博客

  1. 注册github

  2. 建立一个仓库，名称和你的账号名称一致，例如我的账号为flyingcherryblossoms，那么仓库就为flyingcherryblossoms/flyingcherryblossoms.github.io，我的已经搭建了所以这里提示已经存在。

    image-20210710105831785

  3. 打开仓库->Settings->Pages->Change Theme

    image-20210710110824677

    然后你就可以访问你的网站了。

域名解析

我购买的阿里云的服务器时直接购买的域名，服务器到期没有续费，续了个域名😎

如下：

image-20210710110909597

两个A记录为Github的服务器地址

www记录为你的github仓库分配的域名

然后在你的github仓库Settings->Pages下设置你的域名即可：

image-20210710111048768

需要等待一会儿，等待其解析。

PicGo+Gitee搭建图床

解决Markdown中插入图片的问题

  1. gitee建立一个公开仓库，然后建立Master分支并生成ReadMe，然后去设置中生成一个令牌，描述随便填，只需要project权限（丢了得重新生成，注意保存！！！）：

    image-20210710155800694

  2. 然后下载安装PicGo

    然后打开后下载插件，直接下载gitee-smart（gitee插件和这个只能存在一个？我下载了一个另一个就无法安装）就行了：

    image-20210710155946007 image-20210710160024360 image-20210710160111529
    • repo：就是你刚建立的仓库的用户名/仓库名，找不到的可以直接复制仓库的url
    image-20210710160214398
    • branch：分支，这里写上master
    • token：填入码云的私人令牌
    • path：路径，一般写上img
    • customPath：提交消息，这一项和下一项customURL都不用填。在提交到码云后，会显示提交消息，插件默认提交的是 Upload 图片名 by picGo - 时间

    另一个插件gitee配置和这个类似：

    • url：图床网站，这里写码云的主页 https://gitee.com

    • owner：所有者，写上你的码云账号名，如果你不知道你的账号名，进入你刚才的仓库，浏览器url里面有

    • repo：仓库名称，只要写上仓库名称就行，比如我自己的仓库blogImage

    • path：写上路径，一般是img，这几个项都不用加“ / “符号

    • token：刚才你获取的个人令牌，两个插件是通用的，如果你用了另一个再来用这个，它会自动读取另一个插件的部分配置，不用重新申请

    • message：不用填

  1. 配置typora

    image-20210711220009690

    不要选对网络位置的图片应用上述规则，不然你复制一张已经上传的图片进行粘贴，它还会给你上传一次

配置主题

我用的主题是Fluid，请自行查看如何配置

Fluid配置

Hexo官网配置

我的配置_config.fluid.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
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
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 卡西莫多の礼物
subtitle: ''
description: ''
keywords:
author: Quosimodo
language: zh-CN
timezone: 'Asia/Shanghai'

# 文章永久链接样式
permalink: :category/:title/

# 用于浏览器标签的图标
favicon: /img/avatar.jpg
# 用于苹果设备的图标
apple_touch_icon: /img/favicon.png

custom_html:

code:
  # 是否开启复制代码的按钮
  copy_btn: true
  # 代码高亮
  highlight:
    enable: true
    highlightjs:
      # 是否根据 style 改变代码背景色（如果 style 是深色背景别忘了开启此项）
      bg_color: true

# 一些好玩的功能
fun_features:
  # 为 subtitle 添加打字机效果
  typing:
    enable: true
    # 打印速度，数字越大越慢
    typeSpeed: 110
    # 游标字符
    cursorChar: "_"
    # 是否循环播放效果
    loop: false

navbar:
  # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示
  # The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
  blog_title: "卡西莫多の礼物"

  # 导航栏毛玻璃特效，实验性功能，可能会造成页面滚动掉帧和抖动，部分浏览器不支持会自动不生效
  # Navigation bar frosted glass special animation. It is an experimental feature
  ground_glass:
    enable: true
    # 模糊像素，只能为数字，数字越大模糊度越高
    px: 3
    # 不透明度，数字越大透明度越低，注意透明过度可能看不清菜单字体
    alpha: 0.5

  # 导航栏菜单，可自行增减，key 用来关联 languages/*.yml，如不存在关联则显示 key 本身的值；icon 是 css class，可以省略；增加 name 可以强制显示指定名称
  # Navigation bar menu. `key` is used to associate languages/*.yml. If there is no association, the value of `key` itself will be displayed; if `icon` is a css class, it can be omitted; adding `name` can force the display of the specified name
  menu:
    - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
    - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
    - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }
    - {
      key: 'Others',
      icon: 'iconfont icon-books',
      submenu: [

        { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" },
        { key: "about", link: "/about/", icon: "iconfont icon-user-fill" },
        { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }
      ]}
    # - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
    # - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
    # - { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }

#---------------------------
# 首页
# Home Page
#---------------------------
index:
  # 首页 Banner 头图，可以是相对路径或绝对路径，以下相同
  banner_img: /img/banner.jpg
  # 头图高度，屏幕百分比
  banner_img_height: 100
  # 头图黑色蒙版的不透明度，available: 0 - 1.0， 1 是完全不透明
  banner_mask_alpha: 0.3
  # 首页副标题的独立设置
  slogan:
    enable: true
    # 为空则按 hexo config.subtitle 显示
    text: '云中作诗 泥里生活 岁月里洒脱'

  math:
    enable: true
    specific: false
    engine: mathjax

  # 自动截取文章摘要
  auto_excerpt:
    enable: true

  # 打开文章的标签方式
  # Available: _blank | _self
  post_url_target: _blank

  # 是否显示文章信息（时间、分类、标签）
  post_meta:
    date: true
    category: true
    tag: true

  # 文章通过 sticky 排序后，在首页文章标题前显示图标
  post_sticky:
    enable: true
    icon: "iconfont icon-top"

#---------------------------
# 归档页
# Archive Page
#---------------------------
archive:
  banner_img: /img/banner.jpg
  banner_img_height: 60
  banner_mask_alpha: 0.3
  subtitle:

#---------------------------
# 分类页
# Category Page
#---------------------------
category:
  enable: true
  banner_img: /img/banner.jpg
  banner_img_height: 60
  banner_mask_alpha: 0.3
  subtitle:

  # 分类的排序字段，前面带减号是倒序，不带减号是正序
  order_by: "-length"

  # 层级的折叠深度，0 是全部折叠，大于 0 后如果存在子分类则默认展开
  collapse_depth: 0

  # 文章的排序字段，前面带减号是倒序，不带减号是正序
  post_order_by: "-date"

  # 单个分类中折叠展示文章数的最大值，超过限制会显示 More，0 则不限制
  post_limit: 10


#---------------------------
# 标签页
# Tag Page
#---------------------------
tag:
  enable: true
  banner_img: /img/banner.jpg
  banner_img_height: 80
  banner_mask_alpha: 0.3
  subtitle:


#---------------------------
# 关于页
# About Page
#---------------------------
about:
  enable: true
  banner_img: /img/banner.jpg
  banner_img_height: 60
  banner_mask_alpha: 0.3
  subtitle:
  avatar: /img/avatar.jpg
  name: "Quosimodo"
  intro: "谁知我知你 我知你之深"
  icons:
    - { class: "iconfont icon-github-fill", link: "https://github.com/flyingcherryblossoms", tip: "GitHub" }
    - { class: "iconfont icon-qq-fill", qrcode: "/img/qcode.jpg" }


#---------------------------
# 文章页
# Post Page
#---------------------------
post:
  banner_img: /img/banner.jpg
  banner_img_height: 70
  banner_mask_alpha: 0.3

  # 文章在首页的默认封面图，当没有指定 index_img 时会使用该图片，若两者都为空则不显示任何图片
  default_index_img: /img/banner.jpg

  # 在文章开头显示文章更新时间，该时间默认是 md 文件更新时间，可通过 front-matter 中 `updated` 手动指定（和 date 一样格式）
  updated:
    enable: true

    # 描述文字
    # Descriptive text before date
    content: 本文最后更新于：

    # 是否使用相对时间表示，比如："3 天前"
    # If true, it will be a relative time, such as: "3 days ago"
    relative: false

  # 文章右侧目录
  # Table of contents (TOC)
  toc:
    # 层级的折叠深度，0 是全部折叠，大于 0 后如果存在下级标题则默认展开
    collapseDepth: 5

  # 流程图，基于 mermaid-js，具体请见：https://hexo.fluid-dev.com/docs/guide/#mermaid-流程图
  mermaid:
    # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `mermaid: true`
    enable: true

    # 开启后，只有在文章 Front-matter 里指定 `mermaid: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
    specific: false

#---------------------------
# 友链页
# Links Page
#---------------------------
links:
  enable: true
  banner_img: /img/banner.jpg
  banner_img_height: 60
  banner_mask_alpha: 0.3
  subtitle:
  # 友链的成员项
  # Member item of page
  items:
    - {
      title: "uint128",
      intro: "船舶专业大学生，喜欢计算机、摄影……",
      link: "https://uint128.com/",
      avatar: "https://uint128.com/about/wooooooo.jpg"
    }
    - {
      title: "Shen Xiaojian",
      intro: "在校大学生 / 热爱Linux和徒步",
      link: "https://www.sxj.xyz/",
      avatar: "https://cdn.jsdelivr.net/gh/shenxiaojian/ImageHost/20210214163444.png"
    }

  # 当成员头像加载失败时，替换为指定图片
  # When the member avatar fails to load, replace the specified image
  onerror_avatar: /img/avatar.png

# 网页访问统计
web_analytics:  # 网页访问统计
  enable: true
  # 百度统计的 Key，值需要获取下方链接中 `hm.js?` 后边的字符串
  # See: https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376
  baidu: 'c09ebf4b1c4e85a78c41088b03767102'

footer:
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>
    <div style="text-align: center;">Copyright © by Quosimodo All Rights Reserved.</div>
  '

  # 展示网站的 PV、UV 统计数
  # Display website PV and UV statistics
  statistics:
    enable: true
    # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
    source: "busuanzi"
    # 页面显示的文本，{}是数字的占位符（必须包含)，下同
    pv_format: "总访问量 {} 次"
    uv_format: "总访客数 {} 人"

  # 国内大陆服务器的备案信息
  # For Chinese mainland website policy, other areas keep disable
  beian:
    enable: true
    # ICP证号
    icp_text: 渝ICP备19011883号-1
    # 公安备案号，不填则只显示ICP
    police_text: 
    # 公安备案的编号，用于URL跳转查询
    # police_code: 12345678
    # 公安备案的图片. 为空时不显示备案图片
    # police_icon: /img/police_beian.png

然后你就可以开始写文章了

写作

如何开始请查看：new命令的使用，写作 ，Front-matter

new

1
$ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

1
$ hexo new "post title with whitespace"
参数 描述
-p, --path 自定义新文章的路径
-r, --replace 如果存在同名文章，将其替换
-s, --slug 文章的 Slug，作为新文章的文件名和发布后的 URL

默认情况下，Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。你可以使用 --path 参数来覆盖上述行为、自行决定文件的目录：

1
hexo new page --path about/me "About me"

以上命令会创建一个 source/about/me.md 文件，同时 Front Matter 中的 title 为 "About me"

注意！title 是必须指定的！如果你这么做并不能达到你的目的：

1
hexo new page --path about/me

此时 Hexo 会创建 source/_posts/about/me.md，同时 me.md 的 Front-matter 中的 title 为 "page"。这是因为在上述命令中，hexo-cli 将 page 视为指定文章的标题、并采用默认的 layout。

你可以执行下列命令来创建一篇新文章或者新的页面。

1
$ hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

布局（Layout）

Hexo 有三种默认布局：post、page 和 draft。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局 路径
post source/_posts
page source
draft source/_drafts

文件名称

Hexo 默认以标题做为文件名称，但您可编辑 new_post_name 参数来改变默认的文件名称，举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

变量 描述
:title 标题（小写，空格将会被替换为短杠）
:year 建立的年份，比如， 2015
:month 建立的月份（有前导零），比如， 04
:i_month 建立的月份（无前导零），比如， 4
:day 建立的日期（有前导零），比如， 07
:i_day 建立的日期（无前导零），比如， 7

草稿

刚刚提到了 Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

1
$ hexo publish [layout] <title>

草稿默认不会显示在页面中，您可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true 来预览草稿。

模版（Scaffold）

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

1
$ hexo new photo "My Gallery"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

变量 描述
layout 布局
title 标题
date 文件建立日期

Front-matter

Front-matter设置了一些文章的信息，例如创建日期、title、页面图片、分类、标签等等。

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数 描述 默认值
layout 布局 config.default_layout
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址
excerpt Page excerpt in plain text. Use this plugin to format the text

流程

看完上面之后你应该明白如何写作了：

  1. 先new一个新的文章，可以选择从layout初始化

    1
    hexo new title --path others/博客搭建

    就会在_posts/others文件夹下生成博客搭建.md，默认采用post.md的模板

    放在不同文件夹下是为了方便我们分类，并不影响Hexo识别，只要是放在_posts文件夹的的md文件都会被正确识别，分类和归档依靠的是Front-matter里面的category和date

  2. 配置好Front-matter就可以开始写正文内容了。

杂项

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！