db文件编辑器_利用Nas构建WebIDE编辑器系列三-构建自己的专属博客

利用Nas构建WebIDE编辑器系列一

利用Nas构建WebIDE编辑器系列二

这篇基于前面的两篇来拓展编辑器的功能，只要有网络的情况下任何智能设备都可以进行访问编辑的博客站点。

这里是有前提条件的，所谓博客站点那么就是需要被外网能够访问到的站点，那么提供免费空间的服务商要么就是各种苛刻的使用条件，要么就是各种昂贵的租赁费用(当然也不排除也有非常便宜的主流云服务渠道商)。

那么我们这里就从节约触发，构建一个免费的静态的博客站点，为什么是静态，动态语言的存储服务器基本都是收费的，免费的不是慢就是条件苛刻(上面也讲到了)，这里当然就不纳入考虑范围。

源码放置选择

放置这些源码并且能够绑定自己的域名或者是提供了免费的二级域名都是可以的，这里我其实有四个选项。当然还有更多方式，欢迎其他小伙伴提供一下，这里不再拓展：

github:国际站内容可以随意些，绑定域名也不再话下。除了访问起来慢一点几乎挑不出任何毛病(如果非中文也算的话，我认了)。免费绑定自定义域名。

coding:国内代码仓库，访问速度快，腾讯接收后各方面得到了更好的支持。但是还是有些众所周知的问题，不能什么都讲。可以免费绑定自定义域名。(目前比较推荐这个，但是不排除以后它们会不会来个收费项目，腾讯嘛，你懂的)

码云Gitee：国内代码仓库，作为存储仓库还算非常香的，不过能也会存在一些众所周知的问题，并不是什么都能讲。访问速度快，但是自定义域名还需要另外缴费，呵，国内厂商都这德行。

Nas公网：这个几乎是最理想方案，实现起来不会容易，首先公网IP或者专线，专线那么就要涉及到备案的问题，如果使用公网盒子之类的产品也能够迅速为你解决公网IP的问题。普通公网就只能使用自定义的一些它端口，访问起来还算诸多不便的地方。(有些地方的443还能使用还算非常不错的)

框架选择

这里提前讲一下，如果单纯为了写博文，那么Hexo有一个客户端应用非常适合工具，支持现有的这些系统下都可以运行，也能快速部署到站点中去，但是也就不具备我们之前说说的编码环境。

Jekyll、Hugo、Hexo静态网站渲染框架都是不错的选择，我自己习惯了nodejs这种方式，所以就选择Hexo。你也可以选择其他的渲染方式，这里只是个例子：

构建过程

环境配置条件：

1. Node.js 版本需不低于 8.6，建议使用 Node.js 10.0 及以上版本

2. Git

这里我们在webIDE里面进行稍微安装一下即可(演示这边我使用c9)：

使用命令(因为c9 登录就是root权限直接运行命令即可，如果是code-server需要加入sudo再输入密码或者获取root权限后再运行下面的命令)：

apt update && apt install nodejs npm -y

安装好后看一下版本是否上述条件范围内：

如果版本ok了，那么就开始安装hexo，关于root权限上面以及说过这里就不再反复说明了，直接运行命令(这个-g是全局安装指令，不太建议局部安装)：

npm install -g hexo-cli

看一下版本，顺带测试是否安装成功

创建一个目录来放置你的hexo文件，总不至于直接就在根目录放满东西吧，使用命令(命令的意思是创建一个叫hexo的目录，然后再进入这个hexo的目录):

mkdir hexo && cd hexo

当然如果想使用指令你也可以使用鼠标在目录上右键创建后，在进入该目录下的终端工具，这样是为了方便你运行hexo的对应指令，这个操作非常常用，这里两个图。非开发人员一样可以轻松使用hexo进行编辑博客(这里稍微琐碎些)。

通过这两种方法都能创建和进入hexo目录下终端命令，如果不在根目录下运行hexo命令是没有用的，因为已经被这种周边的小白朋友问了好多好多遍，最后才知道终端还没有进入hexo的根目录命令如何能正常使用咯？除了安装指令以外，hexo的指令都要到安装目录下去执行。

