部署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 值：
1. -F, --buildFuture include content with publishdate in the future
2. -D, --buildDrafts include content marked as draft
3. -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
```
2. 刷新缓存
```
https://api.iowen.cn/favicon/www.iowen.cn.png?refresh=true
```
3. 将上方代码中的 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

部署WebStack-Hugo

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它