部署WebStack-Hugo

本文介绍了如何使用Hugo部署WebStack-Hugo导航主题。核心配置在config.toml中,导航数据在data/webstack.yml中。提供了Windows和Linux下的详细安装步骤,包括复制exampleSite文件、启动hugo server。还说明了导出静态资源、部署到GitHub Pages、自定义头部搜索栏和导航菜单的方法,以及获取网站图标的API使用。

作者:zhuge···预计阅读 12 分钟·785 阅读·0 评论
部署WebStack-Hugo

采用了一直以来最喜欢的 hugo 部署方式,方便高效。 主要的配置信息都集成到了 config.toml,一键完成各种自定义的配置。 导航的各个信息都集成在 data/webstack.yml 文件中,方便后续增删改动。

- taxonomy: 科研办公
  icon: fas fa-flask fa-lg
  list:
    - term: 生物信息
      links:
        - title: NCBI
          logo: ncbi.jpg
          url: https://www.ncbi.nlm.nih.gov/
          description: National Center for Biotechnology Information.
        - title: Bioconda
          logo: bioconda.jpg
          url: https://anaconda.org/bioconda/
          description: "Bioconda :: Anaconda.org."
    - term: 云服务器
      links:
        - title: 阿里云
          logo: 阿里云.jpg
          url: https://www.aliyun.com/
          description: 上云就上阿里云。
        - title: 腾讯云
          logo: 腾讯云.jpg
          url: https://cloud.tencent.com/
          description: 产业智变,云启未来。

安装Hugo,略……

Windows下

  1. 进入hugo的目录下(假设F:\WebStack),解压WebStack.zip
  2. 然后,创建一个 themes 的文件夹,把解压后的 WebStack-Hugo 整个文件夹移动到 themes 中。
  3. 将 themes/WebStack-Hugo/exampleSite 目录下的所有文件复制到 hugo 站点根目录(即 F:\WebStack)
  4. 执行 hugo server,启动站点

Linux

安装完本 WebStack-Hugo 主题后,将 exampleSite 目录下的文件复制到 hugo 站点根目录,根据需要把 config.toml 的一些信息改成自己的,导航的网址信息可通过 data 目录下 webstack.yml 修改。

mkdir /home/shenweiyan/mysite
cd /home/shenweiyan/mysite

# 安装 WebStack-Hugo 主题
git clone https://github.com/shenweiyan/WebStack-Hugo.git themes/WebStack-Hugo

# 将 exampleSite 目录下的文件复制到 hugo 站点根目录
cd /home/shenweiyan/mysite
cp -r themes/WebStack-Hugo/exampleSite/* ./

# 启动 hugo 站点
hugo server
# 如果你知道你的公网 ip, 如下面的 132.76.230.31, 可以使用下面的方式执行 hugo server
hugo server --baseUrl=132.76.230.31 --bind=0.0.0.0

或者

# 创建项目
mkdir navsites
cd $_

# 初始化项目
git init

# 将 WebStack-Hugo 源下载到 themes/WebStack-Hugo 文件夹
git submodule add https://github.com/shenweiyan/WebStack-Hugo.git themes/WebStack-Hugo
cp -r themes/WebStack-Hugo/exampleSite/* ./

# 安装 hugo
go install github.com/gohugoio/hugo@latest

# 本地测试
hugo server

# 生成 docs 文件夹,将并静态内容生成至此处
hugo -D

导出 HTML 静态资源

可以通过下面的命令,生成(构建)静态页面内容。

hugo -D 或者 hugo --minify

这个命令会默认在public/目录中生成您的网站,当然您可以通过改变站点配置中的publishDir选项来配置这个输出目录。

Hugo 允许您在网站内容的前言设定中设置文档的draft,publishdate甚至expirydate字段。默认情况下,Hugo 不会发布下面内容:

  1. publishdate 发布日期值设定在未来的内容;
  2. draft:true 草案状态设置为真的内容;
  3. expirydate 过期日期值设置为过去某事件的内容。 这三个可以在本地开发和部署编译时通过对hugo和hugo server分别添加如下参数来重新设定,或者在配置文件中设定对应(不包含--)域的 boolean 值:
  4. -F, --buildFuture include content with publishdate in the future
  5. -D, --buildDrafts include content marked as draft
  6. -E, --buildExpired include expired content

部署站点

把生成的 public/ 静态内容目录上传到 GitHub,开启 GitHub/Gitee Pages,并且绑定 cname 域名即可。

调整头部搜索栏调整头部搜索栏

头部搜索栏的默认位置可以通过下面的方法进行修改。 直接修改 layouts/partials/content_search.html,调整对应部分的位置。 调整默认的搜索(即点击"常用/搜索/工具 ...." 时下指箭头的指向),把对应的 id 添加到对应的 label 里面。

自定义头部导航

WebStack-Hugo 把头部的导航菜单的各个信息集成在了 data/header.yml 文件中,每个人可以根据自己的需要调整。

- item: 首页
  icon: fa fa-home
  link: "./"

- item: 作者
  icon: fa fa-book
  link: https://www.yuque.com/shenweiyan

- item: 配置
  icon: fa fa-cog
  link: ""
  list:
    - name: 源码
      url: "#"
    - name: 图标
      url: "#"

获取网站图标

使用方法:

  1. 获取 Favicon 图标
https://api.iowen.cn/favicon/www.iowen.cn.png
  1. 刷新缓存
https://api.iowen.cn/favicon/www.iowen.cn.png?refresh=true
  1. 将上方代码中的 www.iowen.cn 替换为你需要获取的网址域名。
#创建 git 仓库:
git init 
git add .
git commit -m "first commit"
git remote add origin https://xxx.com/xxx/webstack.git
git push -u origin "master"
#已有仓库?
cd existing_git_repo
git remote add origin https://xxx.com/xxx/webstack.git
git push -u origin "master"

https://www.yuque.com/forms/share/ed6e7f70-e1de-4758-bf91-2cd325450c73

相关文章

评论

加载中...