hexo+github搭建博客笔记

1. 软件安装和使用

1.Git

查看是否成功安装

1
git version

绑定git邮箱和git用户，命令如下：

1
2
git config --global user.name dkyou #输入git不需要双引号
git config --global user.email 2323@xx.com

2.安装NodeJS

2.1 NodeJS 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

简单的说 Node.js 就是运行在服务端的 JavaScript，利用JavaScript在服务端进行编程。

关于NodeJS是什么可以参考：nodejs(第一篇)：nodejs是什么？

2.2 安装并配置环境变量，可以参考：[Node.js安装及环境配置超详细教程](Node.js安装及环境配置超详细教程【Windows系统】_windows 安装nodejs-CSDN博客)

2.3 同样的，使用命令查看是否安装成功

1
2
node -v
npm -v

3.Hexo安装和设置

3.1 hexo安装命令

1
2
npm install -g hexo-cli
#用于全局安装 Hexo 的命令行工具

以下是上述命令的解释：

1
2
3
4
5
6
7
8
1.npm
npm 是 Node.js 包管理器（Node Package Manager）的缩写，用于管理和安装 Node.js 应用程序的依赖包。
2.install
install 是 npm 的一个子命令，用于安装指定的包。
3. -g
-g 表示全局安装（global）。这意味着包将被安装到系统的全局位置，而不是项目的本地 node_modules 目录中。全局安装的包可以在系统中的任何位置使用。
hexo-cli
4. hexo-cli 是 Hexo 的命令行接口工具。Hexo 是一个静态站点生成器，可以用来快速生成静态博客或网站。

3.2 新建一个文件夹，例如”D:\myblog”，不需要进入该文件夹，直接鼠标右键—>Git Bash Here，依次执行以下命令

初始化myblog,即从https://github.com/hexojs/hexo-starter.git克隆文件，并且安装依赖

1
2
hexo init myBlog

进入myblog文件夹，并且执行npm install命令

1
2
cd myBlog
npm install

运行hexo s命令

1
hexo s

根据提示，可以直接在浏览器中输入http://localhost:4000/,回车即可看到效果

这是部署在本地的默认的一篇hello world博客，使用的是默认theme: landscape主题，此时和github还没有任何关系。

2. 主题安装

可从主题官网下载自己喜欢的主题：Themes | Hexo

以hexo-theme-Chic为例设置自己的主题,链接：https://github.com/Siricee/hexo-theme-Chic.git

执行git clone https://github.com/Siricee/hexo-theme-Chic.git或者直接download zip将下载的主题文件解压放在D:\myblog\themes文件夹中。注意文件名为hexo-theme-Chic后边没有-master和其他信息。

在D:\myblog中找到_config.yml，使用记事本或者vscode等打开，在第100行左右找到theme: landscape，改为theme: hexo-theme-Chic。

注意：这里的_config.yml是根目录下的，即”D:\myblog\_config.yml”，不是D:\myblog\themes\hexo-theme-Chic下的_config.yml

image-20240920181648998

依次执行以下命令

1
2
hexo g
hexo s

image-20240920184319727

根据提示，可以直接在浏览器中输入http://localhost:4000/,回车即可看到更换主题之后的效果

image-20240920184229783

themes主题文件结构：

1
2
3
4
5
6
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

主题配置文件设置：D:\myblog\themes\hexo-theme-Chic下的_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
#文件位置`D:\myblog\themes\hexo-theme-Chic`下的`_config.yml`
# Header  
navname: dku's Blog //对应左上角
# 对应右上角  Posts Categories Tags About
# navigatior items
nav:
  Posts: /archives
  Categories: /category
  Tags: /tag
  About: /about

# favicon 浏览器网址栏显示的图标，但是不知道为什么我默认的不是favicon.ico，而是我之前设置的神里凌华的图片，有点奇怪
favicon: /favicon.ico

# Profile 中间显示的名字
nickname: Dku

### this variable is MarkDown form.
# 个人描述 显示在图像下边
description: Lorem ipsum dolor sit amet, **consectetur adipiscing elit.** <br>Fusce eget urna vitae velit *eleifend interdum at ac* nisi.
# 个人头像图片
avatar: /image/avatar.jpeg

# main menu navigation
## links key words should not be changed.
## Complete url after key words.
## Unused key can be commented out.
#常用网站的个人链接，取消注释添加即可
links:
  Blog: /archives
  # Category:
  # Tags: 
  # Link:
  # Resume:
  # Publish:
  # Trophy:
  # Gallery:
  # RSS:
  # AliPay:
  ZhiHu: https://www.zhihu.com/people/sirice
  # LinkedIn:
  # FaceBook:
  # Twitter:
  # Skype:
  # CodeSandBox:
  # CodePen:
  # Sketch:
  # Gitlab:
  # Dribbble:
  Instagram:
  Reddit:
  # YouTube:
  # QQ:
  # Weibo:
  # WeChat:
  Github: https://github.com/Siricee

