如何用Hexo搭建个人博客?
前言
我的个人博客搭建成功啦!
网上的教程大多年代过于久远,而版本是一直在更新的,会让新手踩很多坑。
基于这种情况,我将通过这篇文章将教会大家如何从零开始,快速搭建属于你的个人独立博客。
废话不多说,让我们马上开始!
教程中插入图片能使教程流程更清晰,但会受网络影响,
教程中图片可能会加载比较慢,建议在图片位置停留5s左右以防缺漏
😘有问题可以文章底下留言
第一步:准备环境工具
创建github账号
点击查看教程
github官网直达
点击右上角Sign up
注册账号
用户名username
会关系到你的默认域名,请慎重!!
nodejs和git的安装
点击查看教程
下载nodejs
nodejs官网直达
下载你的电脑对应系统的版本即可,请选择下载LTS长期支持版本
下载完点开安装包,一直点下一步即可下载git
git下载直达
win的下载完点开安装包,一直点下一步即可验证是否安装成功
以管理员运行cmd,依次输入1
2
3node -v
npm -v
git -version如果都有版本号则说明都安装成功了
第二步:git常用命令
点击查看教程
git常用命令
1
2
3git config -l //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户(全局)配置如果是第一次使用git的话需要配置用户名和邮箱
1
2git 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 的 deployer1
2hexo init
npm install hexo-deployer-git --save
时间可能比较长,请耐心等待~ 完成后我们的博客根目录下就会出现一些初始文件和文件夹了
名称 | 类型 | 描述 |
---|---|---|
node_modules | 文件夹 | 依赖,安装的插件依赖都在这 |
scaffolds | 文件夹 | 生成文章的一些模板 |
source | 文件夹 | 源码,未被Hexo渲染的md文件,写的文章存放在这里面 |
themes | 文件夹 | 主题,安装的主题都在这 |
_config.yml | 文件 | Hexo 配置文件 |
_config.landscape.yml | 文件 | 主题的配置文件 |
package.json | 文件 | 你下载的npm插件等包括版本号会记录在这 |
二、运行验证
现在我们已经可以在本地部署看看效果了。
回到博客文件夹根目录,右键git Bash here
输入以下命令1
2hexo generate // 或者输入 hexo g
hexo server //或者输入 hexo s
执行完即可点击链接 http://localhost:4000/ 查看效果
点击查看初始效果图片
能看到下面图片中的界面样式说明博客已经构建成功了。
第五步:通过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公钥,用于你的计算机连接Github1
2ssh-keygen -t rsa -C "邮件地址"
//引号里面填写你的邮箱地址,比如"xxxxxxxxxx@qq.com"直接回车。之后会出现:【直接回车将密钥按默认文件进行存储】
1
2
3Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_res):
//到这里可以直接回车将密钥按默认文件进行存储然后会出现: 【可直接回车】
1
2
3Enter passphrase(empty for no passphrase):
//这里是要你输入密码,其实不需要输入什么密码,直接回车就行
Enter same passphrase again:接下来屏幕会显示: 【告诉你生成保存公钥和私钥的文件系统目录位置】
1
2
3
4
5
6Your 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
5deploy:
- type: git
repository: # 这里粘贴你的`SSH`
branch: main
# YML文件格式要求严格,请注意缩进 - 改好后回到博客根目录打开
git bash here
,依次输入hexo cl
,hexo g
,hexo d
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 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
中选择githubContinue with GitHub
在导入选项选择这时候可以看到你github中的项目仓库了,选择你存储博客的仓库<username>.github.io
右边的Import
选项,导入该仓库部署(可以保持默认直接点击
Deploy
)
Project Name:起一个由字母、数字或者或者连字符组成的项目名称如:blog-demo
Deploy:点击Deploy部署
部署完成会显示Congratulations!
进入仪表盘(控制面板)
- 上述部署完成后的界面中点击右上角
continue to Dashboard
可以去到控制面板 - 或者直接在vercel首页(OverView)直接点击你刚刚部署的项目即可
- 上述部署完成后的界面中点击右上角
绑定自定义域名(请提前准备一个域名)
完成前置部署后,你现在有两种方式访问你的博客- GitHubPages提供的:
username.github.io
【网速不稳定,访问较慢】 - Vercel部署时提供的:
blog-demo.vercel.app
【GFW把Vercel屏蔽了,需要梯子】
接下来介绍绑定你购买的域名:下面假设域名为
demo.com
为例:- 进入刚刚部署的项目的仪表板
- 点击查看域
(View Domains)
或者直接点击Domains
- 可以看到vercel给我们的二级域名
blog-demo.vercel.app
现已被屏蔽
- 可以看到vercel给我们的二级域名
- 在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
- GitHubPages提供的:
解析(你在哪里买的域名就去哪里的控制台去解析域名)
- 以阿里云为例:登录账号后,点击右上角进入
控制台
- 点开左上角菜单栏,点击
域名
在
域名列表
中选择你的域名,在操作选项中点击解析
在跳转后的界面 点击添加记录
- 记录类型 填 vercel 给你的
Type
值 - 主机记录 填 vercel 给你的
Name
值 - 记录值 填 vercel 给你的
Value
值 - 其他保持默认即可,点击
确认
添加
- 记录类型 填 vercel 给你的
可能有多个解析要添加,重复第3步的添加解析就行了。添加完成后回到vercel等待5s左右,vercel就会显示该域名成功解析(原本打红
X
的地方变成√
)。多个解析的原因如下:- 一级域名如
demo.com
会需要添加两条解析记录,一条是A类型,一条是CNAME类型
- 一级域名如
- 以阿里云为例:登录账号后,点击右上角进入
以后直接访问绑定的域名即可访问博客网站了:
demo.com
,速度变快了不只一点点当你有了新的域名后,需要在博客配置文件
_config.yml
文件中的url配置项
为自己的新域名,这样博客的文章链接才会正确生成。- 如:
url: https://demo.com/
- 如:
该教程参考了众多博主的教程,再由本人搭建博客时总结而来。仅供参考!!!🚀🚀🚀