用Tale快速搭建个人博客

前言

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

tale博客简介

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

我的tale博客

这是tale博客的后台

我的tale博客后台

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

我的tale博客手机效果.png

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

准备

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

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

域名微信变蓝测试.png

域名解析

每次都要用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-least.jar
服务器后台运行tale博客

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

ps -aux | grep tale-least.jar

可以看到有一个nohup java -jar tale-least.jar的项目正在执行

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

所以确定tale博客已经启动了,在浏览器地址栏输入域名地址或服务器ip地址,即可访问到tale博客,第一次访问还是tale博客的安装,安装按照上面讲的步骤重新走一遍,但是这次填写的网站地址是你的域名地址,如果没有域名就是你的服务器ip地址

服务器tale博客安装

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

我的tale博客

可以登录博客管理后台,设置下自己的友链和关于

tale博客编辑友链和关于

这是我的友链和关于

我的tale博客友链
我的tale博客关于

最后

看完后是不是很心动,也想搭一个属于自己的博客,心动不如手动,马上行动起来吧!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容