hugo博客搭建部署

Posted by Solejay on Sun, Oct 11, 2020

Hugo 构建

Hugo 安装

  • 下载 安装包
  • hugo version 查看是否安装成功

生成站点基础框架

  • 进入自己指定文件夹下执行 hugo new site solejay-blog
  • 创建仓库
1cd solejay-blog
2git init

主题配置

个人喜欢的主题:memenewsroomgalaryAlpha ChurchMoments

新建博客

1hugo new posts/first-post.md

本地调试和打包构建

  • 本地调试
1hugo server -D

即可在本地 http://localhost:1313/ 看到静态页面

  • 打包构建

调试没有问题运行 hugo 在当前目录下生成 public 子目录

Github 部署

1. 新建 Github Pages 仓库

仓库用来存放生成的静态页面

仓库名称:username.github.io

需要保证有一个分支,通过本地推送一个 master 分支

  1. git clone git@github.com:username/username.github.io.git

username 替换为自己的用户名

  1. touch .gitignore

  2. git add .

  3. git commit -m "first commit"

  4. git push --set-upstream origin master

2. 生成 GITHUB ACTION token

  1. 网页版,点击头像,进入 Github 个人的 Settings:

  2. 边栏最下方 Developer Settings,

  3. 选择 Personal access tokens 下的 Tokens (classic) 点击右方 Generate a new token (classic)

  4. 输入密码后进入设置,在 Note 框中填写方便识别的名字,如 Deploy,有效期(Expiration)建议选择永不过期(No expiration),访问范围(Scopes)我们需要选中 repo 和 workflow

  5. 点击生成后 token 即出现,注意它只会出现这唯一的一次,将其复制保存下来

3. 新建博客仓库

仓库用来写博文,执行 Github Actions 自动构建静态页面推送到上面的 Github Pages 仓库中

  1. git clone git@github.com:username/blog.git

  2. vim .gitignore

忽略那些无关的文件,和生成的静态文件

1.DS_Store
2/public
3.hugo_build.lock
4resources/_gen/assets/scss
  1. git add . & git commit -m "first commit"

  2. git push --set-upstream origin master

  3. 进入仓库的 Settings

  4. 选择 Secrets and variables 下的 Actions,在右侧选择 New repository secret

  5. 在 Name 中填入 PERSONAL_TOKEN

  6. 在 Secret 中填入刚才生成的 token

  7. 点击 Add secret 保存

4. 配置 Github Actions

  1. 进入仓库的 Actions,若之前有使用过,点击左侧 New workflow;若无,默认会给出许多推荐,我们任选一个开始 configure 即可:

  2. 重命名 .yml 为方便识别的名字,如 deploy.yml

修改编辑框内容如下:

 1name: deploy 
 2# 这个 action 的名字
 3
 4on:
 5    push: 
 6    # 代表每次 push 都会 turn on action
 7    workflow_dispatch: 
 8    # 代表我们也可以手动 turn on
 9
10jobs:
11    build:
12        runs-on: ubuntu-latest
13        steps:
14            - name: checkout
15              uses: actions/checkout@v2
16              with:
17                  submodules: true
18                  fetch-depth: 0
19
20            - name: setup
21              uses: peaceiris/actions-hugo@v2.6.0
22              with:
23                  hugo-version: "latest"
24                  extended: true 
25                  # 按需选择是否使用 hugo-extended
26
27            - name: build
28              run: hugo -D
29
30            - name: deploy
31              uses: peaceiris/actions-gh-pages@v3
32              with:
33                  # 生成的 token 就用在这里,因为下面用到 external repository
34                  PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }} 
35                  # 替换为新建 Github Pages 仓库中的仓库名称
36                  EXTERNAL_REPOSITORY: username/username.github.io
37                   # 以及对应的分支 master
38                  PUBLISH_BRANCH: master 
39                  # 指定将自动部署得到的 public 文件夹 push 上去
40                  PUBLISH_DIR: ./public 
41                  # 提交信息
42                  commit_message: ${{ github.event.head_commit.message }}
  1. 点击左上角 Save new workflow,保存配置文件并提交,自动触发构建

  2. 构建成功即可访问对应仓库的 Github Pages 地址 https://purenjie.github.io/

5. 后续更新

后续只需要在 blog 仓库中更新博文,然后 push 即可触发 Github Actions 自动构建并推送到 Github Pages 仓库中

