用Tale快速搭建個(gè)人博客

前言

tale是一款簡(jiǎn)潔美觀的java開源博客

tale博客簡(jiǎn)介

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

我的tale博客

這是tale博客的后臺(tái)

我的tale博客后臺(tái)

這是tale博客在手機(jī)上的效果

我的tale博客手機(jī)效果.png

想擁有一個(gè)像上面這樣的簡(jiǎn)潔博客,看下面

準(zhǔn)備

購(gòu)買一臺(tái)云服務(wù)器和一個(gè)域名,域名購(gòu)買后申請(qǐng)備案,備案時(shí)被詢問(wèn)網(wǎng)站用途時(shí)就說(shuō)是用來(lái)做博客的,不要說(shuō)有別的用途,否則可能無(wú)法通過(guò)備案申請(qǐng),域名和服務(wù)器最好在同一云服務(wù)商購(gòu)買,因?yàn)椴辉试S域名指向非本服務(wù)商的ip的,域名和服務(wù)器不同服務(wù)商就需要把域名遷入服務(wù)器所在的服務(wù)商重新備案才可以使用。

這里要注意一點(diǎn),域名當(dāng)然要能在微信上傳播才好,最明顯的就是你在微信上復(fù)制粘貼你的域名要能使域名變藍(lán),這樣就可以在微信里直接點(diǎn)擊域名跳轉(zhuǎn)進(jìn)網(wǎng)頁(yè),但是有的后綴的域名,比如club域名,你會(huì)發(fā)現(xiàn)在微信上是不會(huì)變藍(lán)的,那么你的域名在微信里就不能點(diǎn)擊跳轉(zhuǎn)了,所以購(gòu)買域名時(shí)要注意這一點(diǎn),可以自己在微信測(cè)試一下這個(gè)后綴的域名,能變藍(lán)跳轉(zhuǎn)的才購(gòu)買

域名微信變藍(lán)測(cè)試.png

域名解析

每次都要用ip地址來(lái)訪問(wèn)博客是不友好的,可以設(shè)置域名,把域名指向你博客的ip地址,打開域名服務(wù)商的管理后臺(tái),在域名解析里指向你的ip地址

域名解析

主機(jī)記錄寫@表示沒(méi)有前綴,比如我的這個(gè)verypure.me就解析成verypure.me,如果主機(jī)記錄寫www,那么解析成www.verypure.me,域名當(dāng)然是越短越好,所以我寫@。

如果你沒(méi)有域名,那么后面我說(shuō)的有關(guān)域名地方,你都用ip地址來(lái)代替

本地調(diào)試

在瀏覽器地址欄輸入https://github.com/otale/tale,點(diǎn)擊下載zip,下載完后解壓文件,這里用idea打開,打開Application.java文件,點(diǎn)擊run運(yùn)行,看到Blade start with 0.0.0.0:9000表示tale博客啟動(dòng)完成

本地啟動(dòng)tale博客

打開瀏覽器,瀏覽器地址欄輸入localhost:9000,因?yàn)槭鞘状未蜷_,會(huì)跳到install頁(yè)面,進(jìn)行tale博客的安裝

tale博客安裝

填寫上面的信息,網(wǎng)站名稱就是網(wǎng)頁(yè)頂部tab顯示的名字,網(wǎng)站地址就是你點(diǎn)擊博客上任何一個(gè)地方時(shí)的地址前綴,這里要設(shè)置為你的域名地址,沒(méi)有域名設(shè)置為服務(wù)器ip地址,現(xiàn)在是本地啟動(dòng)所以網(wǎng)站地址就設(shè)置為http://localhost:9000

這里點(diǎn)擊下一步可能會(huì)無(wú)效,這是tale博客的bug,沒(méi)有處理好緩存,打開chrome的控制臺(tái)進(jìn)入調(diào)試模式,然后右擊chrome地址欄左側(cè)的刷新按鈕,出現(xiàn)三個(gè)選項(xiàng),點(diǎn)擊第三個(gè)硬性強(qiáng)制加載,一次不行再點(diǎn)擊多幾次,也就是清理緩存,再次點(diǎn)擊下一步就正常了

tale博客安裝填寫信息

點(diǎn)擊下一步完成tale博客的安裝,瀏覽器地址欄再次輸入localhost:9000,就來(lái)到了tale博客的首頁(yè)

tale博客首頁(yè)

localhost:9000是給用戶看的文章頁(yè)面,localhost:9000/admin才是給作者使用的管理后臺(tái),瀏覽器地址欄輸入localhost:9000/admin登錄tale博客管理后臺(tái),會(huì)跳到login頁(yè)面,進(jìn)行tale博客管理后臺(tái)的登錄

tale博客管理后臺(tái)登錄

賬號(hào)密碼是剛才tale博客安裝時(shí)設(shè)置的賬號(hào)密碼

tale博客管理后臺(tái)

修改源碼

tale博客有些地方寫得有點(diǎn)問(wèn)題,尤其在部署上服務(wù)器后才會(huì)顯現(xiàn)出來(lái),tale有個(gè)bug,管理后臺(tái)的修改html模板功能失效,這里我建議先修改源碼再部署,不修改也可以但是可能達(dá)不到你要的效果,下面是我的修改,可以參考下:

修改項(xiàng)目的/src/main/resources/templates/themes/default/partial/header.html和/src/main/resources/templates/themes/default/partial/footer.html這兩個(gè)html文件,分別對(duì)應(yīng)頂部左側(cè)圖標(biāo)處和底部左側(cè)圖標(biāo)處,主要是把他們的跳轉(zhuǎn)${site_url()}給換掉,寫成自己個(gè)人網(wǎng)站的域名地址或服務(wù)器ip地址,還有修改下文字,換成自己的口號(hào),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  class="navbar-logo">
    純潔的個(gè)人網(wǎng)站
</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  class="info-logo">
    純潔的個(gè)人網(wǎng)站
</a>

把原本的口號(hào)注釋掉

<p>一生有所追求.</p>

換成自己的口號(hào)

<p>一枚純潔的程序猿</p>
tale博客修改footer

修改后再次啟動(dòng)tale博客,效果是這樣

tale博客修改后的頂部
tale博客修改后的底部

項(xiàng)目打包

因?yàn)閠ale博客是個(gè)springboot項(xiàng)目,所以可以打包后發(fā)布,下面說(shuō)在idea里怎么打包,點(diǎn)擊項(xiàng)目右側(cè)的Maven Projects,點(diǎn)擊tale的package完成一鍵打包

tale博客打包端口被占用

但是為什么打包提示報(bào)錯(cuò)呢?因?yàn)槟銢](méi)有關(guān)掉原來(lái)還在運(yùn)行的項(xiàng)目,端口被占用了,要先把項(xiàng)目運(yùn)行給關(guān)掉,再一次點(diǎn)擊package打包

tale博客打包成功

打包成功,然后打開tale項(xiàng)目的目錄,發(fā)現(xiàn)多了一個(gè)target文件夾,進(jìn)入target目錄,再進(jìn)入dist目錄,發(fā)現(xiàn)有兩個(gè)壓縮文件

tale博客打包后的文件

兩個(gè)都是打包后的文件,選一個(gè)上傳到服務(wù)器即可。

服務(wù)器部署

這里的服務(wù)器以u(píng)buntu16.04為例,建議用root用戶登錄,避免執(zhí)行命令時(shí)可能沒(méi)權(quán)限。

安裝jre環(huán)境

安裝默認(rèn)的jre環(huán)境,執(zhí)行命令

apt update
apt install default-jre

檢查安裝jre環(huán)境是否成功,執(zhí)行命令

java -version
ubuntu安裝jre環(huán)境

設(shè)置nginx端口轉(zhuǎn)發(fā)

因?yàn)閠ale博客用的是9000端口,如果每次訪問(wèn)都要輸入一個(gè)端口號(hào),是很不友好的,需要把9000端口號(hào)省掉,安裝nginx,執(zhí)行命令

apt install nginx
service nginx start

在瀏覽器地址欄輸入域名地址或服務(wù)器ip地址,出現(xiàn)以下表示安裝nginx成功

nginx安裝成功

設(shè)置nginx轉(zhuǎn)發(fā)規(guī)則,把9000端口轉(zhuǎn)發(fā)到80端口,修改文件/etc/nginx/sites-available/default,把這一行注釋掉

try_files $uri $uri/ =404;

在后面增加一行

proxy_pass http://127.0.0.1:9000;
nginx配置端口轉(zhuǎn)發(fā)

重啟nginx,執(zhí)行命令

service nginx restart

博客部署

把剛才打包后的壓縮文件上傳到服務(wù)器,linux可以使用scp命令上傳,windows下可以使用winscp直接拖拉上傳,登錄服務(wù)器,執(zhí)行解壓文件命令

tar -xzvf tale.tar.gz

解壓后會(huì)看到有一個(gè)tale-least.jar的文件,我們要做的就是后臺(tái)啟動(dòng)tale-least.jar這個(gè)文件,執(zhí)行命令

nohup java -jar tale-least.jar
服務(wù)器后臺(tái)運(yùn)行tale博客

nohup表示后臺(tái)執(zhí)行,執(zhí)行完這個(gè)命令后,關(guān)掉這個(gè)命令行窗口,重新登錄服務(wù)器,執(zhí)行命令查看tale博客是否已經(jīng)在啟動(dòng)

ps -aux | grep tale-least.jar

可以看到有一個(gè)nohup java -jar tale-least.jar的項(xiàng)目正在執(zhí)行

服務(wù)器后臺(tái)成功運(yùn)行tale博客

所以確定tale博客已經(jīng)啟動(dòng)了,在瀏覽器地址欄輸入域名地址或服務(wù)器ip地址,即可訪問(wèn)到tale博客,第一次訪問(wèn)還是tale博客的安裝,安裝按照上面講的步驟重新走一遍,但是這次填寫的網(wǎng)站地址是你的域名地址,如果沒(méi)有域名就是你的服務(wù)器ip地址

服務(wù)器tale博客安裝

完成博客安裝后,再次在瀏覽器地址欄輸入域名地址或服務(wù)器ip地址,就可以看到博客首頁(yè)了

我的tale博客

可以登錄博客管理后臺(tái),設(shè)置下自己的友鏈和關(guān)于

tale博客編輯友鏈和關(guān)于

這是我的友鏈和關(guān)于

我的tale博客友鏈
我的tale博客關(guān)于

最后

看完后是不是很心動(dòng),也想搭一個(gè)屬于自己的博客,心動(dòng)不如手動(dòng),馬上行動(dòng)起來(lái)吧!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容