前置说明

比较喜欢大佬搭建的这个主题风格,完全仿照大佬教程搭建,大佬博客地址:https://www.sulvblog.cn/posts/blog/build_hugo

1. Hugo安装

Windows安装:

①.安装PowerShell:移步官方GitHub地址下载 ,直接下载.msi包进行安装,简单下一步即可完成安装

②.安装好PowerShell后,在PowerShell中执行winget install Hugo.Hugo.Extended以安装Hugo扩展版本

其他操作系统:

请参照Hugo的官方文档进行安装

2. 博客创建,启动

可参照大佬GitHub仓库说明:https://github.com/xyming108/sulv-hugo-papermod

① 用git clone的方式拉取代码至桌面,此时会在桌面生成sulv-hugo-papermod目录

git clone git@github.com:xyming108/sulv-hugo-papermod.git

② 进入到sulv-hugo-papermod目录,输入git submodule update –init,表示拉取themes/hugo-PaperMod/下的子模块,里面放的是官方主题

③ 把目录定位到sulv-hugo-papermod下,在终端输入hugo server -D,在浏览器输入:localhost:1313 即可看到现成的博客模板

3. 修改配置

页面上的图标和配置文件的对应关系,参照下图,可以根据自己的喜好进行调整 涉及到图片需保存至 static/img/ 目录下

image.png

我调整后的效果如下:

image.png

大家按各自需要进行调整即可!

4.静态页面部署至云服务器

① public页面上传至云服务器

image.png

image.png

② Nginx(docker)的部署与配置

为方便管理,采用docker-compose的方式部署,创建docker-compose.yml文件,文件内容如下:

# 在docker-compose.yml同级目录下执行 docker-compose up -d
# 如果自行调整了yaml文件的名称,则执行 docker-compose -f xxx.yml up -d
version: '3'
services:
  nginx:
    image: nginx:latest                 
    container_name: nginx               # 容器名为'nginx'
    restart: unless-stopped             # 指定容器退出后的重启策略为始终重启,但是不考虑在Docker守护进程启动时就已经停止了的容器
    volumes:                            # 数据卷挂载路径设置,将本机目录映射到容器目录
      - "./nginx/conf/nginx.conf:/etc/nginx/nginx.conf"  # nginx配置文件
      - "./nginx/conf/conf.d/default.conf:/etc/nginx/conf.d/default.conf"
      - "/root/docker/syncthing/data/blog/ldjx-hugo-papermod/public:/usr/share/nginx/html"  # Hugo public文件夹
      - "./nginx/log:/var/log/nginx"
    environment:                        # 设置环境变量,相当于docker run命令中的-e
      TZ: Asia/Shanghai
      LANG: en_US.UTF-8
    ports:                              # 映射端口
      - "80:80"

需要注意的是:部分同学可能会遇到 docker-compose up -ddocker compose up -d 的困惑,可以参照下面的图片。参考链接

image.png

Nginx配置:

只配置了HTTP,HTTPS就需要自行研究了

# 要配置的第一个地方,这里的用户要改成root,不然可能会没有权限
# 我是docker启动的,没有遇到权限问题
user nginx;

worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    include /etc/nginx/conf.d/*.conf;

    # 配置http
    server {
        # 要配置的第二个地方,80访问端口
        listen       80 default_server;
        # listen       [::]:80 default_server;

        # 要配置的第三个地方,域名
        server_name www.ldjx7.cn;
        # rewrite ^(.*) https://$server_name$1 permanent; #自动从http跳转到https
        # 要配置的第四个地方,这里指向public文件夹
        # root /root/docker/syncthing/data/blog/ldjx-hugo-papermod/public;

        include /etc/nginx/default.d/*.conf;

        # 要配置的第五个地方
        location / {
            root /usr/share/nginx/html;
            index  index.html index.htm;
        }

        # 要配置的第六个地方
        error_page 404 /404.html;
        location = /40x.html {
            root   /usr/share/nginx/html;
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /usr/share/nginx/html;
        }
    }
}

配置完成后,记得放开云服务器对应的端口,大陆服务器的80端口和443端口需要备案才能使用,安全组即使放通也不顶用。