Gitpage+Hexo博客基础搭建教程

这是一篇关于Gitpage+Hexo博客基础搭建的教程，主要介绍了如何使用Gitpage和Hexo搭建个人博客，建议直接看官方中文文档搭建。
Hexo官方中文文档

一、前置操作

由于我之前搭建过重新安装hexo时碰到了很多问题，于是决定全部卸载干净重新安装，github账号也新建了一个。

1、删除旧环境

首先用geek删掉node.js和git
完成后，手动删除残留目录（如果还存在）：

1
2
3

C:\Program Files\nodejs
C:\Users\<你的用户名>\AppData\Roaming\npm
C:\Users\<你的用户名>\AppData\Roaming\npm-cache

删除干净后重新下载

2、安装Node.js

下载 LTS 版本

下载msi双击运行安装程序，现在的版本都会自动添加到环境变量，不需要手动添加，

这个组件就不安装了

安装后用下面命令返回版本号就是安装成功了

node -v
v22.22.0 #我的版本

npm -v
10.9.3

3、安装Git

官网下载

采用默认配置安装·就行了

1 2	`git --version git version 2.51.0.windows.2`

二、新建github仓库

点击加号然后点击new repository。

在Repository name下填写yourname.github.io（记住这里username必须跟你girhub用户名一样），Description (optional)下填写一些简单的描述（不写也没有关系）。

创建仓库后进入到这个仓库的Settings页面，找到page

这里可以访问网站看看是否成功，没什么问题

三、本地Hexo搭建博客

1、安装Hexo

新建一个文件夹用来存放博客源代码，然后空白处右键打开git bash

然后输入命令安装hexo

1	`npm install -g hexo-cli`

**这里有个小tips，这个bash界面复制粘贴的快捷键分别是Ctrl+Shift+C和鼠标中键** hexo -v验证是否安装完成

**可以看到出现这些版本号就是成功了**

2、初始化Hexo

1	`hexo init <folder> #folder是文件夹名称，随便起，我这里就用hexo`

可以看到自动成了hexo文件夹，里面包含了很多配置文件。

3、配置Hexo

1. 安装成功后用cd hexo命令进入新创建的文件夹 2. 用命令npm install安装依赖和组件完成初始化 3. hexo generate部署生成的文件（generate简写成g也行） 4. hexo server本地启动服务器（server简写成s也行）

想要进行别的命令操作，可以按`Ctrl + C`停止服务器。 ctrl+鼠标单击该地址，可以看到本地已经成功部署。

四、将本地的 Hexo 博客部署到 GitHub Pages上

1、配置ssh

配置Git个人信息，在`Blog`目录下，鼠标右键，选择`Git Bash`，进入命令窗口，输入下面的命令

1 2	`git config --global user.name "Github用户名" //自己Github的账号名 git config --global user.email "Github邮箱" //自己注册Github的邮箱地址`

生成SSH KEY,意思是生成一个公钥和密钥，因为Github需要一个密钥才能与本地相连接。在命令窗口输入下面的命令，然后需要连续按3次回车生成密钥（每按一次回车你可以看到对应的信息）【你也可以先查看是否已经有了ssh密钥：cd ~/.ssh 如果没有密钥则不会有此文件夹，有则备份删除】

1	`ssh-keygen -t rsa -C "Github邮箱" //自己注册Github的邮箱地址`

生成的SSH KEY会保存到 `C:/Users/电脑名用户名/.ssh` 目录中（根据你自己电脑用户名，打开对应的目录）打开.ssh 这个目录，打开 id_rsa.pub 文件，复制里面的全部内容（这些内容就是密钥）在GitHub中添加`SSH keys` 点击头像 -> Settings -> SSH and GPG keys -> New SSH key 将刚刚复制到的密钥粘贴到`key`输入框中，title自己给它命一个名就好。

2、修改hexo配置一键部署

在hexo文件夹下，找到`_config.yml`文件，找到文件最末尾的内容，复制我们的仓库地址粘贴进去

前面新建仓库是可以看到我们的默认branch是main，所以这里填main，老版本可能是master

安装`hexo-deployer-git` 插件，目的是将代码快速托管到Github上

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

后续在本地更新博客后，只需要运行下面命令就可以将更新一键推送到github（命令分开写也行）

1	`hexo clean && hexo generate && hexo deploy`

