用Tale快速搭建我的博客

前言

tale是一款简洁美观的java开源博客html

tale博客简介

先看效果,这是我用tale搭建的博客,verypure.mejava

个人tale博客

这是tale博客的后台linux

个人tale博客后台

这是tale博客在手机上的效果nginx

个人tale博客手机效果

想拥有一个像上面这样的简洁博客,看下面git

准备

购买一台云服务器和一个域名,域名购买后申请备案,备案时被询问网站用途时就说是用来作博客的,不要说有别的用途,不然可能没法经过备案申请,域名和服务器最好在同一云服务商购买,由于不容许域名指向非本服务商的ip的,域名和服务器不一样服务商就须要把域名迁入服务器所在的服务商从新备案才可使用。github

这里要注意一点,域名固然要能在微信上传播才好,最明显的就是你在微信上复制粘贴你的域名要能使域名变蓝,这样就能够在微信里直接点击域名跳转进网页,可是有的后缀的域名,好比club域名,你会发如今微信上是不会变蓝的,那么你的域名在微信里就不能点击跳转了,因此购买域名时要注意这一点,能够本身在微信测试一下这个后缀的域名,能变蓝跳转的才购买spring

域名微信变蓝测试

域名解析

每次都要用ip地址来访问博客是不友好的,能够设置域名,把域名指向你博客的ip地址,打开域名服务商的管理后台,在域名解析里指向你的ip地址chrome

域名解析

主机记录写@表示没有前缀,好比个人这个verypure.me就解析成verypure.me,若是主机记录写www,那么解析成www.verypure.me,域名固然是越短越好,因此我写@。ubuntu

若是你没有域名,那么后面我说的有关域名地方,你都用ip地址来代替windows

本地调试

在浏览器地址栏输入https://github.com/otale/tale,点击下载zip,下载完后解压文件,这里用idea打开,打开Application.java文件,点击run运行,看到Blade start with 0.0.0.0:9000表示tale博客启动完成

本地启动tale博客

打开浏览器,浏览器地址栏输入localhost:9000,由于是首次打开,会跳到install页面,进行tale博客的安装

tale博客安装

填写上面的信息,网站名称就是网页顶部tab显示的名字,网站地址就是你点击博客上任何一个地方时的地址前缀,这里要设置为你的域名地址,没有域名设置为服务器ip地址,如今是本地启动因此网站地址就设置为http://localhost:9000。

这里点击下一步可能会无效,这是tale博客的bug,没有处理好缓存,打开chrome的控制台进入调试模式,而后右击chrome地址栏左侧的刷新按钮,出现三个选项,点击第三个硬性强制加载,一次不行再点击多几回,也就是清理缓存,再次点击下一步就正常了

tale博客安装填写信息

点击下一步完成tale博客的安装,浏览器地址栏再次输入localhost:9000,就来到了tale博客的首页

tale博客首页

localhost:9000是给用户看的文章页面,localhost:9000/admin才是给做者使用的管理后台,浏览器地址栏输入localhost:9000/admin登陆tale博客管理后台,会跳到login页面,进行tale博客管理后台的登陆

tale博客管理后台登陆

帐号密码是刚才tale博客安装时设置的帐号密码

tale博客管理后台

修改源码

tale博客有些地方写得有点问题,尤为在部署上服务器后才会显现出来,tale有个bug,管理后台的修改html模板功能失效,这里我建议先修改源码再部署,不修改也能够可是可能达不到你要的效果,下面是个人修改,能够参考下:

修改项目的/src/main/resources/templates/themes/default/partial/header.html和/src/main/resources/templates/themes/default/partial/footer.html这两个html文件,分别对应顶部左侧图标处和底部左侧图标处,主要是把他们的跳转${site_url()}给换掉,写成本身我的网站的域名地址或服务器ip地址,还有修改下文字,换成本身的口号,header.html把本来的注释掉

<a href="${site_url()}" class="navbar-logo">
    #if(theme_option('logo_url') == "")
    <img src="${theme_url('/static/img/logo.png')}" alt="${site_title()}"/>
    #else
    <img src="${theme_option('logo_url')}" alt="${site_title()}"/>
    #end
