搭好架子,实现可以用链接访问先。
一、安装环境
1. 去node官网下载Node.js,安装后回到终端。
位置:
Node.js /usr/local/bin/node
npm /usr/local/bin/npm
2. 打开「终端」,接下来需要输入命令的的操作都在终端里输入。
终端常用指令:
pwd #查看当前位置,启动终端的位置一般在用户文件夹
cd Banli/ #进入叫Banli的文件夹
cd /User/Banli/Documents #进入文稿
cd /User/Banli/Documents/123 #进入文稿里的 123文件夹
mkdir BBB #在123文件夹里创建叫BBB的文件夹
cd ../ #退到上一级
cd ../.. #推到上两级
hexo clean #清理hexo
文件拖到终端里可以查看「在终端里用的」路径;
⚠️ 所有的符号都要是英文符号哦!
⚠️ 输入指令前用 pwd 查看当前路径,需要始终都在博客文件夹路径下!(如我的博客文件在 Users/Banli/blog,那我的操作始终在这个路径下)。
3. 开放权限:
sudo su #✏️输入这几个字母,回车
Passwoed: #✏️输入电脑密码
sh-3.2# #✅自动换行表示成功了。可能会显示别的啥
权限这步要放在前面,不然会报错。如果后面的步骤又报错权限被拒,可以再开放下权限。
4. 检查 node.js 是否安装成功:
node -v #✏️输入这几个字母,回车
v10.15.3 #✅显示版本号,表示成功了
npm -v #✏️输入这几个字母,回车
6.4.1 #✅显示版本号,表示成功了
5. 通过 cnpm 安装淘宝的镜像(说是比直接安装快)
npm install -g cnpm --registry=https://registry.npm.taobao.org
这时候会自动安装(有个进度条的),安装完了会自动换行;
6. 检查 cnpm 是否安装成功:
cnpm -v #✏️输入这几个字母,回车,显示以下内容表示安装成功
cnpm@6.0.0... #✅略
7.正式安装 Hexo
cnpm install -g hexo-cli #✏️输入这几个字母,回车
Downloading hexo-cli to....... #✅显示下载中
8.验证
hexo -v #✏️输入这几个字母,回车
hexo-cli: 1.1.0 #✅显示版本,成功
.... #略
⚠️ 官网说要装 Xcode,老老实实装了
二、搭建博客
1. 建立文件夹
pwd #✏️查看文件夹位置
/Users/banli #✅显示文件夹所在路径
mkdir blog #✏️新建文件夹,blog是文件夹名称,上行路径会生成一个blog文件夹
cd blog/ #✏️进入blog文件夹
pwd #✏️检查路径是不是对的
/Users/banli/blog #✅嗯,是对的
⚠️ 也可以直接在文件夹里新建,一样的。
2.用 hexo 生成博客
sudo hexo init #✏️输入
INFO Cloning hexo-starter to /Users/Banli/blog #✅自动克隆了个叫landscape的主题
.... #略
INFO Start blogging with Hexo! #✅初始化完成
ls -l #✏️输入,看一下目录下生成了哪些东西
total 296 #✅显示生成的东西
.... #略
3. 启动博客
hexo s #✏️输入
INFO Start processing #✅显示,在本地4000端口启动
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
在浏览器输入「http://localhost:4000」即可打开博客,默认主题长👇这样。
下一步该是新建博文了,但是到这个地方出现了一次问题,输入命令回车没反应;👇
补充:输入命令回车没反应是因为,要先停止预览博客才可以继续编辑!「Ctrl+C」停止博客。
当时不知道咋办,就想着删掉了重新来一遍,虽然最后也显示了「 Start blogging with Hexo!」,但是中间还挺多「 ERRO 」的。这样就没法启动了~
看到了别人用了不同的命令生成博客的,试下是可以的。删掉文件、关掉终端(刚刚才发现不重启路径在垃圾桶里,不知道前面失败的跟这个有没有关系)。
⚠️ 没有重新开启终端 / 用命令回到初始路径,无法新建博客。因为「当前位置」会随着被删除得文件一起去到垃圾桶
搭建博客方法二:
用于用「sudo hexo init」指令生成博客报错时。
1. 新建文件夹并生成博客
先进入对应文件夹。不进入指定文件夹博客文件会放在「用户」文件夹下,像前面的方法一。我还不知道怎么进入指定文件夹,就用的默认位置:
cd /Users/Banli/Documents/ # ✏️进入文稿
省掉了单独新建空文件夹的步骤,直接安装并新建文件夹:
hexo init blog #✏️安装在新文件夹「blog」里
INFO Cloning ... Start blogging with Hexo! #✅显示相同上,完成,没有报错
进入到「blog」文件夹:
cd blog #✏️进入文件夹
cnpm install #✏️安装cnpm
⚠️ 没有进到 blog是无法运行博客的,运行「hexo s」一定会报错。
c
2. 运行博客
hexo s #✏️和前面一样
但是提示 4000 端口被使用了:
FATAL Port 4000 has been used. Try other port instead.
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
需要换一个端口:
hexo s -p 5000 #✏️换成 5000 端口
INFO Start processing #✅显示成功,在本地5000端口启动
INFO Hexo is running at http://localhost:5000 . Press Ctrl+C to stop.
浏览器输入「http://localhost:5000」打开博客。
这个时候终端是无法接收指令的(方法一最后导致我重使的情况!)
「运行」博客更像是「预览」吧,而且不是实时预览,需要停止后才能继续接收指令哦。
Ctrl+C #停止运行博客
停止后就看不到博客预览了。
三、上传到 GitHub
1. 建仓库
登录Github,点击「new repositories」新建仓库,名字输入自己的 Github 用户名+github.io,其他默认。
创建好后,复制👇这条地址,一会儿会用到。
2. 配置
回到博客文件夹,找到 「_config.yml」文件,用代码编辑器打开(我用的「Sublime Text」)。
找到「#URL」-「url」,改成自己的站点地址:
url: http://liubanli.github.io #✏️换成自己的 github 地址
翻到最末尾,找到「deploy」,类型填写「git」并补上「repository」后面的内容:
deploy:
type: git
repository: https://github.com/liubanli/liubanli.github.io.git #✏️仓库地址
branch: master #✏️增加
⚠️ liubanli 是我的 Github 用户名,改成你自己的 / 冒号后面要空格
保存。可以关闭代码编辑器了。
3. 部署
blog的文件里要装一个 git 的部署插件,回到终端:
cnpm install --save hexo-deployer-git #✏️输入
cnpm install hexo-deployer-git --save #✏️顺序2
顺利安装完成。提交需要依次执行下面这三个命令:
hexo clean #✏️清除hexo
hexo g #✏️「generate」的简写,生成
hexo d #✏️「deploy」的简写,部署
运行成功之后需要依次输入 GitHub 的用户名,GitHub 的密码。
部署成功最后后会显示:
INFO Deploy done: git #✅成功
Github 上这个仓库的页面就有内容了。
👆复制仓库地址
👆粘贴到浏览器地址栏,就可以访问博客了
补充:后来我又把GitHub用户名换了,本地预览可以,但是传不上 GitHub 了!!重新生成博客不行。后来全部删除重装,中间安装 Hexo 的时候有提示无权限。然后也在 GitHub 添加了公钥。
4. 添加公钥
重新开下终端,回到默认位置
ssh-keygen -t rsa -C 你的邮箱号@sina.com #✏️输入生成公钥指令
Enter file in which to save the key (/Users/Banli/.ssh/id_rsa): #直接确定
Enter passphrase (empty for no passphrase): #✏️输入电脑密码
Enter same passphrase again: #✏️确认密码
这时候会出来一串东西(不是公钥):
Your identification has been saved in /Users/Banli/.ssh/id_rsa.
Your public key has been saved in /Users/Banli/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:4EuZ******************ig banli1001@sina.com
The key's randomart image is:
+---[RSA 2048]----+
| *******|
| ****|
+----[SHA256]-----+
提示你公钥生成好了存在「/Users/Banli/.ssh/id_rsa.」这里,电脑里没找到这个文件夹,搜也搜不到...而且这串码还不是公钥!
这里我进行了个操作,不知道到是不是必要的~
LBLCP:~ Banli$ cd ~/.ssh #输入了进入~/.ssh的指令
LBLCP:.ssh Banli$ pwd #查看位置
/Users/Banli/.ssh #变成了在「/.ssh」文件夹里
接下来查看真正的公钥:
cat id_rsa.pub #✏️查看公钥指令
后出来的才是公钥,大概长这样:
ssh-rsa AAAA***好几行字母*** banli1001@sina.com
从开头的「ssh-rsa」复制到邮箱号收尾。
位置:GitHub 》个人设置 Settings 》SHH and GPS Keys
点击「New SSH key」,添加钥匙;
标题空着,把刚刚复制的公钥粘贴到 Key 那栏里。
然后上传。
参考
Bilibili 手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo
3.CSDN 查看本机ssh公钥,生成公钥