乐趣区

关于blog:搭建在线编辑-Blog

jiezi

VPS / 云服务器 的抉择

能够抉择国内的服务器，也能够选国外的 VPS，因为一些非凡起因我是应用国外的搬瓦工 VPS，这里简略讲讲两个国外的 VPS，都是能够应用支付宝进行领取的。

  • Vultr，配置简略，能疾速备份，疾速复原备份，登录简略，基本上都是一键配好，价格偏高一丢丢，但性能是比拟好的，无论是国内还是国外拜访都是咻咻咻的。毛病，新配好的服务器须要 Ping 一下 IP 看看通信国内如何，有时候会 Ping 不通。

  • 搬瓦工，配置也不是特地简单，然而页面 UI 设计偏旧，胜在价格便宜，比 Vultr 便宜一半不止。目前来说，我还没有遇到不能 Ping 通的 IP。毛病，最便宜的套餐，性能稍显有余，配置过程稍显简单，上手须要一点工夫。须要从新设置 SWAP 的大小。

域名 的抉择

仍旧是用咱们的老朋友，Namesilo。

当然，你也能够应用 Freenom，我感觉只是它切实是有点难用。

一样，它俩也是能通过支付宝领取。

  • 域名还须要应用 Cloudflare 进行解析，须要留神的是，{% emp Cloudflare 不反对二级域名的解析 %}（有可能是我没找到，有些博客说能够应用子域名，但我就是没整进去。）

前一篇 VPS 内配置工具 博客文章 {% wavy 筹备工作 %} 的 {% wavy 1-3 点 %} 中有具体地讲到域名 & 域名解析的配置，请自行跳转进行查阅，此处不再赘述。

图床 性能的实现

当然，你能够抉择应用 Github 进行贮存，或者是 七牛、腾讯云，甚至是 Bilibili，应用这些公开型网站是比较简单的。

然而又因为一些非凡的起因，我只能应用 VPS 自身实现图床性能，配置会偏简单一点。（我不心愿把图片上传到其它中央，我心愿将它们汇合在一个中央进行治理。）

这里举荐应用，我编写的基于 FastAPI 写的图片上传 API，举荐应用 Anacodna 创立一个虚拟环境给它，要应用的包都在库中的 Pipfile 文件中。（CentOS 7 中 Docker & Nginx & Anaconda & FastAPI 的具体配置可参考前篇博客 超具体装置配置）

FastAPI 图片上传 Github 仓库地址

基本上是 git clone 下来之后，批改一下 main.py 的端口号以及登录后盾的 用户名 & 明码 就能够了。

上传图片之前，请先在 {% wavy /app/ %} 文件夹的同级门路下，创立一个 {% wavy /blog/assets/ %} 的门路，以放上传的图片。

运行好之后，你能够抉择应用 Nginx 进行域名解析，也能够间接在浏览器中输出 IP + 配置的端口号，就能够连贯到 FastAPI 自带的接口测试前端页面，进行图片的上传了。

我的集体倡议是，上传一张应用一张，多张上传很有可能会乱，不过，也能够通过第三个接口进行全局的图片搜寻，之后应用第二个接口搜寻该图片的链接🔗，复制到浏览器的新标签页进行查阅。

