采用了一直以来最喜欢的 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下
- 进入hugo的目录下(假设F:\WebStack),解压WebStack.zip
- 然后,创建一个 themes 的文件夹,把解压后的 WebStack-Hugo 整个文件夹移动到 themes 中。
- 将 themes/WebStack-Hugo/exampleSite 目录下的所有文件复制到 hugo 站点根目录(即 F:\WebStack)
- 执行 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 不会发布下面内容:
- publishdate 发布日期值设定在未来的内容;
- draft:true 草案状态设置为真的内容;
- expirydate 过期日期值设置为过去某事件的内容。 这三个可以在本地开发和部署编译时通过对hugo和hugo server分别添加如下参数来重新设定,或者在配置文件中设定对应(不包含--)域的 boolean 值:
- -F, --buildFuture include content with publishdate in the future
- -D, --buildDrafts include content marked as draft
- -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: "#"
获取网站图标
使用方法:
- 获取 Favicon 图标
https://api.iowen.cn/favicon/www.iowen.cn.png
- 刷新缓存
https://api.iowen.cn/favicon/www.iowen.cn.png?refresh=true
- 将上方代码中的 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

评论