• V
    vyf

    前言

    前些天刚建了自己的博客:《极简博客搭建,搭建超级简单又好看》
    还上了 HTTPS :《轻松全站 HTTPS,还没用上 https (可申请泛域名证书)的朋友可以操练起来了》

    原由

    这些天,陆陆续续有朋友问我,这个博客能不能登录啊,有没有用户体系啊。我想也许是我小说写得好看,他们想找地方评论。准备接一个评论组件在里面,方便大家讨论我的文字以及分享自己的看法。
    一杯茶的功夫,我就改变了主意,准备自己搭建一个属于自己的社区。在里面汇聚一些自己喜欢的人们。这么大的变故是为什么?因为我想无论怎么接入评论组件,人仍然不在你这。第三方如果恶意收集用户的信息,并技术太弱保护不了这份数据的话,那是在害了我们的用户。且有些组件没事还没弹个广告什么的,着实有点坑。那话不多说,自己建一个吧~

    效果预览

    前台效果
    前台效果

    后台效果
    后台管理界面

    要搭论坛,还没有服务器? 来参加阿里云双 11 底价团,12 号前 99.5/台起!

    优惠的一小部分
    查看更多

    架构一览

    有很多现成的社区解决方案,开源不开源的都有像 wecent、nodebb 什么的。
    我挑选了一个可定制化更高,我认为更好看的给大家演示一下。

    1. Docker
    2. MongoDB/pregresSQL/redis(三个选其一)
    3. NodeBB

    开始

    1. 安装 Docker (已安装的忽略)

    CentOS
    Windows
    Mac

    2. 安装 MongoDB/pregresSQL/redis三个选其一

    NODE 的项目就只介绍 MongoDB 的安装吧,如需用 pregresSQL/redis 当作你的数据库,请自己安装,后面只是配置不同
    先创建所需的 docker 网络
    docker network create mongo-net
    创建了一个名字为mongo-net的默认网络
    安装 mongodb
    docker run --name mongo --restart always --network mongo-net -d mongo --wiredTigerCacheSizeGB 0.25
    参数解释(不关心的不用看)
    docker run 表示运行一个容器,可以想像成运行一个程序
    --name mongo 给你的程序起个名字,mongo 可以换其它名字
    --restart always 表示程序如果死掉就自动重新启动,保证一直提供服务
    -d :后台运行你的这个程序
    mongo 镜像名
    --wiredTigerCacheSizeGB 0.25 设置最大的内存使用为 0.25G

    执行成功后你就完成了数据存储的部分,下面开始安装 NodeBB

    1. 安装 NodeBB
      docker run --restart always --name forum --network mongo-net -p 4567:4567 -d nodebb/docker
      参数解释(不关心的不用看)
      docker run 表示运行一个容器,可以想像成运行一个程序
      --restart always 表示程序如果死掉就自动重新启动,保证一直提供服务
      --name forum 给你的程序起个名字,forum 可以换其它名字
      --network mongo-net 给这个容器指定一个虚拟网络,不存在则报错,存在则加入这个网络
      -d :后台运行你的这个程序
      nodebb/docker 镜像名

    执行成功后,你的论坛就已经安装完成了。服务已经启动,你只需要简单配置就能正式上线啦~

    执行成功后,你的论坛就已经安装完成了。服务已经启动,你只需要简单配置就能正式上线啦~

    1. 配置 NodeBB
      在你的浏览器中输入http://localhost:4567 进入配置页面
      配置 NodeBB
      等一段时间后你会看到这个页面
      安装完成,准备进入你的论坛
      到这里就全部配置完成了,你可以登录后台设置你的论坛
      用户登录界面
      可以修改默认语言为中文
      设置语言
      设置成中文,保存后刷新
      后台界面
      后台管理界面

    5.后台配置
    到这里,你已经搭建完成了你的论坛。接下来的工作就是把你论坛配置成你想要的样子,你可以在后台安装一些你需要的插件、主题等,打造一个你自己的论坛。

    结语

    这个例子的所有操作都是按最简单的方式来写的,且不影响正式的使用。当然一些配置方面的优化,则要看你服务器的具体配置,具体来优化了。后台中有许多有用的插件,比如搜索都可以安装起来,来充实你的论坛。
    论坛不错,可还没服务器? 来参加阿里云双 11 底价团,12 号前 99.5/台起!

    发布在 互联网 阅读更多
  • V
    vyf

    本次使用的图片素材

    前言

    文章有点长,感觉有用的朋友可以先加收藏。
    前两天刚搭建了自己的博客,并写了一篇介绍性的文章:《极简博客搭建,搭建超级简单又好看》,这几天准备写点文章体验一下这款博客。发现不论是撰写文章还是展示效果,都非常符合我的品味,真是太棒了。

    直到今天我上传了一张图片,于是便有了这篇文章。

    因果

    一般情况,我写一篇博客会直接上传图片到文章,有时上传的尺寸并不太适合在文章内显示。就有了打开 PS 或者截取一部分再上传,这就放慢了写博文的速度。我就想有没有在线处理的方式,这样就免去了简单修图的烦恼。

    网上也找到很多现成的接口,不过像我们这种都想把核心技术掌握在自己手上的人来说,这不能满足我们的欲望。而且可定制性太小,这样这个解决方案就出炉了!

    没有服务器? 来参加阿里云双 11 底价团,12 号前 99.5/台起!

    优惠的一小部分
    查看更多

    效果预览

    可以实现对jpeg,png,webp(仅解码),tiff和gif图像格式(包括GIF动画)的裁剪、旋转、等操作。更多效果,可快速向下滑动,查看其它操作的效果图。

    效果预览

    准备

    和以往的文章一样,本文章也一样尽力做到通俗易懂,使用的命令尽量简单,让更多的人可以用上好用的服务。

    主要用到的工具

    1. Docker
    2. 开源库 imageproxy (不需要具体了解,没有安装配置等其它操作,写在这里只是为了让想 DIY 的朋友知道下核心功能)

    启动服务

    1. 安装 Docker (已安装的忽略)
      CentOS
      Windows
      Mac
      启动服务非常简单可简单的用 Docker 命令运行此服务。
    1. 启动图片处理服务
      mkdir -p /data/image
      docker run --restart always --name image-service -p 8080:8080 -v /data/image:/image -d willnorris/imageproxy -cache /image -addr 0.0.0.0:8080
      当然你不想保存图片到本地的话,可以运行如下命令
      docker run --restart always --name image-service -p 8080:8080 -d willnorris/imageproxy -addr 0.0.0.0:8080
      参数解释(不关心的不用看,可直接看第 3 步)
      docker run: 表示运行一个容器,可以想像成运行一个程序
      --restart always:表示程序如果死掉就自动重新启动,保证一直提供服务
      --name image-service: 给你的程序起个名字,image-service 可以换成任何名字
      -v /data/image:/image: 表示把你本地的一个目录放到程序里面用,注:这个目录是容器里面图片保存的文件夹,这里这么操作是当你删除这个容器的时候,你所获取过的图片可直接提供服务,不需重新拉取图片。注意:如果是 Mac 或者 windows 启动不了,需要检查 /data/目录 docker 是否有操作的权限
      -p 8080:8080: 把容器里的一个端口映射到你的宿主机上(也就是你操作的这台服务器上,注意:请检查你的服务器安全组或者防火墙是否对这个端口开放,否则可能外部无法访问你的服务)
      willnorris/imageproxy: 镜像名
      -cache /image: (镜像内参数,也就是你个程序提供的可配置参数), 设置图片缓存在容器内的/image 文件夹内,对应你机子的 /data/image
      -addr 0.0.0.0:8080:(镜像内参数,也就是你个程序提供的可配置参数), 绑定容器内的 0.0.0.0 ip(也就是所有的 ip) 8080 端口上。对应你机子上的 8080端口,这个视你-p 参数而定。

    本文章使用的测试图片地址:

    http://www.picloud.me/images/2015/03/29/fcfc854b160ef5adb93006a02352b647.jpg

    1. 到这里你已经启动了你的服务,已经可以很好的达到效果了。下面演示一下如何使用:
      主要使用方式 http://localhost:8080/{options}/{remote_url}

    解释

    {options} - 你需要对目录图片作的调整
    {remote_url} - 原图地址

    示例:http://localhost:8080/800x/http://www.picloud.me/images/2015/03/29/fcfc854b160ef5adb93006a02352b647.jpg

    我的效果
    你可以随意修改当前的**{options}**在当前URL中就是800x,可以换成100x200x, 200x300 看看具体效果,下面我们来讲一下 {options}部分可以怎么配置,来达到智能裁剪、旋转、占位等效果。

    1. 现在你的图片处理服务已经启动了。当然图片每一次加载的时候会有点慢,因为第一次访问时需要去目标地址把图片下载到本地,而后通过你的链接提供服务。当然你加了文件缓存后,只要地址不变,你的图片将会通过本地提供服务,而不会再去远端下载。聪明的你可能已经尝试了一些参数来达到你想要的效果了,也可能知道占位功能如何实现了,那么下面我们就详细看下有哪些参数可以配置,能达到怎样华丽的效果。

    参数详解

    1. 定宽,高度自适应
      {多少像素}x
      例:200x800x(上面例子就是使用了这个参数)
    1. 高度的百分之多少,宽度自适应
      x{百分比}
      例:x0.15 (高度的 15%) 、x0.8(高度的 80%)
    1. 按固定宽高裁剪图片(这个用来做点位图再好不过了,随便选张图,占位无难度)
      {宽度}x{高度}
      例:400x300 生成 400px * 300px的图片,自动裁剪
    1. 正方形图片(生成头像的时候很有用)
      {数字}
      例:96 (生成 96*96 的头像)
    1. 第二个参数
      之前说的都是只有一个参数,有时你可能需要旋转一下,或者翻转一下,传第二个参数可以达到你想要的效果。

    翻转图片

    600,fh 这里的参数表示生成一个 600*600 且左右翻转,如果想要水平翻转,可以使用 fv,或者两个一起使用,变成 600,fv,hv,当然你也可以和前面的 1,2,3,4 讲到的参数配合使用。
    图片翻转

    旋转图片

    r90 逆时针旋转 90 度, 这里的度数只能是 90, 180, 270 其它的不生效。注意:图片有一个 EXIF 属性,此属性是图片内置的方向属性,当前服务使用的工具已经自动旋转成原始的方向了,相关资料可以自己查一下,关键字:图片 EXIF 属性
    智能裁剪?

    图片质量

    q80设置图片为 80%的质量(默认质量为 95%)图片质量越小,图片的大小会更小,可以节省带宽、提高加载加载图片的速度。
    图片质量测试

    截取图片中的一部分

    cx600,cy500,cw300,ch300,100这部分参数就很有意思了,c你可以认为是裁剪,这样x, yw, h就组成两个坐标(600,500)(300,300),表示从这张图片的(600,500)开始,截取一张 300px*300px 的图片, 后面的 100 是之前 第4 点 说到的,缩放到正方形,这样就有了如下的效果。当然这些参数也可以和之前的共用,也没有顺序的关系。
    截取并生成一张 100 像素的头像

    智能裁剪

    sc加入此参数,可以实现智能裁剪。可以做到图片感知扩展,压缩扩展人脸不变形(人脸感知),不过这个我感觉可以优化一下,试了下效果没那么好。
    image.png

    服务命令启动参数

    当前我们使用了-cache /image -addr 0.0.0.0:8080这两个启动参数,在参数介绍里已经介绍过了,这里我们来说明一下 -cache 这个 flag, 现在这个是直接传了文件给它,实现了把图片缓存到了本地文件。这里还可以缓存到以下地方:

    缓存

    1. 缓存到内存
      -cache memory:200:4h 缓存到内存,最大内存使用为 200MB, 且最多缓存 4 小时。容量和过期时间可选,也可以不指定-cache memory,默认使用100MB内存。
    2. 缓存到亚马逊存储
      s3 URL (例:s3://region/bucket-name/optional-path-prefix)
      3.缓存到 Google 云
      gcs URL (例:gcs://bucket-name/optional-path-prefix)
    3. 缓存到微软的世纪互联
      azure URL (例: azure://container-name/)
      如果是存到世纪互联,你需要提供两个环境变量:
      AZURESTORAGE_ACCOUNT_NAME(account name)
      AZURESTORAGE_ACCESS_KEY(access key)
    4. 缓存到 Redis
      redis URL (例:redis://hostname/)
      如果 redis 有密码,需要环境变量
      REDIS_PASSWORD

    服务拉取远端使用的 referrers

    可以通过 -referrers example.com来设置

    限制图片拉取的站

    -remoteHosts example.com,example1.com设置只从example.com, example1.com获取图片,其它的源图地址将不被服务。这样可以防止别人恶意使用你的服务。

    小结

    到这里,你已经可以为你的博客或其它提供高定制化的图片服务了,包括裁剪、旋转等功能。这样,很多修图的工作就可以放到这个服务里去做。当然,这个服务还有很多小的问题,比如感觉裁剪扩充效果不好,估计作者也在优化。如果长期没有动作的话,我倒可以写一个类似功能的,如果有机会,可以在后期的博客中与大家见面。

    还有就是缓存的地点基本是国外的服务,像国内的七牛、阿里 OSS、腾讯等云存储没有接入,这方面都有现在的库,如果自己使用可以自行接入。

    有任何问题欢迎评论讨论,也可私信我。

    当前服务比较耗资源,如果要布当前服务的话,不要选择有 cpu 限制的服务器。
    没有服务器? 来参加阿里云双 11 底价团,12 号前 99.5/台起!

    发布在 互联网 阅读更多
  • V
    vyf

    刚买好新服务器,或有闲置的服务器资源,或者真的很想拥有一个自己的博客的朋友有福了。偶尔去记录点自己写的所想所感,过段时间后拿出来再读,想想真是一件美好的事情。下面我就介绍一下我自己搭建博客的方法。

    本教程本着对没有编程经验的朋友搭建自己博客提供一个简单的解决方法,如有任何问题可以直接评论或联系我咨询

    还没有服务器?快入一台 2018 年阿里云双 11 底价服务器吧!

    优惠的一小部分
    查看更多

    展示的效果:

    博客主页
    博客首页
    博客底部效果
    后台页面
    后台管理页
    写文章

    本次主要用到的一些工具:

    1. Docker
    2. Ghost

    开始搭建:

    1. 安装 Docker (已安装的忽略)
      CentOS
      Windows
      Mac

    2. 安装博客
      mkdir -p /data/blog
      docker run --restart always -d --name blog -v /data/blog:/var/lib/ghost/content -p 2368:2368 ghost:alpine
      参数解释(不关心的不用看)
      docker run:表示运行一个容器,可以想像成运行一个程序
      --restart always:表示程序如果死掉就自动重新启动,保证你的博客一直提供服务
      -d :后台运行你的这个程序
      --name blog 给你的程序起个名字,blog 可以换成任何英文字母
      -v /data/blog:/var/lib/ghost/content 表示把你本地的一个目录放到程序里面用,注:这个目录是容器里面博客内容的文件夹,这里这么操作是当你删除这个容器的时候,你所写过的内容可以保留,这样你下次按这个命令启动的时候不至于你之前写的内容丢失。
      -p 2368:2368 把容器里的一个端口映射到你的宿主机上(也就是你操作的这台服务器上)
      ghost:alpine 镜像名

    3. 在你的浏览器上输入 http://127.0.0.1:2368 你将在浏览器中显示上面提到的展示效果中博客主页类似的效果。

    4. 你的博客已经完成搭建完成了,那要如何添加内容及其它操作呢?

    5. 在你的浏览器中输入http://127.0.0.1:2368/admin 将进入博客的安装:

    6. 配置你的博客
      创建账号
      设置博客基本信息
      邀请别人和你一起写博客

    7. 到这里你博客的所有设置都操作完成了,可以看到展示的效果后台页面的效果,是不是很简单~

    8. 你可以点下左侧的航行,随意玩玩,当然最重点的是新建文章。你可以点左侧的 New story,可以看到展示的效果写文章的效果,就可以愉快的写作啦,写完点发布直接在主页显示。

    博客上线

    1. 当然你在本地配置完这些还不能给其它人外网访问,这里你就需要有个域名。把你的域名解析到你的线上服务器。
    2. 执行以下命令(这里和上方的只有一个区别,端口 2368 换成了 80)
      mkdir -p /data/blog
      docker run --restart always -d --name blog -v /data/blog:/var/lib/ghost/content -p 80:2368 ghost:alpine
    3. 访问你的域名接着开始搭建往下走

    高级玩法

    到上一步,你已经获得一个新的个人博客了。剩下的可以自己优化下自己的主题、修改下博客的基础配置、修改下网站的导航以及一些额外的配置,大家可以自己摸索。
    主题是可以修改的,这个有时间再写个文章来介绍。

    结语

    本教程非常基本,适合稍微懂一点的或者一点都不懂的跟着操作。
    这上博客还是很强大的,有技术水平的朋友完全可以自定义、自己写主题,可玩性很强。
    最后祝你博客玩得开心,有问题可以通过上面的微博联系到我。

    发布在 建站 阅读更多

与 V2MM 的连接断开,我们正在尝试重连,请耐心等待