这篇文章已经发表了 1984 天了,其中某些内容可能已经过时。

前言

新型冠状病毒好可怕,出门还得带口罩口罩-小康博客

建议在阅读本教程前先学会如何使用 hexo。此教程不是零基础学会 hexo 系列。

  1. 我为什么要出这份教程?

    首先说明,我自己也是才转到静态博客不久。今天应该是第八天。当初迟迟没有转到静态博客的主要原因是因为发博客不方便。毕竟 hexo 是本地的。但是一次偶然间,我发现了云环境(其实就是一个网页版的 vscode),但其提供服务环境(Ubuntu、node 等)。于是我突发奇想,试试能不能通过这个来实现在线写博客。最后成功了,因为我觉得很简单。脸红-小康博客

  2. 实现云部署需要准备什么。

    必须:

    • git 的基本知识

      我认为这一点是必须的,不然不好操作。

    • 两个 git 仓库

      coding,码云,GitHub 等均可以。

    非必须:

    • 密钥

      1
      ssh-keygen -t rsa -C "your_email@example.com"

      这里不写详细教程了。总之生成完之后你的用户目录里会出现一个.ssh 的隐藏文件(如果看不到,请打开查看隐藏的设置)

      QQ截图20200208182813.png

      其中.pub 结尾的就是你的公钥了。这个是我们一会儿需要用到的。

      如果使用这种方式,无法使用 hexo 自动部署。

思路

首先我们来捋一下思路。

  1. 既然我们要部署静态博客,那么就需要将 public 目录上传。(当然,hexo d 会帮我我们做这件事情)所以我们这时就需要一个仓库。为了方便我管他叫仓库 1
  2. 那我们想做的还有在线写博客,那么就需要将博客的全部源代码上传,这时我们就又需要一个仓库。我管他叫仓库 2

既然明白了两个仓库的作用,那我们就可以开始了。

开始

这里我使用 coding,新建两个仓库。个人版与团队版都一样。

创建两个项目,我这里一个叫 page 代表仓库 1 一个叫 home 代表仓库 2

1.png

2.png
然后我们为了方便添加公钥,如果上一步没有生成公钥那么认证的时候可以使用账号密码。(将公钥文件右键用文本文档打开,复制里边的内容即可)

3.png
4.png

1. 配置文件

此步骤是为了方便演示,正常情况下你已经可以通过这个命令部署了。所以如果已经配置了的小伙伴无需新建仓库,来执行此步骤。保留原来的即可。并跳过此步骤看下一个步骤

这里我将我曾经的博客下载下来作为演示,首先将根目录的配置文件中的配置添加上我们的仓库。

1
2
3
4
deploy:
- type: git
repo: git@e.coding.net:imtzk/page.git
branch: master

安装插件,这样才可以使用 hexo d 的自动部署

1
npm install --save hexo-deployer-git

然后我们 hexo cl && hexo g && hexo d 测试下是否能够自动部署。

6.png

可以看到 成功部署了

2. 上传源文件

我们上传我们的博客源码到我们的第二个仓库。

那么执行的操作是:

  1. 在博客目录打开命令行工具

    7.png

    命令行工具自行斟酌,使用 git 的 bash 也可以。不过我在这里推荐一款 cmder 的工具。很好用,我很喜欢-小康博客

  2. 首先输入命令 git init

    8.png

  3. 然后执行添加文件的命令 git add .

    这里的. 代表添加此目录所有文件,但默认不会添加 publicmoudles 等目录。你也不需要担心,因为这些都是程序生成的。

    9.png

  4. 接下来是提交修改命令 git commit -m '第一次提交'

    gif-1

  5. 接下来我们添加远程的仓库

    进入项目,点击代码仓库就可以看到我们的项目地址了。

    10.png

    因为我已经添加过公钥了,所以我们直接用 ssh 的方式链接。输入以下命令即可上传到远程仓库

    1
    2
    git remote add origin 你的地址
    git push -u origin master

    git-2.gif

  6. 检查一下

    11.png

    我已经成功将博客源代码传到了第二个仓库。

3. 使用云环境

写文章

为什么使用 coding 呢?它的优势就来了,它可以直接点进去云环境,如果使用其他平台需要进入腾讯开发者平台。大家自行百度,这里不提供链接了。

12.png

进入云环境后先别急着创建项目,我们先点设置,将公钥黏贴到我们的 coding 中。

13.png

这一步和开始我们做的那个一样。这里就不演示了。