进入终端进入目录以后执行安装命令(hexo init是可以创建目录的这里就不特别说明了,其实我也尝试不执行npm install也是可以的，不过为了安全起见还是安装一下依赖避免导致错误)：

hexo init && npm install

如果你也出现这提示，那么就全局更新一下npm，毕竟更新为最新的版本还是不错的，指令双脉已经提示了：npm install -g

更新完成后，那么你之前创建的目录下就有了如下的文件

这些文件中我们用的最多的也就是source和themes这两个目录，source是文件目录到时这里文件将会被渲染到网页中去，另外一个themes是主题模板目录修改或者创建主题样式的时候会使用得到这个目录。scaffolds是创建新文件的时候程序会从这里拿出对应的模板来建立新的文件，如果你的主题中有各种需求的化，那么你可以在这里提前创建好模板，提供给hexo命令进行调用。node_modules是nodejs的模块文件，也可以理解为hexo的渲染器，hexo最终变成html的文件离不开这里各种模块的支持，一般情况下你不熟悉nodejs是不需要去修改你们的文件的，让它默默的呆在那里就可以了。还有两个目录是要运行后才会生成出来，后面再讲。

尝试让整个程序运行起来(稍后我会解释这些命令，其实常用的就那么几个非常容易记忆)：

hexo s

当你看到这个就说明已经服务器就已经起来了，这个只是一个生产环境(也可以理解为开发模式或者测试模式)下的浏览方式，会存在问题，主要是为了提供给你看看你使用的主题是什么样子的，当然文章也能够看到。因为我们在webIDE中去执行这个命令，那么会有个问题，外部浏览器是无法访问的，那么需要将4000端口也映射到宿主机的端口中去。或者也可以直接调用编辑器的内置浏览器访问(同样得映射端口)，不过我建议最好还是使用外部浏览器，因为后面我要讲加入一个插件让编写文章变得更加容易些。

这里有个操作稍微介绍一下，注意看提示，Ctrl+C就是停止服务的意思，为了让非码农的小伙伴也能看得明白些，这边就讲得琐碎些还请谅解。

上图是启动编辑器内置浏览器的方法，其实这里有个坑，使用内置浏览访问还是出现错误的原因，就是因为内置浏览器还是基于我们当前使用的终端来决定的当你输入了对应的地址，在内置浏览器中还是出现拒绝访问的字样，其实不是你的编辑器出现了问题，而是内置编辑器并不是在服务器内运行，而是在你当前浏览器中运行(有点绕，慢慢看就理解了)，当你在访问docker还没有映射出来的端口的地址的时候那么自然就会出现错误，只要做好端口和宿主机的映射就可以了。

新增Nas映射端口

这里就插入讲一下上两篇没介绍到的内容，在Nas中增加端口映射。会的朋友直接跳过本段。

打开docker组件，在容器菜单中找到你设置并之前运行的容器，暂停掉它。再右键编辑该容器。不停掉是没办法编辑的，这个也会有些小伙伴问到，这里就顺带一讲。找到端口设置标签，找到左上角的+号增加一个宿主机没有使用到的端口就可以了，最好一致因为编辑的时候方便些。如果实在占用了也是可以按照你开放的端口修改一下地址就行了。

应用后开始运行容器重新登录一下就能进到编辑器了，但是为了如果中间你进行了这样的设置，那么回到编辑器的时候，依然需要使用终端回到hexo程序的目录中去，否则你的终端就会出现我之前所说的问题，命令是无效的，必须进到hexo程序的根目录中去再运行命令，这样内置浏览器和外置浏览器都能够顺利的访问到页面了

测试端口修改

这里就再拓展深入的讲一下，如果你希望改变端口来对应自己宿主机更加合适的端口，可以看这一段，毕竟鼠标点一下自己进入页面，总比地址栏输入要简单得多吧。如果你不想涉及到nodejs的编辑那么这里可以跳过，因为之前也说过不是很明白nodejs的运作机制不要轻易去改动它。

