前言

我的个人博客搭建成功啦！
网上的教程大多年代过于久远，而版本是一直在更新的，会让新手踩很多坑。
基于这种情况，我将通过这篇文章将教会大家如何从零开始，快速搭建属于你的个人独立博客。
废话不多说，让我们马上开始！

教程中插入图片能使教程流程更清晰，但会受网络影响，
教程中图片可能会加载比较慢，建议在图片位置停留5s左右以防缺漏
😘有问题可以文章底下留言

第一步：准备环境工具

创建github账号

点击查看教程

github官网直达
点击右上角Sign up注册账号
注册账号01
用户名username会关系到你的默认域名，请慎重！！
注册账号02

nodejs和git的安装

点击查看教程

下载nodejs
nodejs官网直达
下载你的电脑对应系统的版本即可，请选择下载LTS长期支持版本

下载完点开安装包，一直点下一步即可
下载git
git下载直达

win的下载完点开安装包，一直点下一步即可
验证是否安装成功
以管理员运行cmd,依次输入
1
2
3
node -v
npm -v
git -version
如果都有版本号则说明都安装成功了

第二步：git常用命令

点击查看教程

git常用命令

1
2
3

git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

如果是第一次使用git的话需要配置用户名和邮箱

1 2	git config --global user.email "你的邮箱" git config --global user.name "你的名字"

检查配置：git config -l

第三步：npm淘宝镜像

点击查看教程

为了提升资源下载速度，建议配置npm镜像
npm下载各种模块，默认是从国处服务器下载，速度较慢，建议配置成淘宝镜像。

1	npm config get registry

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

第四步：初始化Hexo项目

Hexo 安装

查看教程

创建博客根目录文件夹
选择一个磁盘，新建一个文件夹，自己重命名文件夹(如我的文件夹：D:\MY_Blog),博客相关的文件将存储在此文件夹下。
在该文件夹下右键鼠标，点击Git Bash here

注意：部分用户需要在右键菜单中点击显示更多选项才能看到！
输入以下npm命令即可安装，第一次安装可能时间比较长。
或者以管理员运行cmd,进入当前目录MY_Blog 下文所说的博客文件根目录即：D:\MY_Blog
安装hexo
1
npm install hexo-cli -g
如果安装失败，再重新安装一次即可
验证是否安装成功
1
hexo -v

Hexo 初始化配置

查看教程

一、初始化项目(在你的博客根目录D:\MY_Blog)
安装成功后，输入以下命令初始化，表示安装hexo部署到gitpage 的 deployer

1 2	hexo init npm install hexo-deployer-git --save

时间可能比较长，请耐心等待~ 完成后我们的博客根目录下就会出现一些初始文件和文件夹了

example image

名称	类型	描述
node_modules	文件夹	依赖，安装的插件依赖都在这
scaffolds	文件夹	生成文章的一些模板
source	文件夹	源码，未被Hexo渲染的md文件，写的文章存放在这里面
themes	文件夹	主题，安装的主题都在这
_config.yml	文件	Hexo 配置文件
_config.landscape.yml	文件	主题的配置文件
package.json	文件	你下载的npm插件等包括版本号会记录在这

二、运行验证
现在我们已经可以在本地部署看看效果了。
回到博客文件夹根目录，右键git Bash here 输入以下命令

1 2	hexo generate // 或者输入 hexo g hexo server //或者输入 hexo s

执行完即可点击链接 http://localhost:4000/ 查看效果

点击查看初始效果图片

能看到下面图片中的界面样式说明博客已经构建成功了。
example image

第五步：通过Github Pages将博客部署至互联网

搭建远程仓库

点击查看教程

进入github官网新建一个仓库 github官网直达

点击Create a new repository进入新建仓库页面
仓库名输入必须以你github账号名+github.io的格式
用户名.github.io 用户名就是你github账号用户名
勾选 Public
勾选 Add a README file
拉到下面点击create创建

创建仓库

配置SSH密钥连接Github

点击查看教程

生成ssh密钥
只有配置好SSH密钥后，我们才可以通过git操作实现本地代码库与Github代码库同步，在博客文件根目录D:\MY_Blog中git bash here 输入以下命令生成ssh公钥,用于你的计算机连接Github

1 2	ssh-keygen -t rsa -C "邮件地址" //引号里面填写你的邮箱地址，比如"xxxxxxxxxx@qq.com"