将公钥添加到 coding 后,我们开始创建项目。

  1. 新建工作空间

    14.png

    如图所示,环境选择 node.js,当然选服务器或者 Ubuntu 也可以,至于怎么配置自行百度。-小康博客这里强烈不建议非 node.js 环境。

    代码来源选择仓库,仓库的地址就是我们第二个仓库的地址。

  2. 创建

    创建完成后,我们进入工作空间。

    15.png

  3. 初始化环境

    等上一步加载完之后,就会出现这个界面。

    16.png

    如果你的界面打开之后是英文的,那么点击左边倒数第二个按钮,然后卸载掉 Chinese... 这个插件,然后在重装一下就好了。(重装后需要重新进入环境,右下角有提示。)

    17.png

    等待一会儿,我们的项目也就克隆了过来。

    18.png

    如果迟迟不出现,那么点击工具栏的终端 -> 新建终端 -> 输出。就可以看到进度了。如果出现错误应该就是你没有加公钥的问题了。

    19.png

  4. 给 cloud studio 安装 hexo

    点击工具栏的终端 -> 新建终端 -> 下边点击终端。输入一下两个命令

    1
    2
    npm install -g hexo-cli
    hexo install hexo --save

    gif-3.gif

    20.png

    等待安装完成即可。

    21.png

    不出意外,看到上面的提示 说明安装完成了,可以运行一下命令 hexo g 测试是否生成了文章。

    git-4.gif

    然后我们可以看到左侧,已经生成了 public 目录,并且终端也没有报错。(如果报错,说明你的文件有问题,检查一下主题文件是否存在。)

    22.png

  5. 用 cloud studio 写第一篇文章

    在终端中输入命令 hexo new 文章名来创建文章

    23.png

    然后打开 /source/_posts 就可以看到你刚刚创建的文章了。

    24.png

    写完文章后,(这个里边也是 ctrl+s 保存文章哦)

    我们设置一下我们的 git 标识 也就是邮箱和名字。这是 git 必须要求设置的。

    1
    2
    git config --global user.email "you@example.com"
    git config --global user.name "Your Name"

    接下来我们在终端输入 hexo 发布三连 hexo cl&&hexo g && hexo d 的命令。

    25.png

    这是已经发布成功了。

  6. 查看文章

    上一步我们已经发布完成了。接下来打开看一下。

    26.png

    可以看到我们刚刚上传了,因为 coding 需要实名,而我还没有实名认证,因此不演示界面了。

  7. 结束

    此时我们就解决了在线写文章的问题了。

同步文章到仓库

为什么会有这一步?其实很简单,你写的文章都在你的云环境中,并没有同步到你的第二个仓库里(是不是忘了还有这个仓库?-小康博客)接下来我们就将代码同步到第二个仓库里。

  1. 添加代码 git add .

    git-5.gif

  2. 然后提交 git commit -m 'cloud提交'

    引号里边的内容根据自己写。

    git-6.gif

  3. 提交代码到远程仓库 git push origin master

    git-7.gif

    提交完后可以看到代码仓库的提交记录

    27.png

4. 克隆到本地

也就是本地编辑,那么第一步需要克隆项目到本地。

git clone 你的项目地址

注意这里的项目地址指的是仓库 2,也就是博客全部文件的那个仓库。

克隆完之后,在此目录打开命令行工具,npm install hexo --save

5.png

等待安装完成后,就可以正常的操作了。也就是你平时你怎么用,克隆回来还是怎么用。

上传

这里讲一下如何将本地的文件同步到第二个仓库里。

  1. 将项目克隆到本地,也就是上面文字介绍的。这里不演示了。

  2. 同样的我新建一篇文章,并且编辑。(这里跳过了部署的过程,当然你可以部署完后在同步)

  3. 添加文件 git add .

    28.png

  4. 提交修改 git commit -m '本地修改'

    29.png

  5. 推送到远端 git push origin master

    30.png

至此,基本上就完成了大部分操作了。

5. 其他问题

在日常使用的工程中,可能会遇到这种情况

本地代码推送到了仓库,使用 cloud studio 发表了两个文章,在使用本地的代码无法推送了。或者是本地推送了几次,cloud studio 无法推送了。

这样的原因很简单,是因为你当前的版本与服务器的版本不一致造成的。这里涉及到 git 协同工作的问题了。

如果又能力的小伙伴可以使用 git pull 把最新的提交拉去下来。

当然我相信大多数小伙伴是不太会操作的。那解决方法也很简单,删掉以前的文件(或云环境),重新 clone(创建一个云环境)一下就好了。

当然删除之前记得备份一下仓库里没有的文章或修改的配置。

所以 强烈建议大家每次发表完文章,同步一下自己的修改到第二个仓库。

最后,如果我的文章对你有帮助,那么你可以点下边的赞赏按钮,请作者喝杯咖啡哦!

如果图片失效请在下方留言,或联系作者。

原创不易,所有文字及图片都是我自己一个一个弄得。
搬砖党请尊重一下作者,转载请标明出处。