好，打开这个/hexo/node_modules/hexo-server/index.js文件，将port键对应的4000端口改为你想要的端口，在运行的时候就会以这端口为测试端口。设置好了以后需要重新启动hexo s服务，才能生效。ip键对应的是监听访问的ip,默认是全网监听，如果你认为不安全可以修改为内网端，这样后台插件就相对安全了许多(后台插件后面会介绍)

这里接着上面的运行命令继续

下面说明一下hexo的一些基本命令：

hexo init [folder]

//新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

hexo new

//创建一篇文章，

可以替换成为你文章的标题 简写 ”hexo n 文章标题“

hexo -generate

//文件生成后立即部署网站 会生成一个public的目录 里面是渲染好的html静态文件 如果直接使用Nas的web进行发布 将站点根目录直接指向这个目录就可以了 简写 hexo -g

hexo server

//这个我们之前已经用过了，启动一个测试服务器，简写 hexo s 这里有个参数-p 也是可以设置端口的 不过只是临时设置 比如" hexo s -p 8080"

hexo deploy

//这个命令是行已经部署好的静态文件也就是public的目录里面的东西统统放置到公共仓库中去(好像不大准确，应该是部署到对外开放的服务器中去) 需要结合git以及插件，简写 hexo d

hexo clean

//清除缓存命令，也就是把public这目录干掉还有这个文件db.json，一般情况下在你更换的主题或者是怎么都无法刷新更新的时候会使用到，这个也是常用命令中唯一不带简写的命令，要写全了

hexo clean && hexo g && hexo d

//这个就是将这些命令使用&&来进行串联起来执行，先清理缓存，在渲染静态文件，最后上传文件到网络仓库，这就是最常用的命令组合，&&符号是Linux下最常用的命令连接符文号，按从左到右的方式去执行这些命令，所以不要把顺序弄错了，不然就像有些小伙伴，先渲染了文件然后把删除掉最后在上传，再来问我为什么我的命令出错了？当然顺序错了，对不对？

好命令讲完了，我们来小试牛刀，创建一篇(一个文件)文章，原先的hexo s的终端命令行先别动它，再新建一个终端进到hexo文件的根目录中，使用命令hexo n ”标题“

创建后了以后通过提示我们也能发现，在/hexo/source/_posts/这个目录下创建了一个新的文件叫”开篇第一章.md“这就是我们要编辑的文章啦。直接进入目录中双击到编辑器中编辑。再选择边预览边码字，这样就很符合博客的编辑效果。

当然保存后，也是可以直接在测试地址的页面中直接看到效果的

那么就可以通过hexo g命令进行渲染静态页面了，如果你已经配置好了你的服务器目录，那么在网络上就能够直接访问到这个页面了。(Nas对外发布涉及很多很多内容，这里就没法拓展去讲，悄悄按下以后再说)

接下来讲两个稍有难度的操作，换个主题，安个插件之类的事情，顺便再修改一些配置文件什么的。

主题和插件去哪里找，当然是官网hexo.io/themes/中去查找自己喜欢的主题啦。

更换主题模板

比方说我们很喜欢这个主题，那么就需要将它克隆下来，放到themes目录中去，运行如下命令：

git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo

git clone 是git的拉取命令， 后面的themes/3-hexo在将克隆文件放置到这个目录下的意思。结合上面所说的目录结构的内容就知道这条命令应该在根目录下运行，而不是到主题目录下运行，主要看好命令的意思再去执行

完成拉取以后你的themes目录下就应该多出一个3-hexo主题目录

如何修改主题呢？这就涉及到修改配置文件_config.yml了，值得注意的是在根目录下的是你站点总的配置文件，在对应主题目录下依然有一个_config.yml文件，这个文件是你主题的配置文件，通常这些配置文件需要根据主题的作者要求来设置，每个主题都不一样，这就需要你自己去看作者的文档，在主题商店里面点击图片是预览主题效果，而点击名称这是进入主题的github仓库，一般仓库下都有对应的文档，有当然英文居多。你可以选择你看得懂的语言的主题来进行安装。

