WebStackHugo导航开源项目部署流程和内容一键配置

本项目是基于纯静态的网址导航网站 webstack.cc 制作的Hogo主题，基于开源项目的基础这里总结了一下在 centos7 云服务器部署和本地一键配置数据更新静态页面的笔记。

不得不说，Hugo 比 Django 利用开源的项目基础二次开发和数据整理要方便快捷很多。

先来看一下 我的主页吧。由于懒很多icon没有更新，将就能用，个人感觉相比源码来说亮点在于直接更新excel就可以直接导出data目录下webstack.yml文件直接使用。

安装部署

这是 Hugo 版 WebStack 主题。可以借助 Github Pages 或者 Coding 直接托管部署，无需服务器。

总体说一下特点：

• 采用了 hugo 部署方式方便高效。
• 配置信息都集成到了 config.toml，一键完成各种自定义的配置。
• 导航的各个信息都集成在 data/webstack.yml 文件中，方便后续增删改动。
• 做了手机电脑自适应以及夜间模式。
• 增加了搜索功能，以及下拉的热词选项（基于百度 API）。
• 增加了一些 API。

安装gohu

下载源码。

wget https://github.com/gohugoio/hugo/releases/download/v0.78.1/hugo_0.78.1_Linux-64bit.deb

sudo dpkg -i hugo_0.78.1_Linux-64bit.deb

下载dpkg命令的安装包epel-release-6-8.noarch.rpm。

wget -c http://archives.fedoraproject.org/pub/archive/epel/6/x86_64/epel-release-6-8.noarch.rpm

解压安装包。

rpm -ivh epel-release-6-8.noarch.rpm

yum install dpkg

下载liblzma.so的安装包xz-compat-libs-5.2.2-1.el7.x86_64.rpm。

wget -c http://mirror.centos.org/centos/7/os/x86_64/Packages/xz-compat-libs-5.2.2-1.el7.x86_64.rpm

解压安装包xz-compat-libs-5.2.2-1.el7.x86_64.rpm。

rpm -ivh xz-compat-libs-5.2.2-1.el7.x86_64.rpm
yum install dpkg

源码配置WebStackHugo

mkdir /root/项目目录/你的文件目录 
cd /root/项目目录/你的文件目录 

安装WebStack-Hugo主题。

mkdir themes
cd themes
git clone https://github.com/shenweiyan/WebStack-Hugo.git

将 exampleSite 目录下的文件复制到 hugo 站点根目录。

