基于 halo 搭建你的个人网站

导读

咱们这些个从事技术的，年轻时大多数应该都有一个爱好，那就是装逼，比如说搭个专属网站，哪怕没有啥内容，也得把架子搭好，似乎不整个拥有自己域名的网站就总感觉差点意思，那今天小易趁着即将解封的高兴劲，带大家伙重温下咱们年轻时的装逼梦吧，哈哈。

给网站定个小目标

目标不要太宏伟，流行跟风就好了，也不怎么费脑，咱就先实现个博客性质网站，比如，小易呢，想做个家庭网络方面的经验分享型网站，设定一个网站名称为 易雾山庄，主题为 家庭基建，生活乐享，当然，小易不太讲究，想的比较粗俗些，各位不要想的和小易一样就好了。

美好的诉求

想必有些爱折腾的小伙伴，在刚开始的时候，热情似火，各种高端 cms，花样主题，别样的秀，热情褪去后，直接就回归静态博客了，大道至简。小易也曾走到了这一步，以为就这么滴吧，直到我遇到了 halo ，精简而不失优雅，加上有 joe 2.0 这样的主题，更是锦上添花，巧好就在最好时候满足小易内心深处的几个基础需求。

首先，必须得美，美的最大功劳要依靠主题来支撑，所以主题库丰富，很关键
博客具有评论功能，评论且为自己所控制，如数据存储于自己指定的服务器，具有审核权等
支持 markdown ，高效简洁必选项
开源，必要的时候，有定制的可行性
功能丰富且可定制化强，比如哪天不想清高了，想扔个广告在上边，甚至直接贴个收款二维码啥的，你能先到的主流的，halo 基本能满足的
支持友链，最近发现这玩意挺有意思的，一方面可以交友，一方面能达到推广的效果，吸引跟你相同嗜好的友友。
具有加密访问属性，这个嘛，可以在不宜广泛对外开放的内容方面，能派上用场，比如你眼里就有俩臭钱儿，可以对有些内容进行加密，得付费了给访问密码，哈哈

网站搭建

天下武功，唯快不破，如何能少了 docker 呢，上菜

git clone https://github.com/evling2020/halo.git 
docker-compose up -d

注意： 基础依赖 docker 和 docker-compose ，确保已安装

至此，网站已搭建完成。顺便贴一个 nginx 参考配置

map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
}

server {
    listen 80;
    server_name www.evling.tech;
    rewrite ^ https://$server_name$request_uri? permanent; # enforce https
}

server {
    listen 443 ssl;
    server_name www.evling.tech;
    #modsecurity on;
    #modsecurity_rules_file /etc/nginx/modsec/main.conf;
    # You can increase the limit if your need to.
    client_max_body_size 4096M;

    access_log /var/log/nginx/www.evling.tech_access.log log_json;
    error_log /var/log/nginx/www.evling.tech_error.log;

#    ssl on;
    ssl_certificate /etc/letsencrypt/certs/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/certs/privkey.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # don’t use SSLv3 ref: POODLE

    location / {
        proxy_pass http://127.0.0.1:8090;
        proxy_http_version 1.1;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    }
}

还要记得在 /etc/nginx/nginx.conf 里定义一个日志格式变量 log_json

......
        log_format  log_json  '{ "@timestamp": "$time_iso8601",'
                          '"@source": "$server_addr",'
                          '"hostname": "$hostname",'
                          '"http_x_forwarded_for": "$http_x_forwarded_for", '
                          '"remote_addr": "$remote_addr", '
                          '"remote_user": "$remote_user", '
                          '"request_method": "$request_method",'
                          '"scheme": "$scheme",'
                          '"domain": "$server_name",'
                          '"http_referer": "$http_referer", '
                          '"request_uri": "$request_uri", '
                          '"args": "$args",'
                          '"body_bytes_sent": "$body_bytes_sent", '
                          '"status": " $status", '
                          '"http_user_agent": "$http_user_agent", '
                          '"https": "$https", '
                          '"time_local": "$time_local", '
                          '"request_time": "$request_time", '
                          '"upstream_response_time": "$upstream_response_time",'
                          '"upstream_addr": "$upstream_addr",'
                          '"trace_id": "$http_trace_id", '
                          '"span_id": "$http_span_id" '
                        '}';

......

官方在线体验

环境地址：https://demo.halo.run
后台地址：https://demo.halo.run/admin
用户名：demo
密码：P@ssw0rd123..
使用前请阅读：https://demo.halo.run/archives/tips

网站美化