# how links show: you have 2 choice--text or icon.
# 图标或者文字显示常用网站的个人链接
links_text_enable: false
links_icon_enable: true

# Post page
## Post_meta
post_meta_enable: true

post_author_enable: true
post_date_enable: true
post_category_enable: true
## Post copyright
post_copyright_enable: true

post_copyright_author_enable: true
post_copyright_permalink_enable: true
post_copyright_license_enable: true
post_copyright_license_text: Copyright (c) 2019 <a href="http://creativecommons.org/licenses/by-nc/4.0/">CC-BY-NC-4.0</a> LICENSE
post_copyright_slogan_enable: true
post_copyright_slogan_text: Do you believe in <strong>DESTINY</strong>?
## toc
post_toc_enable: true

# Page
page_title_enable: 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: MMMM D, YYYY
time_format: H:mm:ss

# stylesheets loaded in the <head>
stylesheets:
  - /css/style.css

# scripts loaded in the end of the body
scripts:
  - /js/script.js
  - /js/tocbot.min.js
    # tscanlin/tocbot: Build a table of contents from headings in an HTML document.
    # https://github.com/tscanlin/tocbot


# plugin functions
## Mathjax: Math Formula Support
## https://www.mathjax.org
mathjax:
  enable: true
  import: demand # global or demand
  ## global: all pages will load mathjax,this will degrade performance and some grammers may be parsed wrong.
  ## demand: Recommend option,if your post need fomula, you can declare 'mathjax: true' in Front-matter

更改完D:\myblog\themes\hexo-theme-Chic下的_config.yml配置文件之后，可以依次执行hexo g hexo s根据提示，在浏览器中输入http://localhost:4000/,回车即可看到设置主题之后的效果

image-20240920193126322

可以设置的东西挺多，简单设置的效果

3.将hexo博客部署到github上

以上，所有的设置和内容都只能显示在自己的电脑上，如何部署到github上？

3.1 准备工作—新建仓库并设置ssh key

如果之前已经使用hexo搭建过博客，或者设置过以下内容，则无需再进行设置！
如果想了解什么是ssh key及其原理，可以参考ssh_key简记，本文只讲如何操作。

新建一个github仓库，仓库名要按照：用户名.github.io设置

配置ssh key,使用git配置ssh key，命令如下

1
2
3
git config --global user.name dkyou #输入git不需要双引号
git config --global user.email 2323@xx.com
ssh-keygen -t rsa -C 2323@xx.com

查看ssh

1
cat ~/.ssh/id_rsa.pub

添加可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容，则证实添加成功。

1
ssh -T git@github.com

image-20240920194849457

登陆 Github 上添加刚刚生成的SSH key，按如下步骤添加，右上角点击头像-> settings -> SSH and GPG keys，建立一个新的 SSH key, 标题随便，key 就填刚才生成那个，确认建立，这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。

image-20240920194441963

3.2 部署

在D:\myblog中找到_config.yml，使用记事本或者vscode等打开，找到最后几行，改为

1
2
3
4
5
6
# 文件路径：D:\myblog\_config.yml

deploy:
  type: 'git'
  repo: https://github.com/dkyou/dkyou.github.io
  branch: master

安装 hexo-deployer-git

1
npm install hexo-deployer-git --save

image-20240920195602908

执行命令上传

1
2
hexo g #生成
hexo d #上传

有时候在执行hexo d会报错，再执行一次就可以

image-20240920195816917

成功的截图

image-20240920195932499

接下来使用用户名.github.io即可访问部署到github上的博客

成功部署到github效果演示

image-20240920200418549

image-20240920200638025

4.更新文章

可以使用hexo new '文章标题'命令来创建一个文章标题.md文件，也可以按照格式直接将自己的.md

文件复制到"D:\myblog\source\_posts\"文件夹中，同时按照以下格式添加一些命令

使用hexo new '文章标题'命令来创建一个文章标题.md文件

1
hexo new '文章标题'

博客语法结构:

1
2
3
4
5
6
---
title: Hello World #文章标题
date: 2024-09-20 20:13:20
tags: [tag1,tag2,...]
categories: 
---

将新文章部署到github上

1
2
3
hexo g # 生成，必须
hexo s # 本地渲染，非必要
hexo d # 部署到Github 上，必须

注意：一个主题可能有以下文件结构

1
2
3
4
5
6
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

涉及到hexo d的文件

Source 文件夹。 将您的素材（如 CSS 和 JavaScript 文件）放在这里。 文件或文件夹开头名称为 _（下划线）或隐藏的文件会被忽略。

Hexo 将处理所有可渲染的文件，并将它们保存到 public 文件夹下。 不可渲染的文件将直接复制到 public 文件夹。

hexo d也会把D:\myblog\source_posts中的md文件上传到 public 文件夹下，如果_post的md文件被删除或者增加，则会完全覆盖github中的md文件，所以不要轻易删除_post文件夹下的md文件。

5.完结！

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。