**备注：** `hexo clean` ：清除缓存文件 (db.json) 和已生成的静态文件 (public) `hexo generate` ：部署之前预先生成静态文件，简写为`hexo g` `hexo deploy` : 文件生成后立即部署网站，简写为`hexo d` 在浏览器地址栏输入 https://username.github.io/ 即可访问，（username也就是你的Github账户名），如果能够正常访问，并且跟本地hexo项目显示的内容是一样的，那么说明你已经把本地hexo项目部署到Github上了。可以看到成功部署

五、配置个人信息

在hexo目录中，找到全局配置文件_config.yml

配置信息如下：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点信息配置
title: winney     #站点名
subtitle: It is never too old to learn.  #站点副标题
description: Doing is better than saying.     #站点信息简介
keywords: winneyBlog   博客
author: winney   #站点作者
language: zh-Hans     #站点语言，default默认是英文，zh-Hans是中文
timezone: Asia/Shanghai      #时区

# URL   博客地址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://AAAAAAAAAA.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# 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: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  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: 3  #每页文章数量
  order_by: -date
  
# Category & Tag   分类和标签
default_category: uncategorized
category_map:
tag_map:

# 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

# Pagination    归档显示
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions  扩展
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git    #部署的类型
  repository: https://github.com/AAAAAAA/AAAAAAA.github.io.git    #仓库地址
  branch: master    #分支名称
  message: hexo deploy  #提交信息

#Search
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

根据自己的喜好修改就行

注意：.yml 文件有严格的格式要求，文件里所有的配置都是：冒号空格值，并且冒号是英文状态下的输入。想了解更多的可以前往官网。
Hexo配置

到这里博客基本就搭建完成了，非常简单。

六、如何写文章

先要写文章只需要运行下面命令

1	`hexo new 文章名称`

可以看到自动在hexo/source/_posts/目录下生成了test.md，写文章只需要在文件里用markdown语法撰写就行。

我个人比较喜欢用语雀来写文章，语雀支持导出md文件，因此可以导出后再copy到_post目录完成文章的迁移。

但是直接这样做会导致文章的名称缺失，因此我的做法是先用hexo new生成文章，再把语雀导出的md文件的内容copy过来。

接着继续hexo 一件三连就行了。

1	`hexo c && hexo g && hexo d`

七、购买自定义域名

因为我们使用github托管的博客，因此很容易出现访问慢和访问不到的问题，我们注册一个域名，并将我们的博客域名github.io解析到我们购买的域名就可以很好的解决这个问题了。

进入域名控制台，点击添加记录，需要添加两个记录，两个记录类型都是 CNAME ，第一个主机记录为 @ ，第二个主机记录为 www ，记录值都是填你自己的博客地址（比如我的是：chu1xu4.github.io)），保存之后域名解析就完成了！

然后还要再github里面添加一个配置，输入你的域名然后点击save，等dns解析完成就可以通过我们自己的域名访问博客了！

我后面发现这种办法不好用，每次hexo一键三连更新网站后都需要重新进行一边这个操作，这个操作其实就是在仓库根目录添加了一个CNAME文件。
我们可以在本地目录/hexo/source下创建这个CNAME文件，然后内容就是我们的域名，这样的效果和在github操作是一样的，并且不用每次都操作一次。

八、Vercel部署绑定自定义域名

Vercel简介：vercel是一个代码托管平台，它能够托管你的静态html界面，甚至能够托管你的node.js与Python服务端脚本，是不想买服务器的懒人的福音！

使用Vercel部署Hexo项目步骤：

首先需要一个Vercel账号，这里推荐用GitHub账户关联，这样你就可以在vercel中直接托管你的GitHub库中的项目了，实现开发部署一步到位（网络不流畅可以考虑挂梯子）。

当你用你的Github账户关联并绑定邮箱登录之后，点击右上角的Add New Project创建新的项目，之后导入选项那里选择Continue with Github，这时候应该能看到你Github账号的仓库，选择你刚刚部署成功的存储静态博客的仓库.github.io右边的Import选项，表示你要导入该仓库。
起一个只能有字母、数字或者或者连字符的项目名称，然后其他默认，点击Deploy，等待一分钟即可部署成功，部署成功后电极Continue to Dashboard跳转到控制面板，下图所示就是控制面板，看到就代表成功部署到了。