前言

这个时候,你已经把属于你的博客搭建完成了,但是只能使用本地连接去访问就很憋屈。

毕竟,想搭建一个博客除了写作之外就是想把自己写的东西展现给别人看,可是本地连接别人又怎么去访问呢?

所以,接下来我会教你把你的博客搭建在一些平台上

这里作为教程,举的例子是在GitHub、Coding这两个代码托管平台上搭建,以及部署到服务器(阿里云)的教程,其余平台可能会有稍许不一样,但是大致方式雷同

对比

但是在开始之前,我想让你知道这三种部署方式的区别,以及他们的速度如何

服务商 GitHub Page Coding Page 服务器
方式 Git部署 Git部署 SFTP部署
缺点 慢,且百度一般无法收录 较快,可以收录,但是经常在维护 快,可以收录,但是钱包……
绑定域名 较难理解 最为方便 要是使用了第三方服务辅助,还是比较简单的

注:以上均为我个人使用感受,如果有不同,请以个人实际情况为准,此表格仅供参考

开始部署

代码托管平台部署

注意:以下两种方式的使用前提:

1.有对应的账号,关于注册账号不会提供教程(相信你也用不到)

2.确保你的博客环境配置完毕,如果没有,我的博客也有相关教程,请移步:Hexo环境配置)

3.会基础使用Git、Npm

GitHub

如果你开启了浏览器自带的英文翻译,请关闭,除非你可以确保自己所做的步骤和教程中的没有区别

创建仓库

首先进入GitHub

点击右上角加号

github-1.png

在下拉菜单中点击New repository

github-2.png

在接下来的配置中,按照下图说明去填写

github-3.png

填写完毕之后,点击Create repository

到这里,你的仓库就算是创建好了

连接你的仓库并上传

在我还是新手的时候,我在网上找相关的教程,发现有的教程需要配置SSH Key,有的不需要。

我也不知道配置了这个有什么用处,个人觉得唯一的区别就是上传方式不同吧,一个是SSH,一个是https上传

但是各求所需,以下两种方式都提供了,请按需选择

方式一 使用SSH Key进行连接
检查是否有SSH Key存在

首先,随便找个地方右键打开Git Bash Here

右键菜单

输入以下命令:

1
2
3
cd ~/.ssh #此命令为检查你的电脑上是否有SSH Key存在
ls
ll

如果你输入命令之后没有出现下图类似的情况,那就说明你需要配置SSH Key

SSH-1.png

配置SSH Key

首先配置你git的user name和email

输入以下命令:

1
2
git config --global user.name "用户名"
git config --global user.email "邮箱"

SSH-2.png

接下来生成SSH Key

输入:

1
ssh-keygen -t rsa -C "邮箱"

中途可能会有这三次提示:

1
2
3
Enter file in which to save the key (/c/Users/zqc40/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

不用管,直接Enter继续

SSH-3.png

然后再输入命令检查:

1
2
3
cd ~/.ssh #此命令为检查你的电脑上是否有SSH Key存在
ls
ll

那如果出现了类似于这张图片中的结果,那就是完成了

SSH-4.png

在GitHub中添加SSH Key

首先继续在Git中输入命令:

1
cat id_rsa.pub #拷贝秘钥 ssh-rsa开头

会出现以下情况:

SSH-5.png

这就是接下来会要用到的秘钥,选择之后复制

获取秘钥还有一种方式,就是在你输入这一行命令:

1
ssh-keygen -t rsa -C "邮箱"

之后,会出现一个在你电脑上的文件路径:

SSH-6.png

根据这个路径,你会找到有这样几个文件:

SSH-7.png

记事本打开id_rsa.pub文件,并复制里面的内容,也是我们的SSH Key

SSH-8.png

回到GitHub网页,点击右上角的头像

SSH-9.png

选择Setting

SSH-10.png

在左侧选择栏里面找到并点击:SSH and GPG keys

SSH-11.png

之后在右上角找到一个绿色的按钮:New SSH key,点击新建

SSH-12.png

之后取个名字,把先前复制的一长串粘贴进去,并点击Add SSH key

SSH-13.png

如果出现这个界面,则再输一次你的GitHub密码即可

SSH-14.png

这样就成功了!

验证是否添加成功

在Git命令行内输入:

1
ssh -T git@github.com

中间可能会有这样的询问:

1
>Are you sure you want to continue connecting (yes/no/[fingerprint])? 

输入yes

如果有类似以下回复,那就是成功了

SSH-15.png

配置上传信息

打开你的仓库界面,点击Code

SSH-16.png

下拉之后点击Use SSH

SSH-17.png

点击之后你会发现下方的地址有变化,点击这个图标复制链接

SSH-18.png

之后回到你的博客文件夹,右键选择通过Code打开

右键菜单

打开之后在侧边栏中找到_config.yml文件,单击打开。

vscode-1.png

之后滑动到文件最后,找到这样的配置信息

vscode-2.png

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

找到之后,将其修改成这样:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: #这里填写你先前复制的SSH链接地址
branch: master #这里是分支信息,默认为master

填写好之后按下Ctrl+S保存

这种方法最大的好处是不需要每次同步的时候都输入密码,比较方便

方式二 直接使用Https连接
获取Https连接

打开你的仓库界面,点击Code

SSH-16.png

下拉之后点击以https:开头的链接后面的图标复制链接

https-1.png

配置上传信息

复制之后之后回到你的博客文件夹,右键选择通过Code打开

右键菜单

打开之后在侧边栏中找到_config.yml文件,单击打开。

vscode-1.png

之后滑动到文件最后,找到这样的配置信息

vscode-2.png

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

找到之后,将其修改成这样:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: #这里填写你先前复制的https链接地址
branch: master #这里是分支信息,默认为master

填写好之后按下Ctrl+S保存

开始上传

你要是直接上传的话,会提示你这样一行信息:

1
ERROR Deployer not found: git

这是缺少了一个Git上传的插件,同样的,接下来我们在博客文件夹右键点开Git Bash Here

右键菜单

打开之后输入这样一行命令:

1
npm install hexo-deployer-git --save

hexo-1.png

等到命令行中有这样一行代码之后:

1
+ hexo-deployer-git@版本号

就说明你安装完成了,这时候你就可以:

1
2
3
hexo clean  //清除之前生成的静态文件
hexo g //生成新的hexo静态文件
hexo d //上传文件
开启Github Page页面

进入仓库页面,点击右上角Settings

-2.png

下滑找到GitHub Pages选项

-4.png

Source中的None改为你的文件所在分支(默认为master)

更改完成之后点击Save

至此,你就可以使用GitHub生成的域名来访问你的页面了

域名配置

如果可以的话,你可以买一个属于你自己的域名,服务商我推荐阿里云或者腾讯云

至于你的域名是什么,那就看你自己的爱好了

那么买好域名之后,你就得要绑定到你的页面了

这里以腾讯云的域名解析界面为例,各家服务商的界面不同,但是操作一样,填入的数据也一样,所以请自行对比

解析域名

首先给你的域名加一个解析

打开你的域名商服务页面,到域名解析页面,加入以下CNAME解析:

-1.png

之后等待你TTL(单位为秒)写的时间

绑定域名

时间差不多了之后,你就可以绑定你的域名了

进入仓库页面,点击右上角Settings

-2.png

下滑找到GitHub Pages选项,之后根据以下图片操作

-3.png

等待一段时间之后你就可以使用了!

Coding

Coding Page需要实名,所以请不要忘记实名

创建仓库

鼠标移动至右上角的图标

coding-1.png

在下拉菜单中选择创建项目

coding-2.png

进入接下来的页面,选择第三个

coding-3.png

接下来按照图示填写相关信息

coding-4.png

最后点击完成创建

至此,仓库创建完毕

连接仓库并上传

获取仓库链接

创建完成之后会自动跳转到仓库内,在右侧栏中选择代码仓库

coding-5.png

点击右上角克隆

coding-6.png

在弹出的框中点击复制图标

coding-7.png

得到了你的仓库地址

配置上传信息

复制之后之后回到你的博客文件夹,右键选择通过Code打开

右键菜单

打开之后在侧边栏中找到_config.yml文件,单击打开。

vscode-1.png

之后滑动到文件最后,找到这样的配置信息

vscode-2.png

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

找到之后,将其修改成这样:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: #这里填写你先前复制的https链接地址
branch: master #这里是分支信息,默认为master

填写好之后按下Ctrl+S保存

开始上传

你要是直接上传的话,会提示你这样一行信息:

1
ERROR Deployer not found: git

这是缺少了一个Git上传的插件,同样的,接下来我们在博客文件夹右键点开Git Bash Here

右键菜单

打开之后输入这样一行命令:

1
npm install hexo-deployer-git --save

hexo-1.png

等到命令行中有这样一行代码之后:

1
+ hexo-deployer-git@版本号

就说明你安装完成了,这时候你就可以:

1
2
3
hexo clean  //清除之前生成的静态文件
hexo g //生成新的hexo静态文件
hexo d //上传文件

期间可能会弹出Coding的登录界面,按照提示输入用户名和密码登录即可

开启Coding Page

还是在右侧栏找到持续部署,点击下拉

coding-8.png

再点击静态网站

coding-9.png

第一次进去会提示你如下信息:

coding-12.png

点击立即发布静态网站

之后按照图示填写信息:

coding-10.png

填写完毕之后点击保存,之后出现的访问地址就是Coding自动生成的地址了,你就可以通过它来访问了

coding-11.png

至此,你就可以使用Coding生成的域名来访问你的页面了

域名配置

如果可以的话,你可以买一个属于你自己的域名,服务商我推荐阿里云或者腾讯云

至于你的域名是什么,那就看你自己的爱好了

那么买好域名之后,你就得要绑定到你的页面了

这里以腾讯云的域名解析界面为例,各家服务商的界面不同,但是操作一样,填入的数据也一样,所以请自行对比

解析域名

首先给你的域名加一个解析

打开你的域名商服务页面,到域名解析页面,加入以下CNAME解析:

coding-13.png

之后回到Coding的静态网站的配置页面,点击右上角设置

coding-14.png

往下翻,在下方自定义域名处绑定新域名填写你的完整新域名

coding-15.png

填写完毕之后点击绑定,刷新之后在绑定首选域名处将你绑定的域名设置为首选域名,并开启强制HTTPS选项

等待一段时间之后你就可以使用了!

服务器SFTP部署

安装部署插件

右键博客文件夹打开Git Bsah Here

右键菜单

打开后输入以下命令:

1
2
3
npm install hexo-deployer-ftpsync --save

npm install hexo-deployer-sftp --save

等到有

1
2
3
+ hexo-deployer-ftpsync@版本号

+ hexo-deployer-sftp@版本号

出现,则说明安装完成

配置上传信息

之后回到你的博客文件夹,右键选择通过Code打开

右键菜单

打开之后在侧边栏中找到_config.yml文件,单击打开。

vscode-1.png

之后滑动到文件最后,找到这样的配置信息

vscode-2.png

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

找到之后,将其修改成这样:

1
2
3
4
5
6
7
8
9
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: sftp
host: 主机公网地址
user: 主机sftp用户名
pass: 主机sftp密码
remotePath: 上传的路径,例如:/www/wwwroot/123
port: 主机端口,默认为22

填写好之后按下Ctrl+S保存

这时候你就可以:

1
2
3
hexo clean  //清除之前生成的静态文件
hexo g //生成新的hexo静态文件
hexo d //上传文件

常用的hexo相关指令

常见命令

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

缩写:

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令:

1
2
hexo s -g #生成并本地预览
hexo d -g #生成并上传

同时上传多个平台

同时上传多个平台,只需要在每一个之前用-隔开即可,且保证每个数据之前的间距相等

比如:

1
2
3
4
5
6
7
8
9
10
11
12
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: sftp
host: 主机公网地址
user: 主机sftp用户名
pass: 主机sftp密码
remotePath: 上传的路径,例如:/www/wwwroot/123
port: 主机端口,默认为22
- type: git
repo: #这里填写你先前复制的https链接地址
branch: master #这里是分支信息,默认为master

这样即可