直接回车。之后会出现：【直接回车将密钥按默认文件进行存储】

1
2
3

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_res):
//到这里可以直接回车将密钥按默认文件进行存储

然后会出现: 【可直接回车】

1
2
3

Enter passphrase(empty for no passphrase):
//这里是要你输入密码，其实不需要输入什么密码，直接回车就行
Enter same passphrase again:

接下来屏幕会显示: 【告诉你生成保存公钥和私钥的文件系统目录位置】

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
这里是各种字母数字组成的字符串，结尾是你的邮箱
The key's randomart image is:
这里也是各种字母数字符号组成的字符串

运行以下命令，将公钥的内容复制到系统粘贴板上【也可以手动去id_rsa.pub文件复制】

1	clip < ~/.ssh/id_rsa.pub

也可以去你的用户目录查看.ssh文件夹,里面有一个id_rsa.pub文件，里面就是你的公钥，全选，复制。

将SSH KEY配置到github
后续请结合文字和图片流程两种描述一起观看操作，先看完流程有大致印象后再操作更好。
文字流程描述

回到github的首页
点击右上角的头像
点击Settings
在新的界面左侧导航栏找到并点击SSH and GPG keys
点击右上角绿色按钮New SSH key
在title中随便填写一个名字这个ssh与你当前设备绑定，建议取你的电脑设备名称
在key中粘贴公钥的内容
点击Add SSH key保存
回到我们创建的用户名.github.io这个仓库中
点击SSH 复制其中的内容
去我们博客根目录找到_config.yml文件中，用记事本打开找到deploy位置,加上下面代码后保存退出
1
2
3
4
5
deploy:
- type: git
repository: # 这里粘贴你的`SSH`
branch: main
# YML文件格式要求严格，请注意缩进
改好后回到博客根目录打开git bash here,依次输入hexo cl,hexo g,hexo d
1
2
hexo clean && hexo generate && hexo deploy // Git BASH终端
hexo clean; hexo generate; hexo deploy // VSCODE终端
hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令。
hexo generate：生成静态文章，可以用hexo g缩写
hexo deploy：部署文章，可以用hexo d缩写
如果出现Deploy done，则说明部署成功了。
每条命令等待执行完成开始下一条命令，回到GitHub，刷新用户名.github.io仓库
你就会发现你的文件已经提交到github啦(注意：这步操作和下一步操作需耐心等待提交成功，有延时。)
现在，打开浏览器访问https://用户名.github.io就可以看到你的博客了！！
图片流程描述

第六步(可选)：Vercel部署并绑定自定义域名

Vercel部署教程

注：请自行提前去阿里云或腾讯云购买一个域名！！
为什么要用Vercel绑定自定义域名？
因为Vercel免费，能CDN代理加速，绑定你的域名后能让博客访问更快
参考图床教程中的Vercel部署,流程是一样的图床搭建

登录Vercel创建账号
Vercel官网：https://vercel.com/ 【网速好是可以进的，如果进不去可以挂梯子】
推荐使用github账号登录，使用github账号登录并绑定你的手机号就完成了
创建项目导入博客仓库
进入Vercel 点击右上角添加新(Add New) 选择项目(Project)
在左边Import Git Repository 中选择github Continue with GitHub在导入选项选择这时候可以看到你github中的项目仓库了，选择你存储博客的仓库<username>.github.io右边的Import选项,导入该仓库
部署(可以保持默认直接点击Deploy)
Project Name:起一个由字母、数字或者或者连字符组成的项目名称如：blog-demo
Deploy：点击Deploy部署
部署完成会显示Congratulations!
进入仪表盘(控制面板)
- 上述部署完成后的界面中点击右上角continue to Dashboard可以去到控制面板
- 或者直接在vercel首页(OverView)直接点击你刚刚部署的项目即可
绑定自定义域名(请提前准备一个域名)
完成前置部署后，你现在有两种方式访问你的博客
1. GitHubPages提供的：username.github.io 【网速不稳定，访问较慢】
2. Vercel部署时提供的：blog-demo.vercel.app 【GFW把Vercel屏蔽了，需要梯子】
接下来介绍绑定你购买的域名：下面假设域名为demo.com为例：
1. 进入刚刚部署的项目的仪表板
2. 点击查看域(View Domains) 或者直接点击Domains
  - 可以看到vercel给我们的二级域名blog-demo.vercel.app现已被屏蔽