初始化
假设小易得测试地址是 10.70.1.3，首次访问 http://10.7.1.3:8090 ，会进入安装向导，这里选择全新安装，输入必要信息

点击安装，等待其完成，即可登录后台地址 http://10.70.1.3:8090/admin/ ，如下图所示

主题安装
选择 外观/主题 进入到主题页面

点击安装，选择远程下载主题 joe 2.0 ，你可以选择自己的喜欢，不一定非得这个，其远程 git 地址为
https://github.com/qinhua/halo-theme-joe2.0

如果要是访问 github 仓库不好使的话，想办法下载离线包也行，这是最新 zip 包地址：

https://github.com/qinhua/halo-theme-joe2.0/archive/refs/tags/1.0.9.zip

主题配置
点击 Joe 2.0 主题的 启用 按钮，即可。进行基本设置

需要注意的是 AccessKey 是需要 halo 后台配置的，如下图位置进行配置方可生效。

侧边栏，展示公告和二维码启用，可以贴上自己的公众号，或者个人微信二维码，凭喜好贴个吧

可以尝试启用标签云

博主信息

社交

排版首页布局
关于页面示例

## 简介

易雾山庄记录了家庭网络基础建设的种种实践，可以帮助更多有需要的人减少折腾。希望通过这个平台构建一只家庭基建小社群，共同优化我们的生活体验，增强个人数据安全保护意识，同时我们还要考虑环保节能问题，实实在在帮大家伙组建属于自己的家庭网络。

## 自封称号

低级网络玩家

## 一句话给自己

依心而行，无憾今生。

## 几句话送大家

你认为快乐的， 就去寻找；

你认为值得的， 就去守候；

你认为幸福的， 就去珍惜。

## 与我相关

**Email:** evling2020@gmail.com

**Phone:** +1 (929) 357-4155

**Github:** https://github.com/evling2020/

**链滴:** https://ld246.com/member/evling

**csdn:** https://blog.csdn.net/evling2020

**知乎:** https://www.zhihu.com/people/evling2020

**微信公众号:**

![qrcodeforghf959fbb94792258.jpg](https://b3logfile.com/file/2020/10/qrcodeforghf959fbb94792258-2f0bd676.jpg)

留言页面，需要新建一个页面，页面别名为 leaving 。

代码具体内容如下

<div class="joe_leaving">
  <ul class="joe_leaving-list">
    <#--  <li class="item">
      <div class="user">
        <img class="avatar lazyload" data-src="" src="" alt="用户头像" />
        <div class="nickname">Jhon</div>
        <div class="date">2021-09-22</div>
      </div>
      <div class="wrapper">
        <div class="content">太牛了</div>
      </div>
    </li>  -->
  </ul>
  <div class="joe_loading">
    <svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="var(--main)">
      <circle cx="15" cy="15" r="15">
        <animate attributeName="r" from="15" to="15"
          begin="0s" dur="0.8s"
          values="15;9;15" calcMode="linear"
          repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="1" to="1"
          begin="0s" dur="0.8s"
          values="1;.5;1" calcMode="linear"
          repeatCount="indefinite" />
          </circle>
          <circle cx="60" cy="15" r="9" fill-opacity="0.3">
        <animate attributeName="r" from="9" to="9"
          begin="0s" dur="0.8s"
          values="9;15;9" calcMode="linear"
          repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="0.5" to="0.5"
          begin="0s" dur="0.8s"
          values=".5;1;.5" calcMode="linear"
          repeatCount="indefinite" />
          </circle>
          <circle cx="105" cy="15" r="15">
        <animate attributeName="r" from="15" to="15"
          begin="0s" dur="0.8s"
          values="15;9;15" calcMode="linear"
          repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="1" to="1"
          begin="0s" dur="0.8s"
          values="1;.5;1" calcMode="linear"
          repeatCount="indefinite" />
      </circle>
    </svg>
  </div>
  <div class="joe_leaving-none">暂无留言，期待第一个脚印。</div>
</div>

菜单布局示例

分类目录示例

成果展示

首页

留言板

日志

关于

结语

至此，本期内容结束，可以安心的开始你的网站内容之旅，记得，一定要用心才行。去实践，去优化。

基于 halo 搭建你的个人网站

导读

给网站定个小目标

美好的诉求

网站搭建

网站美化

结语

相关帖子

Halo 博客体验一日游

Halo 博客系统 -0.4.0 发布

快速构建网站工具列表

解决 tomcat7 经常 crash 的问题

使用 Nginx 代理 tomcat 时获取真正 IP

简易版配置文件管理实现

Monterey beta 驱动 RX 6600XT 尝鲜

欢迎来到这里！