Blog搭建基础

Blog搭建基础
xiaoze本帖作为本blog前期搭建record,记录我的blog搭建过程,方便以后查阅。
准备
- 操作系统:Windows10/11
- Node
- Git
- GitHub 帐号
- Hexo
- Visual Studio Code
- 一个域名(推荐买个域名)
- 云服务器(可选)
安装Node.js
Node.js官网下载安装包,安装完成后,打开命令行,输入
node -v
和npm -v
,如果出现版本号,则说明安装成功。(官网打不开就用中文网)安装完成后,检查是否安装成功。在键盘按下
win + R
键,输入CMD
,然后回车,打开CMD窗口,执行node -v
命令,看到版本信息,则说明安装成功。我的版本是v20.18.0
,npm版本是v10.8.2
修改npm源。npm下载各种模块,默认是从国处服务器下载,速度较慢,建议配置成淘宝镜像。打开CMD窗口,运行如下命令:
1
npm config set registry https://registry.npm.taobao.org
安装Hexo
在目标路径打开CMD窗口,输入如下命令安装
1
npm install -g hexo-cli
安装完后输入
hexo -v
验证是否安装成功。我的版本是7.3.0
Github注册与创建仓库
Github官网
Sign up
(注册),填写自己的邮箱、密码、用户名等信息,然后用邮箱验证即可完成。注册完成后,点击右上角的+按钮,选择
New repository
,创建一个<用户名>.github.io
的仓库。- 仓库的格式必须为:
<用户名>.github.io
(注意:前缀必须为用户名,不要等后面404了再来为什么!!!) - Description:为描述仓库(选填)
- 勾选
Initialize this repository with a README
初始化一个 README.md 文件(选填) - 点击
Creat repository
进行创建
- 仓库的格式必须为:
Git安装
安装完成后,打开命令行,输入
git --version
,如果出现版本号,则说明安装成功。我的的版本是2.47.0
点击电脑左下角开始即可看见
Git Bash
。Git CMD
是windows 命令行的指令风格Git Bash
是linux系统的指令风格(建议使用)Git GUI
是图形化界面(新手学习不建议使用)
常用命令
1
2
3git config -l //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户(全局)配置配置用户名和邮箱
1
2git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"通过
git config -l
检查是否配置成功,至此git安装及配置全部完成。
连接至Github
执行以下命令生成ssh公钥,此公钥用于你的计算机连接Github
1
ssh-keygen -t rsa -C "你的邮箱"
之后打开C盘下用户文件夹下的.ssh的文件夹,会看到
id_rsa.pub
用记事本打开上述图片中的公钥(id_rsa.pub),复制里面的内容,然后开始在github中配置ssh密钥。将 SSH KEY 配置到 GitHub
进入github
,点击右上角头像 选择settings
,进入设置页后选择SSH and GPG keys
,名字随便起,公钥填到Key那一栏。测试连接,输入以下命令
1
ssh -T git@github.com
出现连接到账户的信息,说明已经大功告成,至此完成了环境准备工作。
初始化 Hexo 项目
用vscode打开目标路径(我的路径为
D:Codefield/Blog
)文件夹,打开一个终端,执行hexo init
初始化项目。1
hexo init
输入
npm i
安装相关依赖。1
npm i
初始化项目后,blog有如下结构:
- node_modules:依赖包
- scaffolds:生成文章的一些模板
- source:用来存放你的文章
- themes:主题
- .npmignore:发布时忽略的文件(可忽略)
- _config.landscape.yml:主题的配置文件
- config.yml:博客的配置文件
- package.json:项目名称、描述、版本、运行和开发等信息
输入hexo三件套
hexo c;hexo g;hexo s
启动项目打开网址 ,看到效果,说明你的博客已经构建成功了。
将静态博客挂载到 GitHub Pages
安装
hexo-deployer-git
1
npm install hexo-deployer-git --save
修改
_config.yml
文件
在blog-demo目录下的_config.yml,就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。修改最后一行的配置,将repository修改为自己的github项目地址,还有分支要改为main代表主分支(注意缩进)。1
2
3
4deploy:
type: git
repository: git@github.com:XIAO-ZE1/XIAO-ZE1.github.io.git
branch: main修改好配置后,运行如下命令,将代码部署到 GitHub(Hexo三连)。
1
2hexo 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时可能要你输入 username 和 password。
如果出现Deploy done,则说明部署成功了。
稍等两分钟github部署完毕,打开浏览器访问github page
:https://XIAO-ZE1.github.io ,就可以看到博客内容了。