TycBlog

Hugo & Nginx 建站记录

 2282  5 分钟

1. Ubuntu可视化

  • 参考 腾讯云
  • 开启VNC vncserver -geometry 1920x1080 :1
  • 此时端口号为5901 = 5900+1 。
  • 关闭桌面进程 vncserver -kill :1

2. 释放端口

  • 1
2
3
4
5

    #寻找对应PID
netstat -tulpn | grep 1313

#释放对应PID
kill -9 6012

3. 配置Hugo

3.1 安装hugo

  • amd架构的Linux系统，从官网下载.deb文件。

  • 查看Linux架构与数位

  • 1
2
3
4
5
6

    ubuntu@VM-12-10-ubuntu:~$ uname -a
Linux VM-12-10-ubuntu 5.4.0-126-generic #142-Ubuntu SMP Fri Aug 26 12:12:57 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux
ubuntu@VM-12-10-ubuntu:~$ arch
x86_64
ubuntu@VM-12-10-ubuntu:~$ dpkg --print-architecture
amd64

  • 安装deb文件

  • 1

    sudo dpkg -i hugo_0.108.0_linux-amd64.deb

  • 查看hugo版本验证是否安装成功

  • 1
2

    ubuntu@VM-12-10-ubuntu:~$ hugo version
hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d linux/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio

3.2 通过hugo生成博客

  • 常见命令

  • 1
2

    #blog_name 自定义，这里定义为myblog
hugo new site myblog

  • 然后会在当前目录创建myblog文件夹，目录如下

  • 1
2
3
4
5
6
7
8

    ├── archetypes
│   └── default.md
├── config.toml         # 博客站点的配置文件
├── content             # 博客文章所在目录
├── data                
├── layouts             # 网站布局
├── static              # 一些静态内容
└── themes              # 博客主题

  • 我们的博客文章就放在content目录下的posts中，只需要按照Markdown格式编写，hugo就会读取到文章然后展示在博客中。

  • 然后在当前myblog 目录下生成第一篇博客

  • 1

    hugo new post/blog.md

  • 生成的 md 文件在myblog/context/post目录下。

  • 然后编辑好该blog.md 文件，即日常的书写博客。

3.3 安装自己喜欢的主题

  • 参考主题网址

  • 选好一个主题后，安装提示命令行安装

  • 通常直接在themes 文件夹下运行命令git clone https://github.com/zwbetz-gh/cupper-hugo-theme.git themes/cupper-hugo-theme 。即可下载主题。

3.4 打包生成public文件夹

  • 1

    hugo --baseUrl="/" --buildDrafts

  • 在 myblog 下会生成public文件夹。

3.5 添加静态图片

  • 在static文件夹里面添加所引用图片的文件夹，比如文件名为img-hugo-blog1
  • md文件里面引用绝对路径，引用方式为HugoAssets/xxx.bmp

4. 配置Nginx

4.1 安装Nginx

  • 安装Nginx——sudo apt-get install nginx
  • 查看是否安装成功——nginx -v

4.2 配置代码

  • 首先进入/etc/nginx/conf.d目录，创建一个配置文件，格式default.conf

  • 里面内容输入为

  •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

    server {
        #监听80端口
        listen       80;
        server_name  localhost;
        location / {
            root /home/ubuntu/myblog/public;#你生成public的目录
            index index.html;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
 }

  • 再者进入/etc/nginx/，修改里面的nginx.conf配置文件。主要就是注释其中的一个默认配置，否则会一直http服务显示welcome界面。

  • 重启nginx服务——systemctl restart nginx.service 或者 nginx -s reload

  • 查看nginx的当前状态——systemctl status nginx.service

  • 启动nginx服务——systemctl start nginx.service

  • 设置开机自启动——systemctl enable nginx

  • 完成配置后，即可通过ip地址访问博客。配置域名与DNS还需要其他的工作。

5. 参考网址

6. 后续优化

  • 添加tag标签——针对meme主题

    • 首先在config.toml配置文件添加如下代码

    • 1
2
3
4
5
6
7
8
9

      # URL 结构
[permalinks]
    # categories = "/categories/:slug/"
    tags = "/tags/:slug/"

# 类别
[taxonomies]
    # category = "categories"
    tag = "tags"

    • 然后在每一篇博客的front-matter 里面添加tags: ["tagname"] 即可，tagname即你的标签名称

  • 关于首页，页脚、菜单与备案号的优化，注意对比查看meme主题的配置文件即可完成

  • 关于域名与备案

    • 购买域名-> 域名实名-> 配置DNS服务-> 网站ICP备案
    • 按流程来就行，就是麻烦点。

  • 备案小记

    • 广东省网站标明主体备案号（没有后缀-1，如粤ICP备19xxxxxx78号），其他省份网站底部应标明网站备案号（例如：京ICP备xxxxxxx号-1）

    • 除此之外，也需要进行公网安备

7. Nginx + Let's Encrypt (certbot) 添加 SSL 证书

  • 为了开通https访问服务，申请 Let's Encrypt 的免费证书。

  • Let's Encrypt - 免费的SSL/TLS证书

  • 安装 ACME 工具，采用官网推荐的 certbot

  • Certbot Instructions

  • 选择对应的代理与系统，会出现操作步骤。

  • 安装snap

  • 1

    sudo apt install snap

  • 更新snap

  • 1

    sudo snap install core; sudo snap refresh core

  • 安装Certbot

  • 1

    sudo snap install --classic certbot

  • 准备Certbot命令

  • 1

    sudo ln -s /snap/bin/certbot /usr/bin/certbot

  • 可以选择直接配置或者只下载证书手动配置

    • 直接让Certbot配置好nginx

    • 1

      sudo certbot --nginx

    • 只下载证书手动配置

    • 1

      sudo certbot certonly --nginx

  • 这里我直接无脑配置

    • 按照提示一步一步来，输入邮箱，输入yes，yes，输入域名
    • 域名一定要和你自己的nginx的里面的配置server_name 一致，否则无法配置证书。

  • 完成以上步骤，重新启动nginx，即可通过https访问域名。

8. 自动更新证书

  • Let's Encrypt 的免费证书的有效期为90天，可以通过certbot certificates 查看证书的相关信息。

  • 因此首先验证能否更新

  • sudo certbot renew --dry-run ，不报错即可证明可以更新。

  • 但是默认是只能过期后手动通过上述命令更新，因此这里添加crontab定时任务完成自动更新。

  • 0 0 18 */2 * /root/shell/SSLUpdate.sh 每两个月的18号的0点运行脚本，脚本内容为。

  • 1
2

    #!/bin/bash
sudo certbot renew --force-renewal > /tmp/sslrenew.log

  • 因为没过期不允许更新，因此这里为强制更新。

  • 同时也需要添加一个重启nginx的脚本定时任务，这里不再赘述。

9. http自动转为https

  • 方法很多，这里采用return的方式

  • 在nginx配置文件80端口server修改 return 404 为如下的 301。

  •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    server {
    if ($host = tycilyz.top) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen       80;
        server_name  tycilyz.top;
   # return 404; # managed by Certbot, 修改
   return 301 https://$server_name$request_uri;

}

  • nginx从http跳转到https-参考