这里先介绍修改主题所要修改位置，其他位置上的修改可以对照官网上的文档去修改对应的配置项目就可以了比如站点的名称、主标题、副标题等等这些项目：”hexo.io/zh-cn/docs/configuration”

好，编辑根目录的_config.yml，找到theme修改器后面的参数为刚刚安装的3-hexo主题名称，记住记住冒号后面一定要保持一个空格不能多也不能少，因为YAML是一种脚本语言它的文件格式要求还是蛮严格的，经常有小伙伴配置出现错误就是因为没有掌握YAML这种脚本语言的格式规范，导致错误出现，在键与值之间的：必须要有一个空格。如果你的文件出错了，先别急发问，检查一下是不是格式错误了。修改完成后一定停止后，在运行hexo s才能看到新的主题效果。

更改语言包

这里还提一下，如果想要修改语言包，就要看看你下载的主题文件是否支持该语言包，不支持你也可以自己照样子写一个出来也是可以的。当然如果有的话，那么就可以直接调用了，举个例子：landscape主题的话就在主题目录下的/hexo/themes/landscape/languages中，看看是否有简体中文的语言包。如果有就直接在配置文件的language项目中修改为对应的语言包就可以了。

增加新插件

如果你还希望你的站点有更多的功能而不仅仅只是发布文章而已，比如搜索或者订阅这些功能的话，那么就要借助到插件来帮忙解决这些问题，当然我这里不会去介绍搜索这些插件如何放置上去站点去，因为很多的主题已经包含有搜索表单的样式以及编译文件，要介绍的话恐怕篇幅真的太大。只需要按文档要求，安装对应的搜索插件就能够正常地使用这个功能，如果有兴趣的话可以自己研究主题源码如何汇编，这里涉及到的都是前端知识，自己编辑一整套下来费时也费力。自己通常都是使用其他人弄得差不多的，如果有好的想法就稍微修改一下提交作者参考，如果人家不接受，那就放在自己仓库吧。(如果你真有想法该别人的作品，记得给人家留个名，毕竟整套弄下来很费精力，虽然这些东西都是开源的也要尊重一下别人的成果)。

接下来给各位一个使用的小插件，后台编辑插件，这个插件很实用接近正常写博客的流程。单单可以直接把粘贴板上的图片插件文章中这一个功能，这一步看似简单的功能就省掉了先上传图片然后输入路径几个步骤的操作。非常好用，比如加密后台等等功能你们自己探索吧。

安装这个插件也非常简单，一句命令即可。

npm install --save hexo-admin

接下来就设置方面的事情了，具体也可以去看看这个插件的文档，点击进去能到达插件仓库了，文档就代码的下边。安装完成以后，在url地址上加/admin就可以愉快写作啦！这样比直接在编辑器中写要好很多了。

因为之所以搭建webIDE然后再构建hexo来写博客就是为了方便在外能够轻松调用，那么安全肯定要提升一点点，我这里就再废话深入一些，如何给后台编辑设置密码：

首先进入编辑后台找到Settings设置选卡

点击这链接进入设置界面,这里需要注意了，设置你账户、密码和加盐密码。注意看下方生成的代码这段代码是要复制进入配置文件中的，如果你记不住就先不着急关闭这个页面，等设置完成后再关也不迟。

然后在根目录的_config.yml配置文件中的最后部分加入一些这段，代码就可以了。

admin: username: kim password_hash: $2a$10$qqFiPKv8.PqkKePK9Wt0tewbje.RNfUBJWzY..8P9dJ/07zg.wcXm secret: jiayan

加入完成之后，重新启动页面服务，重新登录页面那么就出现一个登录表单填写正确后才能进入后台编辑器

结合上两篇文章到此为止，你已经能够搭建一个有后台又可以远程编辑的静态安全博客程序了，下一步将会介绍如何页面文件发布到代码仓库中然后利用代码仓库展示页面，就能的通过互联网正常的进行访问到你的博客了，太长了休息一篇。