落叶枫林

记录每一天

个人博客搭建

发表于 分类于
本文字数： 5.7k 阅读时长 ≈ 5 分钟

主要介绍一个初始博客的搭建和简单next主题的配置和遇到的问题，采用git + github + hexo + hexo next主题实现的一个个人博客网站。

工具准备

下载git，参考网址：图文详解 Git 安装【当前最新，最详细版】 - 掘金 (juejin.cn)

下载node.js，参考网址：node.js安装及环境配置 - 掘金 (juejin.cn)

然后打开git bash命令窗口输入：

1
npm install -g hexo-cli

github创建仓库

  1. 自己注册一个账号，开始创建仓库，可以参考使用 Hexo+GitHub 搭建个人免费博客教程（小白向） - 知乎 (zhihu.com)

    需要注意的是仓库名称xxx.github.io。

  2. 在git上配置远程连接SSH

    1
    2
    3
    4
    5
    git config -global user.name "用户名"
    git config -global user.email "邮箱"

    # 生成SSH密钥
    ssh-keygen -t rsa -C "邮箱"

    生成结果：

    路径C:\Users\电脑用户名\.ssh\id_rsa.pub

    image-20231125201927788

    image-20231125202103556

  3. 将密钥全部复制粘贴到GitHub上

    image-20231125202323393

初始hexo项目

初始创建

1
hexo init

下载next主题

1
git clone git@github.com:theme-next/hexo-theme-next.git  ./themes/next

更改根目录下的_config.yml文件

1
themes: next

然后执行以下命令：

1
2
# 拉取仓库内容
git clone 仓库地址
1
2
3
# 编译运行 本地测试
hexo g
hexo s
1
2
# 下载hexo-devloper
npm install hexo-deployer-git --save

将根目录下.config.yml配置文件修改：

1
2
3
4
5
url: # https://xxx.github.io
deploy:
  type: git
  repo: # https://gitee.com/<yourAccount>/<repo>
  branch: main

配置修改后执行：（一定要先修改配置文件后在进行提交）

1
2
# 提交
hexo d

执行上述所有步骤后，就可以通过github看到一个初始状态的个人博客了。

Next主题配置

选择主题

主题配置文件下：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

可以自行选择四种样式。

修改博客头像

在themes/next/source/images放入设置的图片。

image-20231125150218977

在主题配置文件中设置路径即可：

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

侧边栏社交添加

主题配置文件夹下配置：

1
2
3
4
5
6
7
8
9
10
11
social:
  #GitHub: https://github.com || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

添加菜单结构

输入命令：

1
hexo new page tags

这样就可以创建一个tags目录，效果如图所示：

image-20231125135239747

同理还可以创建about、categories、archives等菜单文件。

我们需要进入到每个文件目录下面去修改它index.md文件，修改它的类型，如图所示：

image-20231125135911341

1
2
3
tags: tags
categories: categories
留言板: 将comments一栏改为true type改为guestbook

在主题的配置文件_config.yml开启对应菜单：

image-20231125140353312

可以设置显示数量：

1
2
3
menu_settings:
  icons: true
  badges: true

添加搜索功能

下载搜索插件：

1
npm install hexo-generator-searchdb

主题目录下配置文件_config.yml开启本地搜索：

1
2
3
4
5
6
7
8
9
10
11
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

根目录下_config.yml配置：

1
2
3
4
5
6
# hexo-generator-searchdb
search:
  path: search.xml
  field: post
  format: html
  limit: 10

添加动态背景

打开生成的hexo目录\themes\next\layout\_layout.swig文件，将代码放在</body>上面。

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

主题配置文件添加配置：

1
2
3
4
5
6
# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

增加阅读时间和文章数字统计

下载插件：

1
npm install hexo-symbols-count-time

根目录下配置文件添加：

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 2    
  wpm: 275
  suffix: "mins."

主题配置文件下打开开关：

1
2
3
4
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false

部件配置

都在主题配置文件下

阅读进度条：

1
2
3
4
5
6
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#37c6c0"
  height: 3px

左上角Github图标：

1
2
3
4
github_banner:
  enable: true
  permalink: https://github.com/xxx
  title: Follow me on GitHub

开启代码复制：

1
2
3
4
5
6
7
8
9
10
11
12
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: false
    # Available values: default | flat | mac
    style:

文末尾版权说明

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: zh-CN

设置回到顶部

1
2
3
4
5
6
back2top:
 enable: true
 # Back to top in sidebar.
 sidebar: false
 # Scroll percent label in b2t button.
 scrollpercent: true

问题

图片不显示

hexo生成后图片路劲发生改变，导致了生成后文章找不到图片。

下载插件：

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

修改根目录下配置文件：

1
post_asset_folder: true

生成的时候可能要等一会，多刷新几次。

只有md文档同级下有对应文件夹来放图片就可以了。

如果还是不行，直接去修改hexo-asset-image包下的index.js文件：

image-20231125182910235

去调整index.js的中路径字符串拼接的部分，视自己当前问题来合理调整。

这里还需要注意的是根目录下的配置文件中url的配置：一定要是自己的仓库名，不然所有组件都会加载失败。

hexo的不支持Latex语法

我们需要进行重新选择插件进行渲染。

需要重新更新插件：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

修改主题配置文件：

image-20231127152223788

修改插件文件，路径\blog\node_modules\kramed\lib\rules\inline.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var inline = {
  // escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/,
  autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
  url: noop,
  html: /^<!--[\s\S]*?-->|^<(\w+(?!:\/|[^\w\s@]*@)\b)*?(?:"[^"]*"|'[^']*'|[^'">])*?>([\s\S]*?)?<\/\1>|^<(\w+(?!:\/|[^\w\s@]*@)\b)(?:"[^"]*"|'[^']*'|[^'">])*?>/,
  link: /^!?\[(inside)\]\(href\)/,
  reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
  nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
  reffn: /^!?\[\^(inside)\]/,
  strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
  // em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
  br: /^ {2,}\n(?!\s*$)/,
  del: noop,
  text: /^[\s\S]+?(?=[\\<!\[_*`$]| {2,}\n|$)/,
  math: /^\$\$\s*([\s\S]*?[^\$])\s*\$\$(?!\$)/,
};

然后重新生成运行就可以了。

markdown不支持上标和下标的语法

使用html来实现上下标，不使用~~和^^。