Gitee 部署

Gitee 已经无法使用 Pages,不建议使用

  • 新建仓库

添加一个空白 repository,注意不要添加如 README.gitignore 等文档。仓库名最好与个人空间地址一致

推送项目到 master 分支

  • 进入 Gitee 创建的仓库页面,从 服务 栏里选择 Gitee Pages,部署分支选择 master,然后点击 启动

服务器部署

  1. 保证 80 端口和 443 端口没有被禁用(可查看防火墙策略)

  2. 安装并启动 nginx

 1# 安装
 2sudo yum install -y nginx
 3
 4# 设置开机启动
 5sudo systemctl enable nginx
 6
 7# 启动
 8sudo systemctl start nginx
 9
10# 浏览器访问公网 IP 查看是否安装成功
  1. 将 public 目录传输到服务器
1# 创建同步目录
2mkdir /home/solejay/blog
3
4# 使用 rsync 方式同步
5cd BLOG_FOLDER # 本地
6rsync -avuz --progress --delete public/ root@ip 地址:/home/solejay/blog
  1. 申请 ssl 证书
  • 申请免费证书
  • 下载 nginx 证书
  • 将证书上传到服务器
1rsync -avuz --progress Nginx/ root@ip 地址:/etc/nginx/
  • 配置 nginx.conf
 1# For more information on configuration, see:
 2#   * Official English Documentation: http://nginx.org/en/docs/
 3#   * Official Russian Documentation: http://nginx.org/ru/docs/
 4
 5user root;
 6#user nginx;
 7worker_processes auto;
 8error_log /var/log/nginx/error.log;
 9pid /run/nginx.pid;
10
11# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
12include /usr/share/nginx/modules/*.conf;
13
14events {
15    worker_connections 1024;
16}
17
18http {
19    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
20                      '$status $body_bytes_sent "$http_referer" '
21                      '"$http_user_agent" "$http_x_forwarded_for"';
22
23    access_log  /var/log/nginx/access.log  main;
24
25    sendfile            on;
26    tcp_nopush          on;
27    tcp_nodelay         on;
28    keepalive_timeout   65;
29    types_hash_max_size 2048;
30
31    include             /etc/nginx/mime.types;
32    default_type        application/octet-stream;
33
34    # Load modular configuration files from the /etc/nginx/conf.d directory.
35    # See http://nginx.org/en/docs/ngx_core_module.html#include
36    # for more information.
37    include /etc/nginx/conf.d/*.conf;
38
39    server {
40        listen       80 default_server;
41        listen       [::]:80 default_server;
42        server_name  _;
43        #root         /usr/share/nginx/html;
44        root         /home/solejay/blog;
45
46        # Load configuration files for the default server block.
47        include /etc/nginx/default.d/*.conf;
48
49        location / {
50            root /home/solejay/blog;
51            index index.html index.htm;
52        }
53
54        error_page 404 /404.html;
55            location = /40x.html {
56                root /home/solejay/blog;
57        }
58
59        error_page 500 502 503 504 /50x.html;
60            location = /50x.html {
61        }
62    }
63
64
65    # 配置 https
66     server {
67         listen 443 ssl;
68         # 要配置的第七个地方
69         server_name _;
70         root /home/solejay/blog;
71         
72         # 要配置的第八个地方
73         ssl_certificate /etc/nginx/solejay.cn_nginx/solejay.cn_bundle.crt;
74         ssl_certificate_key /etc/nginx/solejay.cn_nginx/solejay.cn.key;
75         
76         # 要配置的第九个地方,可以按照我的写法
77         ssl_session_timeout 10m;
78         ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
79         ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
80         ssl_prefer_server_ciphers on;
81         
82         # 要配置的第十个地方
83         error_page 404 /404.html;
84         location = /404.html {
85              root /home/solejay/blog;
86         }
87
88         include /etc/nginx/default.d/*.conf;
89     }
90}
  • 重新加载配置文件并重启
1# 重新加载配置文件
2sudo nginx -s reload
3
4# 重启 nginx
5sudo systemctl restart nginx
  • https 访问域名成功

请求成功

** 参考资料 **

Hugo+Gitee 搭建个人博客

如何使用 Hugo 在 GitHub Pages 上搭建免费个人网站

hugo 博客部署到腾讯云轻量级服务器

使用 Github Actions 自动部署 Hugo