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

12次阅读

共计 3270 个字符,预计需要花费 9 分钟才能阅读完成。

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

注:VultrVPS 性能较好,所以没有呈现杀掉 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 buildHexo,目前察看失去的问题是,在 Winwin-Hexo-Editor 编辑 / 新建 博客,都须要点击生成,能力在主页上更新。以及每次 编辑 / 新建完博客文后,须要刷新(Ctrl + F5Winwin-Hexo-Editor 的编辑页面,否则,Winwin-Hexo-Editor 的保留、生成将会报错。

结语

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

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

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

正文完
 0