如何用hugo-webstack搭建属于自己的站长工具

说明

本教程是基于 WebStack-Hugo 静态响应式网址导航主题，可以打造的的个人定制版本。

1.安装hugo并且拷贝主题

$ git clone https://github.com/shenweiyan/NavBioIT.git
$ rename NavBioIT mysite # 重命名为你的仓库名称
$ cd mysite
$ rm -rf .git # 删除原来的git仓库
$ git init # 初始化新的git仓库
$ cd themes/WebStack-Hugo
$ git clone https://github.com/shenweiyan/WebStack-Hugo.git

执行完成上述操作，你的个人导航工具就已经在本地初始化完成了，接下来就是修改hugo-action,触发github action自动部署到github pages或者vercel。

2.修改hugo-action的配置部署到github pages

2.1 修改hugo-action的配置

在mysite目录下的.github/workflows目录，可以创建或者使用原来的HugoAction.yml触发github action自动部署到github pages或者vercel。

name: Hugo Actions # 名字自取

on:
  schedule:
    - cron: '0 1 * * *' # 定时拉取原来的主题，如果不需要可以删除
  push:
    branches:
      - main  # 这里的意思是当 main 分支发生 push 的时候，运行下面的 jobs

jobs:
  bot:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Fetch
        run: |
          # 同步原作者主题
          cd themes/WebStack-Hugo
          git pull origin main
          echo "fetch done"
  deploy: 
    runs-on: ubuntu-latest	# 在什么环境运行任务
    steps:
      - uses: actions/checkout@v3   # 引用actions/checkout这个action，与所在的github仓库同名
        with:
         submodules: true  # Fetch Hugo themes (true OR recursive) 获取submodule主题
         fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo	# 步骤名自取
        uses: peaceiris/actions-hugo@v2	# hugo官方提供的action，用于在任务环境中获取hugo
        with:
          hugo-version: '0.59.0'	# 获取指定版本的hugo
          # extended: true

      - name: Build 
        #run: hugo --minify	# 使用 hugo 构建静态网页
        run: hugo         	# 使用 hugo 构建静态网页
        
        ###### 以下两种方案任选一种即可
      - name: Deploy To Pages           # 部署至当前仓库的其他分支
        uses: peaceiris/actions-gh-pages@v3	# 一个自动发布github pages的action
        with:
          external_repository: shenweiyan/NavBioIT	# 发布到哪个repo
          personal_token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
          #1. 创建 Personal_Access_Token：
          #   GitHub 个人账号 -> Settings -> Developer settings -> Personal access tokens ->  Tokens (classic) -> New personal access token (classic)
          #   - Expiration: No expiration
          #   - Select scopes: 全选
          #2. 粘贴 Personal_Access_Token：
          #   进入目标 repo -> Settings -> Security -> Secrets and variables -> Actions，选择 New repository secret -> 粘贴前面生成的 personal_access_token
          publish_dir: ./public
          #注意这里指的是 Pages 要发布哪个文件夹的内容，而不是指发布到目的仓库的什么位置；因为 hugo 默认生成静态网页到 public 文件夹，所以这里发布 public 文件夹里的内容。
          publish_branch: gh-pages	# 发布到哪个branch
          force_orphan: true
          full_commit_message: ${{ github.event.head_commit.message }}

      - name: Deploy to GitHub Pages # 部署到另一个仓库的master分支
        uses: JamesIves/github-pages-deploy-action@v4.2.2
        with:
          git-config-name: your-github-username
          git-config-email: your-github-email
          token: ${{ secrets.ACCESS_TOKEN }}
          # target-folder: /
          repository-name: your-github-name/your-github-repo-name
          ssh-key: ${{ secrets.DEPLOY_KEY }}
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          branch: master
          folder: ./publis

