Halo快速搭建个人博客网站

一、docker部署Halo

  目前测试了两种方法安装Halo，第一种是使用Jar包安装:提供JAR包资源，不过因为使用jar包部署需要Java11才可以，我本机使用的是Java8，所以暂时不做调整。第二种是通过docker安装。

1.1 启动应用

docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo halohub/halo:latest

[root@zxy_master blog]# docker run -it -d --name halo -p 8090:8090 -v ~/.halo:/root/.halo halohub/halo:latest
Unable to find image 'halohub/halo:latest' locally
latest: Pulling from halohub/halo
e96e057aae67: Pull complete
4ced2591451d: Pull complete
df8f874ae8c0: Pull complete
111b6c748642: Pull complete
7d08d1d812cb: Pull complete
52108816ce84: Pull complete
afa1bed6ab0e: Pull complete
4f4fb700ef54: Pull complete
02830da3aa34: Pull complete
851454fc787b: Pull complete
Digest: sha256:311e8dd620d441fd15abc1c5c8859f840e014975392dfe97a2a16e8c935bedac
Status: Downloaded newer image for halohub/halo:latest
cc27e01b629de601b9b8ab9bf1fbc59430374df3317e2ef8ccff4736e439eb83

1.2 云服务打开8090端口

1.3 初始化应用

  Halo默认是8090端口，使用docker启动后，可通过IP:8090端口打开后台页面进行配置。

ip:8090

1.4 数据导入

  如果之前已经部署过Halo博客，可以通过这里导入原数据。

二、Halo应用

2.1 后台管理页面

  后台管理页面如果没有特殊配置的话，后续可以通过ip:8090/admin登录

  Halo初始化后，就可以登录进来Halo后台管理页面，通过右上角连接可以进入博客主页面

2.2 主页面

  主页面如果没有特殊配置的话，可以通过ip:8090查看

  Halo最原始的页面是比较单调的，但是Halo可以支持主题下载安装

2.3 主题安装

  暂时提供了几个主题，可以通过上述方式安装，已经上传到CSDN资源主题资源下载。

  也可以通过Halo官网下载Halo官网主题

2.4 主题启用

  将已安装的主题，点击启用即可改变当前主题

  启用后，再次查看主题

三、Nginx端口转发

  Nginx部署安装教程

  根据Nginx部署安装教程，部署好后，修改nginx.conf配置文件

 #修改一：在server之前，添加upstream进行端口跳转
    upstream webserver{
        server ip:8090;
    }
    server {
        # 修改二：将8090跳转到80
        listen       80;
        # 修改三：IP地址
        server_name  ip;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;


        location / {
            root   html;
            # 修改四：添加代理配置，
            # 这里的webserver名称与upstream后的名称一致
            proxy_pass http://webserver;
            proxy_set_header Host $host;
            index  index.html index.htm;
        }

  修改配置后，重启nginx即可通过80端口登录

四、域名

3.1 购买域名

  域名注册购买_域名注册选购 - 腾讯云 (tencent.com)

3.2 解析域名

3.3 域名登录

五、其他

1 Blog阅读量统计优化

    <#if !index>
      <style>
        .read-tips {
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            text-size-adjust: 100%;
            font-weight: 400;
            line-height: 1.5;
            font-family: Ubuntu,Roboto,"Open Sans","Microsoft YaHei",sans-serif;
            color: #4a4a4a;
            font-size: 1rem;
            box-sizing: inherit;
            margin: 0;
            background-color: rgb(236, 245, 255);
            border-left: 5px solid rgb(217, 236, 255);
            padding: 1.25em 1.5em;
            margin-bottom: 1em;
        }
     </style>
     <div class="read-tips">
        <b style="color: #409EFF; font-size: 1.1rem;">阅读提示</b>
        <p style="color: #4a4a4a;">本文共${post.wordCount}字，阅读大约需${(post.wordCount/500)?int}分钟。</p>
     </div>
    </#if>

2 Blog添加背景图

	<div class="background-cover"></div>
	<div class="background-img"></div>
	<div class="background-cover2"></div>

	<style>
        .background-cover2 {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(255,255,255,0.7);
            z-index: 0;
        }
        .background-img {
            top: -1vh;
            left: -1vw;
            width: 102vw;
            height: 102vh;
            position: fixed;
            background-size: cover;
            background-image: url(/upload/2023/04/back.png);
            backdrop-filter: blur(5px);
            filter: blur(5px);
            z-index: 0;
        }
        .background-cover {
            top: -1vh;
            left: -1vw;
            width: 102vw;
            height: 102vh;
            position: fixed;
            background-size: cover;
            filter: none !important;
            backdrop-filter: none !important;
            background-image: url(/upload/2023/04/back.png);
            z-index: 0;
        }
        .show-two-lines {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .footer {
            background-color: #fafafa !important;
            background: #fafafa !important;
        }
    </style>