$ cd /root/项目目录/你的文件目录
$ cp -r themes/WebStack-Hugo/exampleSite/* ./

启动 hugo 站点，bashUrl对应的是服务器的ip地址和端口号。

hugo server --baseUrl=xxx.xxx.xxx.xxx:xxxx --bind=0.0.0.0 

配置Nginx

如果需要自己配置二级域名或者非端口号访问，建议使用nginx配置。

在目录 /etc/nginx下创建 conf.d，创建文件 default.conf 复制一下代码。

#
# The default server
#

server {
#    listen       80 default_server;
#   listen       [::]:80 default_server;
  listen       80;
  server_name  _;
    root         /usr/share/nginx/html;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {

    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }

}

在项目根目录下创建conf文件夹，创建nginx.conf文件复制以下代码。

server {
    listen     80;
    listen 443 ssl; # 监听443端口
    ssl_certificate /Django/WebStackHugo/conf/你的.cn_bundle.crt; # 证书地址
    ssl_certificate_key /Django/WebStackHugo/conf/你的.cn.key; # 私有密钥文件地址
    server_name  你的域名;
    root         /Django/WebStackHugo/docs; # 重新指定根目录
    location / {
       index index.html index.htm index.php;
       autoindex on;
    }

    # NodeJS 将 Web 服务跑在了 7777 端口，我们可以用 Nginx 反向代理到 80 端口
    location /webhook { 
      alias /root/webhook;
      proxy_pass http://127.0.0.1:7777;  
    }
    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }

}

然后重启nginx就可以了。

数据更新

每次更新webstack.yml数据需要在项目根目录下执行下面的命令，然后刷新页面即可。

hugo -D

Python整理内容数据

先来看一下整理的表格数据样子，C列后面的列名不要错，否则无法正确生成需要的 webstack.yml 文件。

数据更新的代码如下，直接根据上面的excel表格自动创建。

#!/usr/bin/env python
# coding: utf-8

import yaml
import pandas as pd

df = pd.read_excel("data.xlsx")
df = df[df["is_use"]==1]
df.reset_index(drop=True,inplace=True)

# 构建一级菜单
taxonomy_list = df["taxonomy"].unique()
# 构建taxonomy对应的icon字典
taxonomy_icon_dict = df.set_index("taxonomy")["icon"].to_dict()

all_list = []
for key_ in taxonomy_list:
    dict_each_one = {}
    for i in range(len(df)):
        dict_each_one["taxonomy"]=key_
        dict_each_one["icon"]=taxonomy_icon_dict[key_]
        dict_each_one["list"]=[]
    all_list.append(dict_each_one)
    
# 构建二级菜单
term_list = df["term"].unique()
# 构建taxonomy对应的icon字典
term_taxonomy_dict = df.set_index("term")["taxonomy"].to_dict()

term_list_all = []
for term_ in term_list:
    dict_each_one = {}
    # 先构建list中的term
    dict_each_one["term"]=term_
    links_list = []
    for i in range(len(df)):
        dict_each_one_temp = {}
        if df["term"][i] == term_:
#             print(df["term"][i])
            dict_each_one_temp["title"] = df["title"][i]
            dict_each_one_temp["logo"] = df["logo"][i]
            dict_each_one_temp["url"] = df["url"][i]
            dict_each_one_temp["description"] = df["description"][i]
        links_list.append(dict_each_one_temp) 
        links_list = [i for i in links_list if i !={}]
    dict_each_one["links"]=links_list
    term_list_all.append(dict_each_one)
    
# 将二级菜单合并到1级中
for i in all_list:
    for j in term_list_all:
        term_name = j["term"]
        if i["taxonomy"] == term_taxonomy_dict[term_name]:
            i["list"].append(j)

with open("webstack.yml", 'w',encoding="utf8") as f:
    yaml.dump(all_list,f,allow_unicode=True, default_flow_style=False,sort_keys=False)

生成的结果文件如下。

icon获取方式

这些图表需要自己更新的，不然只能使用默认的icon。

import os,base64
import requests
from PIL import Image
from io import BytesIO
from urllib.parse import urlparse

undata_list = []
for i in range(len(df)):
    try:
        url = df["url"][i]
        result = urlparse(url)
        ico_url = result.scheme "://"   result.netloc   "/favicon.ico"
        html_ico = requests.get(ico_url, proxies=proxies)
        image = Image.open(BytesIO(html_ico.content))
        ls_f = base64.b64encode(BytesIO(html_ico.content).read())
        imgdata = base64.b64decode(ls_f)
        with open('SiteLogo/{}.jpg'.format(df["name"][i]), 'wb') as f:
            f.write(imgdata)
    except:
#         print(df["name"][i],df["url"][i])
        undata_list.append((df["name"][i],df["url"][i]))

import os
import shutil

# 旧的列表
jpg_list = os.listdir("SiteLogo/")
# 数据列表中的图
info_jpg_list = [i.replace("SiteLogo/","") for i in df["logo"].to_list()]

# 差异不存在的图
diff_list = list(set(info_jpg_list) - set(jpg_list))

for i in diff_list:
    print(i)
    shutil.copy("SiteLogo/default.jpg","SiteLogo/"   i)

最后一定要记得用命令更新项目，否则无法生效。

这篇好文章是转载于：学新通技术网