上述yml的任务步骤Deploy To Pages和Deploy to GitHub Pages两者选其一即可，前者是部署到当前仓库的其他分支，后者是部署到另一个仓库的master分支。
部署到当前仓库的其他分支则你的当前仓库必须要公开，而第二种方案你的当前则不需要公开，但是需要在你的当前仓库设置一个ACCESS_TOKEN，具体操作请查看：
https://docs.github.com/zh/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens

一般来说，第二种方案保密性更好，第一种你的数据可能被他人拷贝或者克隆，此外github pages的个人域名也是可以绑定的，此处就不在赘述了。

2.2 在github配置

在github创建一个新的仓库，然后将你的hugo-webstack项目推送到该仓库。

$ git add .
$ git commit -m "first commit"
$ git remote add origin 你的github仓库地址
$ git push -u origin master

3.部署到vercel

3.1 vercel部署

打开velcel(https://vercel.com/dashboard)官网，如果你没有注册账号，那么请先注册一个账号，然后点击import project导入你的github仓库，然后点击deploy即可。

3.2 vercel配置自定义域名

在你部署完成后，打开该项目settings选项，找到domains选项，点击add添加自定义域名，然后在你的域名服务商那里添加一条cname记录，
cname记录的值为你的vercel域名.vercel.com，然后等待vercel为你生成ssl证书，一般来说，等待时间不会超过5分钟，然后你就可以通过你的域名访问你的个人导航工具了。

3.3 说明

在vervel部署你的个人导航工具，你的仓库可以使私有的，当前github支持vercel application，只要你push你的配置到master(main)分支，vercel就会自动部署你的个人导航工具。

4.配置

4.1 配置导航

在config.toml文件中，你可以配置你的导航

baseURL               = "https://nav.moremind.cn"
languageCode          = "zh-CN"
title                 = "moremind网址导航"
theme                 = "WebStack-Hugo"
preserveTaxonomyNames = true
disablePathToLower    = true
hasCJKLanguage        = true
publishDir            = "public"

[params]
    author        = "moremind"
    description   = "WebStack-Hugo 网址导航主题 | moremind网址导航"
    upload        = "你的上传地址"
    about         = "关于页面的地址"	# 左侧导航栏的"关于我们"页面(./about)
    repository    = "你的仓库地址"	
    enablePreLoad = true                                                        # 网站完全打开前预加载动画
    textPreLoad   = "站长导航"                                              # 预加载的动画文字, 只有当enablePreLoad=true时生效
    expandSidebar = false                                                       # 默认展开左侧边导航栏
    logosPath     = "assets/images/logos"	                # 网站每个导航地址logo存放地址
    defaultLogo   = "https://xxxx.png"    # logo图片资源不存在或者错误时, 默认显示的logo; 该参数如为空,将会一直加载对应的logo,直至成功
    nightMode     = false							                            # 默认站点为深色(夜间)模式
    yiyan         = true                                        		        # 默认启用一言服务

[params.seo]
    baiduhmid       = ''             		# 百度统计 hm.src 的 ID
    baiduSiteVer    = ''                            		# 百度HTML标签验证(baidu-site-verification)    
    tj51laid        = ''                                        		    # 51.LA 网站统计
    tj51lack        = ''
    GoogleAdsClient = 'google ads client'        # 谷歌广告 client

[params.qweather]
    key = "weather key"

[params.images]
    favicon           = "https://xxxx.png"
    searchImageL      = "https://xxxx.png"		  # 搜索部分浅色背景图
    searchImageD      = "https://xxxx.png"		  # 搜索部分深色背景图
    logoExpandLight   = "https://xxxx.png"
    logoExpandDark    = "https://xxxx.png"
    logoCollapseLight = "https://xxxx.png"
    logoCollapseDark  = "https://xxxx.png"

[markup.goldmark.renderer]
    unsafe = true

[params.footer]
    copyright = '你的页脚'

4.2 配置站点

打开data目录，里面有三个文件，分别是headers.toml、friendlinks.yml、webstack.yml。
其中headers.toml是配置你的导航栏的，friendlinks.yml是配置你的友情链接的，webstack.yml是配置你的导航工具站点的。