本文采用[[Hexo]]+[[Git]]+[[Nodejs]]+[[Github]]+Aliyun+[[Vercel]]方式搭建个人博客网站


一,必备工具的安装

下载Git,Nodejs,Hexo

  1. 官网下载git,nodejs并安装
  2. 测试是否下载成功:
    打开cmd,输入:
1
2
3
node -v
npm -v(这个是node附带的)
git -v

出现版本号即为安装成功
3. 下载Hexo:
在cmd中输入:

1
npm install hexo-cli -g

git与github的账户配置(如果你已有git和github账号,请忽略此步)

  1. 进入任意文件夹,右键空白处然后点击Git Bash Here,输入:
1
2
git config --global user.email "你的邮箱"
git config --global user.name "你的名字"
  1. 进入GitHub网站,注册一个账号

二,创建GitHub仓库

  • 进入GitHub网站,点击Create a new repository进入新建仓库页面,仓库名输入:
1
用户名.github.io
  • 勾选 Public
  • 勾选 Add a README file
  • 拉到下面点击create创建

三,生成SSH Keys

  1. 进入任意文件夹,右键空白处然后点Git bash here,输入:
1
ssh-keygen -t rsa -C "邮件地址"
  • 然后敲4次Enter⌨️
  • 然后进入C:\Users\用户名,在里面进入.ssh文件
  • 用记事本打开里面的id_rsa.pub,全选复制里面的代码
  1. 同步至GitHub:
  • 打开github
  • 进入用户设置,找到SSH keys
  • 新建SSH keys,名称随意,在下面粘贴代码,
  • 然后创建
  1. 测试是否成功,在git bash中输入:
1
ssh -T git@github.com

(注意,如果你使用了Watt Toolkit这类的加速器软件,在这一步请暂时关闭它)

  • 回车,然后再输入yes

四,在本地生成网页内容

  1. 在喜欢位置新建文件Blog,然后进入文件夹,右键空白处然后点Git bash here,输入:
1
hexo init
  • 如果‘command not find’,就在前面加上npx,如:npx hexo init
  1. 依次输入以下3条:
1
2
3
hexo install
hexo g
hexo s

(如果不成功的话就重复直到成功,因为国内与github连接不稳定)

  • 现在就可以复制生成的链接进入浏览器看到我们生成的本地服务器了
  • 然后回到命令行,ctrl+c关闭

五,上线网站

  1. 进入之前的Blog文件夹,用记事本打开_config.yml,拉到最下面将deploy后面的全删掉,复制粘贴这段:
1
2
3
type: git
repository:
branch: main
  • 注意缩进格式:每行前面都有两个空格不要删,每个冒号后面都有个空格也不要删!
  1. 去github之前生成的仓库页面,点code,复制https链接,将其粘贴到我们记事本中的repository:后面,然后保存退出
  2. 回到博客文件夹,git bash,安装自动部署发布工具:
1
npm install hexo-deployer-git --save
  1. 然后在Blog文件夹右键打开git bash,依次输入:
1
2
hexo g(生成)
hexo d(上传)

g-generate d-deploy(hexo d如果不成功,请挂加速器)

  1. 接下来我们就成功把本地内容上传到github了,上传成功以后,我们就算搭建好了!上自己的网址看看吧!网址是我们之前设的仓库名:用户名.github.io

六,网站配置

我们的博客标题还是默认的hexo,整个页面是初始默认的,接下来我们对其进行修改
用记事本打开我们blog文件夹中的_config.yml文件
将#Site下面按自己的需求填上:

1
2
3
4
5
6
7
8
## Site
title: 标题
subtitle: 副标题
description: 描述
keywords: 关键词
author: 站主
language: 语言(可以填写zh-CN)
timezone: 时区(可以填写Asia/Shanghai)

注意:每次修改网页后都要在git bash中执行一次”hexo三件套”,即:

1
2
3
hexo cl
hexo g
hexo d

七,购买域名

进入阿里云,购买一个喜欢的域名并记住


八,接入服务器

vercel创建project

  1. 打开vercel网站,这是一个前端项目部署平台,用你的GitHub账号注册一个新账号
  2. 点击右上角的add new–project,在Import Git Repository中找到你的网站仓库,点import–Deploy

DNS解析

  1. 部署完成后,点击进入你的project,点击右上角的domains–add,将你购买的域名填进去,点add domain,此时在domains中会新增两个网站,记住他们的类型(一般是A和cname)和ip地址(即value)
  2. 再次进入阿里云,在域名列表里找到你的网站域名,点”解析”–快速添加解析:选择匹配的类型(A即IPv4,CNAME即另外的目标域名)与对应的网站域名,填入对应的ip地址,点”确定”
  3. 此时再回到vercel,新增的两个网站应该都显示正常了,这两个网址即为你的博客网站的地址,可以直接进入了