3. 在Domains的下方输入框中输入购买的域名demo.com,点击添加(Add)。
  - vercel推荐你将demo.com重定向至www.demo.com,弹窗选项如下
  - Add www.demo.com and redirect demo.com to it 点击Add
  - Vercel会显示你所需要添加的域名解析内容
  - 每个解析包含三项：Type | Name | Value
解析(你在哪里买的域名就去哪里的控制台去解析域名)
1. 以阿里云为例：登录账号后，点击右上角进入控制台
2. 点开左上角菜单栏，点击域名
3. 在域名列表中选择你的域名，在操作选项中点击解析在跳转后的界面点击添加记录
  - 记录类型 填 vercel 给你的 Type值
  - 主机记录 填 vercel 给你的 Name值
  - 记录值 填 vercel 给你的 Value值
  - 其他保持默认即可，点击确认添加
4. 可能有多个解析要添加，重复第3步的添加解析就行了。添加完成后回到vercel等待5s左右，vercel就会显示该域名成功解析(原本打红X的地方变成√)。多个解析的原因如下：
  - 一级域名如demo.com会需要添加两条解析记录，一条是A类型，一条是CNAME类型
以后直接访问绑定的域名即可访问博客网站了：demo.com，速度变快了不只一点点
当你有了新的域名后，需要在博客配置文件_config.yml文件中的url配置项为自己的新域名,这样博客的文章链接才会正确生成。
- 如：url: https://demo.com/

第七步(可选)：GitHub action自动部署

hexo 完成GitHub action自动部署教程

完成这步操作后，你将不再需要执行hexo cl,hexo s,hexo d来完成提交我们的博客，在VSCode中左侧菜单中直接点击第三个菜单（源代码管理），点击发布分支即可。

登录github，点击右上角的头像,在展开的菜单中点击Settings
滑到下方，点击Developer settingss,再点击Personal access tokens来生产一个token
- 在Note位置输入一个标题,就是告诉你这个token来做什么，如：hexo自动部署token
- 在Expiration位置,点击并选择no expiration表示该token永不过期
- 下面勾选:repo、workflow、勾选完这两个后点击Generate token生成token
- 上面生成的token注意保存，因为它只会显示一次，注意提前复制记录！！！！
回到github主页，创建一个新的仓库
- 仓库名，如：hexo-source-Repo
- 描述：随意，如：博客源码仓库
- 属性选择：私有Private
- 点击Createing repository直接生成
配置GitHub action
- 在博客根目录中.github文件夹中新建一个文件夹workflows
- 在workflows文件夹中新建一个文件autodeploy.yml,github能识别该文件夹中的命令并执行

autodeploy.yml内容如下

name: 自动部署
# 当有改动推送到master分支时，启动Action
on:
  push:
    branches:
      - master  
      #该分支是来检测hexo-source-Repo的分支
      #2020年10月后github新建仓库默认分支改为main，注意更改
  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v2
        with:
          ref: master

      - name: 安装 Node
        uses: actions/setup-node@v1
        with:
          node-version: "16.x"

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: 缓存 Hexo
        id: cache-npm
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: 安装依赖
        if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
        run: |
          npm install gulp-cli -g #全局安装gulp
          npm install --save

      # 下面如果没有装bilibili魔改插件的可能会报错
      - name: 生成静态文件
        run: |
          hexo clean
          hexo bangumi -u #bilibili番剧更新
          hexo generate


      - name: 部署到Github
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          token: # 这里填上面操作生成的token
          repository-name:  # 这里填你博客仓库的名字即，username/xxx.github.io
          branch: master  # 这里的分支就是你博客仓库的分支
          folder: public
          commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"

打开本地博客根目录下的.gitignore目录输入以下内容,并把主题目录butterfly下的.git文件夹删除。
注意：如果不是butterfly主题，把最后一行内容换成自己当前使用的主题
1
2
3
4
5
6
7
8
9
10
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/butterfly/.git

在博客根目录打开终端，依次执行以下的命令即可

git remote rm origin #删除原有的仓库链接
git remote add origin # 这串命令后接hexo-source-Repo仓库的ssh
git checkout -b master #切换到master分支,就是仓库使用的分支
# 2020年10月后github新建仓库默认分支改为main，注意更改,下面同理
git add .
git commit -m "github action update"
git push origin master #得改成main,就是仓库使用的分支