用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)

純潔的技術分享
相關文章
相關標籤/搜索