前言

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

tale博客简介

先看效果，这是我用tale搭建的博客，http://verypure.me

我的tale博客

这是tale博客的后台

我的tale博客后台

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

我的tale博客手机效果

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

准备

购买一台云服务器和一个域名，域名购买后申请备案，备案时被询问网站用途时就说是用来做博客的，不要说有别的用途，否则可能无法通过备案申请，域名和服务器最好在同一云服务商购买，因为不允许域名指向非本服务商的ip的，域名和服务器不同服务商就需要把域名迁入服务器所在的服务商重新备案才可以使用。

这里要注意一点，域名当然要能在微信上传播才好，最明显的就是你在微信上复制粘贴你的域名要能使域名变蓝，这样就可以在微信里直接点击域名跳转进网页，但是有的后缀的域名，比如club域名，你会发现在微信上是不会变蓝的，那么你的域名在微信里就不能点击跳转了，所以购买域名时要注意这一点，可以自己在微信测试一下这个后缀的域名，能变蓝跳转的才购买

域名微信变蓝测试

域名解析

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

域名解析

主机记录写@表示没有前缀，比如我的这个verypure.me就解析成verypure.me，如果主机记录写www，那么解析成www.verypure.me，域名当然是越短越好，所以我写@。

如果你没有域名，那么后面我说的有关域名地方，你都用ip地址来代替

本地调试

在浏览器地址栏输入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)

纯洁的技术分享