摘要: 本文以up主CodeSheep从零开始搭建自己的个人博客 视频为框架,记录本小白从零搭建个人博客的过程(原创),重点表述⚠️搭建过程中遇到bug如何解决,以及补充视频没有的细节,文章以图文形式呈现,保姆级教程💗细节满满,希望帮小伙伴们,在第一次搭建过程中排坑,一步到位!
第一章 博客环境搭建
搭建设备:MacBook pro14
- 安装Nodejs
- 安装hexo博客框架
下载Nodejs
安装:一直点下一步就完事
超级用户模式
进入终端切换到超级用户模式
sudo su
(输入密码)
node -v #查看刚才安装的node版本
npm -v #查看npm版本
安装hexo博客框架
npm install -g cnpm --registry=http://registry.npm.taobao.org
#安装淘宝的cnpm 镜像源(比较快)
即使输入错了没有关系,从头安装
cnpm -v
#查看cnpm版本cnpm install -g hexo-cli
#安装hexo框架hexo -v
#查看hexo版本 验证
开始使用hexo搭建
1 | pwd #查看当前目录 |
待会所有博客的东西全都在blog这个文件夹里生成
⚠️如果过程中出了什么错误,直接把blog这个目录删了重来就好了
1 | cd blog #进入blog目录 |
sudo hexo init #生成博客 初始化博客
初始化,成功后,会显示Start blogging with Hexo!
我们可以看一下目录生成了哪些东西ls -l
hexo s #启动本地博客服务
<http://localhost:4000/ >#本地端口访问地址
你可以在浏览器打开查看,并且里面默认为你生成了一篇博文
别忘了 control+c退出
hexo s 启动预览文章,平时修改文章可以这样查看修改
第二章 新建一篇博文
- hexo n
- hexo c
- hexo g
- hexo s
hexo n "我的第一篇文章" #创建新的文章
查看目录进入到文章所属目录,查看是否有此篇文章
pwd 查看当前目录 给博文加点内容,直接在vim编辑器打开
实际情况可以用vscode等软件编辑器打开
备注;vim代码编辑器,也可以当记事本使用
O(大写) 进入插入模式
随便写点
hexo g
写好之后,我们需要生成一下⚠️必须要在blog目录下hexo g
因为之前进了两层所以现在退回去
hexo c
hexo clean 清理一下本地端口网页面
生成一下
hexo g
可以看到刚才保存好的文章
hexo s
在本地端口预览一下刚才修改的文章
此时 博客搭建已经完成✅啦~
第三章 本地博客部署到远端
排两大坑
目的:方便以后直接通过GitHub这个地址访问我们的博客
- 登陆GitHub(没有直接注册一个)
- 建仓库
- 安装git(⚠️补充排坑)
- 设置ssh密钥(⚠️补充排坑)
进入GitHub官网登陆账号
建仓库
找到下图位置,点击,再 create a new repository
⚠️用户部署个人博客的GitHub仓库的命名必须符合特定要求
仓库命名(要求如图)
点开仓库查看一下
这个页面先留着,等会配置东西需要
创建新仓库
Github创建一个新的仓库 YourGithubName.github.io
cnpm install --save hexo-deployer-git #在blog目录下安装git部署插件
bug
⚠️ 这一步也许成功不了 解释:新Mac需要安装git工具,旁边会跳出一个提醒“‘git’命令需要使用命令行开发者工具。您需要现在安装改工具吗?” 解决:点安装! 耐心等待⌛️安装 时间比较久
安装git
这种系统提示,万一没有跳出(git补充安装)直接去官网安装git
安装好git后 执行刚才失败的操作
cnpm install --save hexo-deployer-git #在blog目录下安装git部署插件
添加仓库地址
有个关键的东西需要设置一下
如图所示
vim _config.yml
我们在文件地步做一些修改
中间篮筐复制刚才仓库的地址 其他照抄
⚠️中间篮筐填写(一个大坑),填错了后面配置ssh密钥非常麻烦
填写好之后英文状态下:wq(不然可能没反应
这里和视频中填写的地址不同,视频里填的是HTTPS地址,先说明一下如果填写那个地址以后每次部署到远端就需要输入密码登录一次,非常麻烦。
填写SSH地址为的是后面免密hexo d,需要将 Mac上ssh密钥添加到GitHub上,但绝对是一劳永逸的操作!
Github的SSH密钥配置
- 介绍
SSH(Secure SHell):是一个提供数据通信安全、远程登录、远程指令执行等功能的安全网络协议,使用ssh往GitHub上push项目,不需要再次输入账号密码。
设置git
运行命令行配置你的name和email
1 | 查看配置 |
1 | git status |
gitHub ssh密钥配置
- 检查是否存在SSH Key
- 创建新的ssh key
- 获取ssh key公钥内容
- 添加公钥到github
- 验证是否设置成功
检查ssh key
1 | cd ~/.ssh |
如果存在 id_rsa 和 id_rsa.pub文件,说明已经有SSH Key,没有则创建新的
添加ssh key
$ ssh-keygen -t rsa -C “content neirong”
-t :密钥的类型
-C : 用于识别密钥的注释
输入ssh-keygen -t rsa -C "你的邮箱"
会发现 .ssh 目录生成了两个文件:id_rsa和id_rsa.pub
id_rsa 文件是私有密钥,id_rsa.pub是公开密钥
获取公钥内容
输入cat ~/.ssh/id_rsa.pub
添加公钥到GitHub
New SSH key 把复制的公钥文件复制进入
验证是否设置成功
用私有密钥与GitHub进行认证和通信ssh -T git@github.com
出现以下说明成功通信
Hi (你的用户名)! You’ve successfully authenticated, but GitHub does not provide shell access.
部署到远端
操作完之后可以部署远端啦 hexo d
出现下面标志成功
这时可以查看你的GitHub仓库,发现多了东西,说明已经推成功啦
现在我们来直接访问一下仓库名
记得刷新一下
第四章 换个主题吧~
yilia主题
想要其他主题可以自行搜索🔍 这里是yilia主题
在终端输入
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
⚠️这些操作都是基于blog目录下操作的
把主题配到博客中去
当前在 themes/ 目录下 cd ..回到上一级
在blog目录下操作
修改这个文件 翻到👇下面 如图所示
修改成yilia主题后保存退出
- hexo clean
- hexo g
- heox s
- hexo d
改了主题不是立刻生成,需要等一下
到这里就已经全部完成✅啦~
-------------本文结束感谢您的阅读-------------
本文链接: http://example.com/2022/09/01/金金的第一篇博客文章/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!