安装流程

  1. 安装node.js

  2. 安装Git

  3. 安装Hexo

  4. 创建Github仓库

  5. 安装上传插件

  6. 更改配置

  7. 上传网页

1. 安装node.js

打开node.js官网Node.js — Run JavaScript Everywhere (nodejs.org)点击下载

image-20240616123122227

打开安装至默认位置即可

image-20240616133442122

image-20240616133513544

image-20240616134514733

image-20240616134540912

image-20240616134640367

自动安装一些工具, 可以选上, 然后安装. 等待安装完成

image-20240616134806827

点击完成, 会弹出一些窗口

image-20240616134922113

按任意键继续即可, 等待安装完成.

image-20240616135110217

过程较长, 耐心等待安装完成.

image-20240616214328211

2. 安装Git

查看往期教程Git 安装及配置教程 | Firefly Blog | 萤火虫博客 (fireflye.asia)

3. 安装Hexo

完成上面的安装后, 可以使用以下命令检查是否安装成功.

打开git bash,输入

1
2
3
node -v
npm -v
git -v

显示版本信息, 说明安装成功.

image-20240630103326908

之后再输入以下命令安装hexo

1
npm install -g hexo-cli

等待安装完成, 网络问题请自学寻找代理, 或寻找可用镜像源. 显示以下信息说明安装完成

image-20240630103802987

还可以使用以下命令来查看安装情况

1
hexo -v

若显示版本信息, 说明已成功安装

打开一个要存放网站文件的位置, 例如F:\web\. 打开此文件夹, 右键选择open git bash here

或者 直接打开git bash 输入cd f:\web. 路径替换为自己的路径.

打开后会显示(我使用的虚拟机放在了桌面. 不建议这样做. 文件夹需要妥善保存.)

image-20240630111134467

输入以下命令初始化hexo(一定要在刚刚的文件夹内-路径显示)

1
hexo init

保证网络畅通, 耐心等待初始化完成.

image-20240630111544780

到此, hexo初始化完成. 下面配置github仓库.

4. 创建Github仓库

打开Github注册一个自己的账号

image-20240630104651171

输入自己的邮箱, 密码等

image-20240630104946194

用户名建议设置简单易记一些, 待会创建的网站域名与自己的用户名有关

image-20240630105354804

总览

image-20240630105536614

点击继续, 通过验证码和邮箱数字验证就可以注册成功.

image-20240630110310020

点击左侧的绿色按钮新建仓库Create repository.

image-20240630112211721

到此, 仓库已经创建完成

接下来还需要配置一下上传的密钥对

打开git bash, 输入以下命令 (“email”替换为自己的邮箱)

1
ssh-keygen -t rsa -b 4096 -C "email"

然后按三下回车键, 即均保持默认不设置密码. 也可根据自己需要修改

image-20240630113030731

第一次是保存位置

第二次是密码

第三次是重复密码

创建完成后, 打开保存的目录. 默认在C:\Users\用户名\.ssh

image-20240630113306685

第一个是私钥, 自己一定要保存好, 不能给别人.

将第二个pub结尾的用记事本打开, 将里面的内容复制出来.

image-20240630113555419

复制好后, 返回Github

image-20240630113747970

image-20240630113916419

image-20240630114006001

image-20240630114146715

密钥添加完成

5. 安装上传插件

打开git bash

1
npm install hexo-deployer-git --save

image-20240630125111158

安装完成

6. 更改配置

打开网站文件夹

image-20240630125228295

用记事本打开_config.yml

image-20240630125338327

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
# 配置说明, 不要复制. 按说明修改


# 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  # 语言 中文 zh-CN
timezone: '' # 时区 Asia/Shanghai

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://fireflyblog.github.io # 改成自己网址 https://用户名.github.io # 注意是https
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: false
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: landscape

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

这一部分单拿出来修改(注意缩进为2个空格, 冒号后面一个空格)

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository:
  branch: main

仓库地址在Github, 打开找到自己的仓库

image-20240630131146011

复制好后粘贴到仓库参数后面, 完整的配置修改如下

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:fireflyblog/fireflyblog.github.io.git #替换为自己的链接
  branch: main

7. 上传网页

一切配置好之后, 打开网站文件夹. 右键选择open git bash here

输入以下命令生成和上传网页

1
2
hexo g
hexo d

image-20240630132524270

image-20240630132736169

上传成功之后, 等待一会. 就可以打开自己网页查看了(替换自己的用户名)

1
https://fireflyblog.github.io

image-20240630132950741

至此, 网站已经搭建完成

还有一些其他常使用的命令

新建文章

1
hexo new "title"

本地部署预览

1
hexo s

清理生成文件(一般切换主题需要先清理再生成. 新建文章之类的不需要此操作.)

1
hexo clean

文章保存在

1
网站文件夹\source\_posts

文章格式说明以及主题美化待更新…