学习与记录。

0%

搭建个人博客 hexo + next + GitHub

发表于 更新于 分类于 Valine：

本文主要记录个人博客搭建的过程，以及过程中遇到的一些问题等。

博客模板为 hexo，主题为 next，部署至 GitHub。

环境配置

安装 Node.js

在 Node.js 官网 上下载 LTS（Long Term Support 长期支持）版本的 Node.js，正常点击下一步进行安装即可。

安装 Git for windows

在 Git for windows 官网 上下载，正常点击下一步进行安装即可。

下载速度太慢的话可以选择在 镜像网站 进行下载。

安装 hexo

1
$ npm install hexo-cli -g

安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

博客搭建

初始化新的 blog 文件夹，此处的 blog 可以是自定义名称：

1
$ hexo init blog

进入刚刚初始化创建的 blog 文件夹：

1
$ cd blog

安装 npm（Node.js下的包管理器）：

1
$ npm install

启动服务（可简写为 hexo s）：

1
$ hexo server

部署至 GitHub

创建项目仓库

在 GitHub 上创建一个库，名称为 username.github.io，此处的 username 只能是 GitHub 的用户名。

编辑配置文件

打开 blog 文件夹下的 _config.yml 文件，对其中内容进行编辑。

基本信息：

1
2
3
4
5
6
7
8
# Site
title: daixxTech's blog
subtitle: '学习与记录。'
description: '谦虚为人，谦逊待人。'
keywords:
author: daixxTech
language: zh-CN
timezone: ''

网址：

1
2
# URL
url: https://daixxTech.github.io

部署：

1
2
3
4
5
# Deployment
deploy:
  type: git
  repo: https://github.com/daixxTech/daixxTech.github.io.git
  branch: master

进行部署

生成静态文件（可简写为 hexo g）：

1
$ hexo genarate

部署至远程服务端（可简写为 hexo d）：

1
$ hexo deploy

如果出现 Please tell me who you are，则输入：

1
2
$ git config --global user.email "GitHub账号邮箱"
$ git config --global user.name "GitHub账户名称"

在弹出的 GitHub Login 中进行登录，等待部署完成即可。

部署完成后，访问 username.github.io 即可。

修改主题

在 blog 文件夹下输入命令，将主题 clone 到 themes/next 文件夹下：

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

打开 blog 文件夹下的 _config.yml 文件，对其中内容进行编辑。

主题：

1
2
# Extensions
theme: next

保存后重新进行生成部署即可生效。

主题配置

打开 blog\themes\next 文件夹下的 _config.yml 文件，对其中内容进行编辑。

主题风格

选择一个风格并解除该行注释，并注释其他行即可。

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

标签页和分类页

解除标签页和分类页的注释即可。

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

创建并编辑标签页

在 blog 文件夹下输入命令，创建标签页：

1
$ hexo n page tags

打开 blog\source\tags 文件夹下的 index.md 文件，对其中内容进行编辑：

1
2
3
title: 标签
date: 2020-01-07 14:13:25
type: "tags" # 添加该行后，标签页才会显示标签

创建并编辑分类页

在 blog 文件夹下输入命令，创建分类页：

1
$ hexo n page categories

打开 blog\source\categories 文件夹下的 index.md 文件，对其中内容进行编辑：

1
2
3
title: 分类
date: 2020-01-07 14:15:01
type: "categories" # 添加该行后，分类页才会显示分类

头像

将 url 地址修改为头像的图像文件的地址。

可以是网络地址，也可以是本地地址。

本地地址的根目录为 source 文件夹，即 images 文件夹是在 source 文件夹下的。

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

社交链接

对社交链接解除注释（或添加新的社交链接）并修改 url 地址即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/daixxTech || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #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
  #RSS: /atom.xml || rss

友情链接

对友情链接解除注释（或添加新的友情链接）并修改标题和 url 地址即可。

1
2
links:
  #Title: http://yoursite.com

背景动画

修改指定的背景动画为 true 即可启用对应的背景动画。

需要下载背景动画对应的依赖项，地址在对应的注释中。

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
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: false
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  onmobile: true # Display on mobile or not
  color: "0,0,0" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: false
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

其他

隐藏底部的强力驱动

打开 blog\themes\next\layout_partials 文件夹下的 footer.swig 文件，对其中内容进行编辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--
{%- if theme.footer.powered.enable %}
  <div class="powered-by">
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'})) }}
    {%- if theme.footer.powered.version %} v{{ hexo_version }}{%- endif %}
  </div>
{%- endif %}

{%- if theme.footer.powered.enable and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{%- endif %}

{%- if theme.footer.theme.enable %}
  <div class="theme-info">
    {%- set next_site = 'https://theme-next.org' %}
    {%- if theme.scheme !== 'Gemini' %}
      {%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
    {%- endif %}
    {{- __('footer.theme') }} – {{ next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'}) }}
    {%- if theme.footer.theme.version %} v{{ next_version }}{%- endif %}
  </div>
{%- endif %}
-->

撰写文章

生成文章

生成一篇新的博客文章（可简写为 hexo n post-name）：

1
$ hexo new post-name

之后在 blog\source_posts 文件夹下会生成对应的 post-name.md 文件。

编辑文章

生成的文章中会有一段 YAML Front Matter 内容，用来定义文章的基本信息。

1
2
3
4
5
6
7
title: 文章标题
date: 2020-01-01 00:00:00
tags:
	- 文章标签1
	- 文章标签2
	- 文章标签3
categories: 文章分类

然后撰写文章的简介，在简介后另起一行写上

1
<!-- more -->

这样文章就会自动分割，生成【阅读全文】按钮。

文章标题和简介等信息在博客的文章列表中就能看到，具体的文章内容则要点击【阅读全文】后才能看到。

在文章中插入图片

打开 blog 文件夹下的 _config.yml 文件，对其中内容进行编辑。

1
post_asset_folder: true # 将 false 修改为 true

安装 hexo-asset-image：

1
npm install https://github.com/CodeFalling/hexo-asset-image --save # 版本为 0.0.5

通过此方法安装的插件版本为 0.0.5，但是通过以下指令：

1
npm install hexo-asset-image --save # 版本为 1.0.0

安装的版本为 1.0.0，该版本的图片地址映射存在一定的问题，会导致图片无法显示。

安装完成后，在生成新文章的同时会在文章目录下创建一个同名的文件夹用于存储图片。

将图片放入该文件夹中，然后在编辑文章时，使用以下方式：

1
![image_name](./post_name/image_name.jpg)

即可引用文件夹下的图片。（PS：路径中只能使用 ‘/‘ ，不能使用 ‘\‘，会被解析为转义字符。）