Nginx 域名解析配置，Terminal / Windows Terminal / CMD / 命令行工具 进入 VPS 后应用命令 vi /etc/nginx/nginx.conf

   server {
       listen       80;
       listen       [::]:80;
       server_name  www.xxx.xxx;
       root         /usr/share/nginx/html;

       include /etc/nginx/default.d/*.conf;

       error_page 404 /404.html;
            location = /404.html { }

       error_page 500 502 503 504 /50x.html;
            location = /50x.html { }

        # fastapi 此处的 8011 是 Upload-Pitures-VPS 中 /app/main.py 配置好的 端口号
       location /api/docs {proxy_pass http://127.0.0.1:8011;}

       location /openapi.json {proxy_pass http://127.0.0.1:8011/openapi.json;}

       location /api/pictures {proxy_pass http://127.0.0.1:8011/api/pictures;}
   }
}

另：工夫仓促，我并没有做良好交互的前端页面，删除图片的 API 也没有做，能够模拟 /app/api/v1/Pictures/Pictures.py 中的办法进行编写，我当初删除图片的办法比拟原始，就是登录进 VPS rm -rf xxx.png 进行删除，当然你不介意的话，也能够不删。

喜爱的 Hexo 主题

就像这个博客，我选用的是，Stellar，当然你要是喜爱别的 Hexo 主题也是能够的，操作也是一样的。Stellar Github Page，Stellar Wiki

我选它是因为它的排版足够好看，能减少浏览体验，博客中能自定义的款式也十分地多，包含图片都能十分好看地出现，所以选用了这个主题。

抉择 Hexo 也是有起因的，Ghost 的性能其实会更全一点，它还有一个成熟的后盾管理系统，不过，我心愿还是先试试 Hexo，因为它的搭建感觉会简略的，当然，Ghost 应该也不会太难。

单单从好看以及功能性来说 Ghost 简直完爆了 Hexo。Ghost Home Page

注：Vultr 的 VPS 性能较好，所以没有呈现杀掉 Hexo 服务的迹象，而在搬瓦工最低版本套餐中，Hexo 的服务频繁被杀，于是乎我把它给 npm run build 打包了，这会造成前面 Winwin-Hexo-Editor 编辑的时候，不会实时刷新到页面上，须要点击 Winwin-Hexo-Editor 中的 生成 按钮，能力更新，前面还会提到这里的一些小问题。

Winwin-Hexo-Editor

Winwin-Hexo-Editor Home Page，Winwin-Hexo-Editor Github Page。

这里就有必要提到 Hexo-admin 了，原本我是打算应用 Hexo-admin 进行在线编辑的，无奈，它的性能非常不欠缺，遂弃。Hexo-admin Home Page，Hexo-admin Github Page

兜兜转转了很久，终于寻找到了 Winwin-Hexo-Editor，既好看，又好用，还不会呈现 Hexo-admin 的 bug（无奈在 npm run dev 的状态里进行在线编辑），当然，这里并没有踩一捧一的意思，有可能是我不会用 Hexo-admin，也只是说 Hexo-admin 切实是不合乎我的要求，但最简洁来说，Hexo-admin 无疑是个不错的抉择。

应用 Winwin-Hexo-Editor 还有一个笑话，我不晓得为什么十分想用域名进行拜访，于是在 Nginx 的配置文件中翻滚许久，甚至查看了 Winwin-Hexo-Editor 的源码想要批改所有动态资源文件的 require url，切实是没有找到很好的方法，于是想着发邮件给开发者 YuJianghao，刚发完邮件📧，猛然惊觉，我在本地的运行环境测试的时候浏览器的 network 外面，赫然呈现了 IP + 端口号的 url，猛然惊醒，连忙试了试 IP + 端口号，果然是能够的。

于是发现，无论是 Winwin-Hexo-Editor 的官网，还是运行 Winwin-Hexo-Editor 后，作者给的揭示，都是有讲到“在浏览器中关上 IP + 端口号”就能关上了，顿觉羞愧，立马发邮件进行赔罪 …. 这个我凭空制作进去的奇怪的问题至此完结了 …

另：因为我 npm run build 了 Hexo，目前察看失去的问题是，在 Winwin-Hexo-Editor 编辑 / 新建 博客，都须要点击生成，能力在主页上更新。以及每次 编辑 / 新建完博客文后，须要刷新（Ctrl + F5）Winwin-Hexo-Editor 的编辑页面，否则，Winwin-Hexo-Editor 的保留、生成将会报错。

结语

其实图床性能不应用我提供的办法的话，整体来说，就不会那么那么简单的，会简略十分多，这跟我集体的奇怪嗜好无关吧 …

🆗！到此，你搭建好了一个可在线编辑的集体博客网站，并且领有别的中央无法比拟的浏览体验。

如果你感觉此文稿有帮忙到你，就请我喝杯咖啡吧！不胜感激，我将会继续产出更优质的内容来回报你，谢谢🙏浏览该博客。

退出移动版