</a>
复制代码

换成

<a href="http://verypure.me" class="navbar-logo">
    纯洁的我的网站
</a>
复制代码

tale博客修改header

footer.html把本来的注释掉

<a href="${site_url()}" class="info-logo">
    <img src="/templates/themes/default/static/img/logo.png" alt="${site_title()}">
</a>
复制代码

换成

<a href="http://verypure.me" class="info-logo">
    纯洁的我的网站
</a>
复制代码

把本来的口号注释掉

<p>一辈子有所追求.</p>
复制代码

换成本身的口号

<p>一枚纯洁的程序猿</p>
复制代码

tale博客修改footer

修改后再次启动tale博客,效果是这样

tale博客修改后的顶部

tale博客修改后的底部

项目打包

由于tale博客是个springboot项目,因此能够打包后发布,下面说在idea里怎么打包,点击项目右侧的Maven Projects,点击tale的package完成一键打包

tale博客打包端口被占用

可是为何打包提示报错呢?由于你没有关掉原来还在运行的项目,端口被占用了,要先把项目运行给关掉,再一次点击package打包

tale博客打包成功

打包成功,而后打开tale项目的目录,发现多了一个target文件夹,进入target目录,再进入dist目录,发现有两个压缩文件

tale博客打包后的文件

两个都是打包后的文件,选一个上传到服务器便可。

服务器部署

这里的服务器以ubuntu16.04为例,建议用root用户登陆,避免执行命令时可能没权限。

安装jre环境

安装默认的jre环境,执行命令

apt update
apt install default-jre
复制代码

检查安装jre环境是否成功,执行命令

java -version
复制代码

ubuntu安装jre环境

设置nginx端口转发

由于tale博客用的是9000端口,若是每次访问都要输入一个端口号,是很不友好的,须要把9000端口号省掉,安装nginx,执行命令

apt install nginx
service nginx start
复制代码

在浏览器地址栏输入域名地址或服务器ip地址,出现如下表示安装nginx成功

nginx安装成功

设置nginx转发规则,把9000端口转发到80端口,修改文件/etc/nginx/sites-available/default,把这一行注释掉

try_files $uri $uri/ =404;
复制代码

在后面增长一行

proxy_pass http://127.0.0.1:9000;
复制代码

nginx配置端口转发

重启nginx,执行命令

service nginx restart
复制代码

博客部署

把刚才打包后的压缩文件上传到服务器,linux可使用scp命令上传,windows下可使用winscp直接拖拉上传,登陆服务器,执行解压文件命令

tar -xzvf tale.tar.gz
复制代码

解压后会看到有一个tale-least.jar的文件,咱们要作的就是后台启动tale-least.jar这个文件,执行命令

nohup java -jar tale-latest.jar
复制代码

服务器后台运行tale博客

nohup表示后台执行,执行完这个命令后,关掉这个命令行窗口,从新登陆服务器,执行命令查看tale博客是否已经在启动

ps -aux | grep tale-latest.jar
复制代码

能够看到有一个nohup java -jar tale-latest.jar的项目正在执行

服务器后台成功运行tale博客

因此肯定tale博客已经启动了,在浏览器地址栏输入域名地址或服务器ip地址,便可访问到tale博客,第一次访问仍是tale博客的安装,安装按照上面讲的步骤从新走一遍,可是此次填写的网站地址是你的域名地址,若是没有域名就是你的服务器ip地址

服务器tale博客安装

完成博客安装后,再次在浏览器地址栏输入域名地址或服务器ip地址,就能够看到博客首页了

个人tale博客

能够登陆博客管理后台,设置下本身的友链和关于

tale博客编辑友链和关于

这是个人友链和关于

个人tale博客友链

个人tale博客关于

最后

看完后是否是很心动,也想搭一个属于本身的博客,心动不如手动,立刻行动起来吧!

我的微信公众号

微信公众号:纯洁的技术分享(chunjie_tech)

纯洁的技术分享