专栏首页小康的自留地通过云环境部署Hexo静态博客

通过云环境部署Hexo静态博客

前言

新型冠状病毒好可怕,出门还得带口罩

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

  1. 我为什么要出这份教程? 首先说明,我自己也是才转到静态博客不久。今天应该是第八天。当初迟迟没有转到静态博客的主要原因是因为发博客不方便。毕竟hexo是本地的。但是一次偶然间,我发现了云环境(其实就是一个网页版的vscode),但其提供服务环境(Ubuntu、node等)。于是我突发奇想,试试能不能通过这个来实现在线写博客。最后成功了,因为我觉得很简单。
  1. 实现云部署需要准备什么。 必须:
    • git的基本知识 我认为这一点是必须的,不然不好操作。
    • 两个git仓库 coding,码云,GitHub等均可以。

    非必须:

    • 密钥 ssh-keygen -t rsa -C "your_email@example.com" 这里不写详细教程了。总之生成完之后你的用户目录里会出现一个.ssh的隐藏文件(如果看不到,请打开查看隐藏的设置)

    其中.pub结尾的就是你的公钥了。这个是我们一会儿需要用到的。 如果使用这种方式,无法使用hexo自动部署。

思路

首先我们来捋一下思路。

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

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

开始

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

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

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

1. 配置文件

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

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

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

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

npm install --save hexo-deployer-git

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

可以看到 成功部署了

2. 上传源文件

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

那么执行的操作是:

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

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

  1. 首先输入命令git init
  1. 然后执行添加文件的命令git add . 这里的.代表添加此目录所有文件,但默认不会添加publicmoudles等目录。你也不需要担心,因为这些都是程序生成的。
  1. 接下来是提交修改命令git commit -m '第一次提交'
  1. 接下来我们添加远程的仓库 进入项目,点击代码仓库就可以看到我们的项目地址了。

因为我已经添加过公钥了,所以我们直接用ssh的方式链接。输入以下命令即可上传到远程仓库 git remote add origin 你的地址 git push -u origin master

  1. 检查一下

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

3. 使用云环境

写文章

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

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

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

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

  1. 新建工作空间

如图所示,环境选择node.js,当然选服务器或者Ubuntu也可以,至于怎么配置自行百度。

这里强烈不建议非node.js环境。 代码来源选择仓库,仓库的地址就是我们第二个仓库的地址。

  1. 创建 创建完成后,我们进入工作空间。
  1. 初始化环境 等上一步加载完之后,就会出现这个界面。

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

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

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

  1. 给cloud studio安装hexo 点击工具栏的终端->新建终端->下边点击终端。输入一下两个命令 npm install -g hexo-cli hexo install hexo --save

等待安装完成即可。

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

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

  1. 用cloud studio写第一篇文章 在终端中输入命令hexo new 文章名来创建文章

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

写完文章后,(这个里边也是ctrl+s保存文章哦) 我们设置一下我们的git标识 也就是邮箱和名字。这是git必须要求设置的。 git config --global user.email "you@example.com" git config --global user.name "Your Name" 接下来我们在终端输入hexo发布三连hexo cl&&hexo g && hexo d的命令。

这是已经发布成功了。

  1. 查看文章 上一步我们已经发布完成了。接下来打开看一下。

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

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

同步文章到仓库

为什么会有这一步?其实很简单,你写的文章都在你的云环境中,并没有同步到你的第二个仓库里(是不是忘了还有这个仓库?

)接下来我们就将代码同步到第二个仓库里。

  1. 添加代码git add .
  1. 然后提交git commit -m 'cloud提交' 引号里边的内容根据自己写。
  1. 提交代码到远程仓库git push origin master

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

4. 克隆到本地

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

git clone 你的项目地址

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

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

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

上传

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

  1. 将项目克隆到本地,也就是上面文字介绍的。这里不演示了。
  2. 同样的我新建一篇文章,并且编辑。(这里跳过了部署的过程,当然你可以部署完后在同步)
  3. 添加文件git add .
  1. 提交修改git commit -m '本地修改'
  1. 推送到远端git push origin master

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

5. 其他问题

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

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

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

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

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

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

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • git的基本使用

    分布式版本控制系统的安全性要高很多,因为每个开发人员电脑里都有完整的版本库,某一个开发人员的电脑坏掉了不要紧,随便从其他开发人员那里复制一个就可以了。而集中式...

    Dreamy.TZK
  • git常用命令总结

    Dreamy.TZK
  • 将Hexo部署到云服务器

    看到群里好多人问如何将Hexo部署到云服务器。按我的思想,如果有服务器谁还用Hexo?但居然还真有人。趁着上个月白嫖的腾讯云的机器还没过期,赶紧重装个系统,来咕...

    Dreamy.TZK
  • git创建远程仓库技巧

    使用过git的都知道,git仓库的任何一个拷贝都可以独立作为一个服务器来使用,那么具体到工作中如何为团队来创建一个git远程仓库呢?下面已一个简单的例子介绍了一...

    程序员互动联盟
  • GitHub的作用和一些常用命令梳理,通过学习本文,你将对GitHub有一个基本了解。

    现在我大二,距离我敲下第一行HelloWorld,已经四年有余,快五年了(初三就买了本《C Primer Plus》,钱还是跟我哥借的,但挡不住我...

    花狗Fdog
  • Linux下Git远程仓库的使用详解

    skylark
  • 【STM32F429】第4章 RL-TCPnet V7.x网络协议栈简介

    最新教程下载:http://www.armbbs.cn/forum.php?mod=viewthread&tid=95243

    armfly
  • 【RL-TCPnet网络教程】第4章 RL-TCPnet网络协议栈简介

    本章节介绍RL-TCPnet网络协议栈,让大家对 RL-TCPnet有一个整体的了解,RL-TCPnet是一款小型网络协议栈,适用于 ARM 内核和 Corte...

    armfly
  • 【STM32H7】第4章 RL-TCPnet V7.x网络协议栈简介

    最新教程下载:http://www.armbbs.cn/forum.php?mod=viewthread&tid=95243

    armfly
  • Hexo之我的个人博客改用自己服务器搭建

    最近小明介绍完自己用hexo+git搭建个人博客,大家好像更关心的是域名mynamecoder.com,不是应该关注技术嘛,让小明哭笑不得?,今天继续给大家讲一...

    程序员小明

扫码关注云+社区

领取腾讯云代金券