使用Hexo+github构建个人网站(备份记录)

Keith Lv2
  2024-03-20 21:17:31 2024-03-20 21:17:31 Created   2024-03-26 16:50:04 2024-03-26 16:50:04 Updated  

GitHub Pages + Hexo搭建个人博客网站，史上最全教程_hexo博客-CSDN博客

近日由于系统重装之后之前使用hexo构建的个人静态网站由于源文件的缺失便无法再继续进行更新，正好这段时间由于原先的github账号的2FA身份验证的问题无法解决，便索性将原先的博客文章迁移至新的github个人账号(@zkkeith)。下面的内容为这一次网站迁移和重构的主要过程记录，也算是个人备份了吧。

1.关于Hexo的基本介绍与安装配置

hexo是比较常见的用于构建静态个人博客与个人网站的工具之一，之前在知乎上看到有人专门介绍过几三个静态个人博客框架jekyll，hexo与hugo之间三者的主要区别与差异 ，三者的速度的话应该是hugo的生成速度是最快的，都比较偏简洁，hexo的主题丰富程度应该是三者中最多的，所以我个人选择偏向于hexo，推荐hugo中的PaperMod与Paper主题，偏简洁一点，适用于写博客文章之类的。接下来主要讲一下hexo的安装配置过程，在安装hexo之前，需要系统上以及安装过Node.js，之后再使用npm进行hexo的安装，关于Node.js的安装，有很多的教程，直接官网下载下来执行可执行文件运行安装即可，对于不同发行版的linux可以直接copy相关命令进行安装，以ubuntu为例，执行如下命令即可：

1
2
sudo apt update
sudo apt install nodejs npm

安装Hexo则是按照一下命令即可：

1
2
3
npm install -g hexo-cli
# hexo version 
hexo -v

2.初始化个人网站与主题配置

1
2
3
4
5
hexo init hexo-blog
# enter hexo-blog directory
npm install 
# wait for a second
hexo g && hexo s

在经过上述的步骤操作之后，通过任意浏览器访问http://localhost:4000就可以看到当前的网站情况和主题风格，在这个时候，如果你要将你的网站部署到github，那么首先需要在你的github下创建一个repo，举个例子来说我的github账号名称为**zkkeith**，那么你需要创建的repo的名称应该为**zkkeith.github.io**，repo的主要页面如下图所示：

如果你想要确认自己的域名是否有效（一般来说不会有什么问题），你可以直接在你的repo下上传一个index.html文件示例如下所示：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keithtab</title>
</head>
<body>
    <h1>keithtab is there</h1>
    <h1>Hello ~</h1>
</body>
</html>

在间隔时间约三分钟之后在浏览器内访问网站[user].github.io，如果出现相关的页面则代表域名有效可以进一步配置你自己的主题安装与相关设置，接下来是安装你感兴趣的hexo主题，这个可以直接在下面这个网站中找到你自己感兴趣的若干个主题，如果你新建的文件夹的名称为hexo-blog，则你在此文件夹下会发现一个themes文件夹，你可以通过git将多个主题下载安装，示例命令如下，当然你也可以去github上面的主题主页直接下载zip压缩文件解压至themes文件夹，这样子也同样有效：

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

这里需要注意的是，在hexo-blog根目录文件夹下修改_config.yml文件的时候要根据themes文件夹下的主题文件夹的名称为主，下面为根目录下的 _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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
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: true
marked:
  prependRoot: true
  postAsset: true
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# 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
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# 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/
theme: redefine

在文件的最后一行我们可以看到存在一项参数可以定义自己构建的静态网址的主题为什么，可以是你themes文件夹下的任意一个主题配置，至于每个主题的默认配置和参数则需要你进入themes主题文件下的各个主题去对于它们的_config.yml文件进行修改，这个过程其实和hugo类似，hugo则是修改根目录下的toml文件，本质上内容也没有区别，接下来如果我们需要将自己构建的网站提交至github上的个人域名，那么我们就需要在config.yml文件中添加如下的参数：

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/ZkKeith/ZkKeith.github.io.git
  branch: main
  token:

此处的token为你的个人github上的token，可以进入你的开发者设置新建一个，记得赋予此token有关repo部分的相关权限，最终复制下来黏贴到token后面的内容即可。之后运行如下命令则可以将public文件下的静态网站提交至github个人域名：

1
hexo g -d

由于各个主题的配置所需要参数不同，所以有关其中的分类和标签等则是可以通过hexo的基本命令实现，此处额外提及一个插件问题，因为我偏向于去写一些数理相关的文章，所以hexo的相关主题并不支持latex公式，在此可以通过mathjax来实现对于数学公式的支持，这个需要在config.yaml文件中添加如下内容，当然mathjax的支持需要通过hexo进行安装，虽然偶尔mathjax会出现不兼容的问题，但是基本够用，如果出现部分情况公式无法正常显示的情况可以参考其他教程进行完善：

1
2
3
4
5
6
7
mathjax:
  tags: none               # or 'ams' or 'all'
  single_dollars: true     # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9           # relative CJK char width
  normal_width: 0.6        # relative normal (monospace) width
  append_css: true         # add CSS to every page
  every_page: false        # if true, every page will be rendered by mathjax regardless the `mathjax` setting in Front-matter of each article

文章末最后附上一张基本效果：

  • Title: 使用Hexo+github构建个人网站(备份记录)
  • Author: Keith
  • Created at : 2024-03-20 21:17:31
  • Updated at : 2024-03-26 16:50:04
  • Link: https://redefine.ohevan.com/2024/03/20/使用Hexo-github构建个人网站-备份记录/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
使用Hexo+github构建个人网站(备份记录)
  1. 1.关于Hexo的基本介绍与安装配置
  2. 2.初始化个人网站与主题配置