基于Hexo和Github部署个人博客完整教程

安装流程

安装node.js
安装Git
安装Hexo
创建Github仓库
安装上传插件
更改配置
上传网页

1. 安装node.js

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

打开安装至默认位置即可

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

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

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

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

2. 安装Git

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

3. 安装Hexo

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

打开git bash,输入

1
2
3

node -v
npm -v
git -v

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

如果没有代理, 可用下面的淘宝镜像源:

1	npm config set registry https://registry.npmmirror.com/

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

1	npm install -g hexo-cli

等待安装完成显示以下信息说明安装完成

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

hexo -v

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

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

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

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

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

hexo init

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

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

4. 创建Github仓库

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

输入自己的邮箱, 密码等

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

总览

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

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

到此, 仓库已经创建完成

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

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

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

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

第一次是保存位置
第二次是密码
第三次是重复密码

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

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

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

复制好后, 返回Github

密钥添加完成

5. 安装上传插件

打开上文初始化的hexo目录, 右键选择open git bash here

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

然后输入下面的命令安装插件到目录下

1	npm install hexo-deployer-git --save

安装完成

6. 更改配置

打开网站文件夹

用记事本或VSCode等编辑软件打开_config.yml

# 配置说明, 不要复制. 按说明修改


# 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个空格, 冒号后面一个空格)

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository:
  branch: main

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

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

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

如果无法上传或分支报错可以使用以下样式:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:
    github: git@github.com:fireflyblog/fireflyblog.github.io.git,main #替换为自己的链接