技术冲浪: 拥抱 WordPress 官网时代

长文警告, 阅读本文至少需要30分钟, 开卷有益.

前言

烈日当空, 张大胖的同事都在午休, 大胖小心翼翼的敲着键盘, 时不时挠挠头. 路过的微风无意间穿过他的镜框,看向电脑屏幕.

哦, 原来是他朋友介绍了个私活, 开发一个生物科研行业官网, 在技术群讨论(吹水)呢.

这可难为大胖了, 大胖可不会前端.

正准备在群里招募前端队友呢, 群里的网友 Raka 提醒到, 大胖你去了解下 WordPress 吧, 不需要什么技术就可以搞出非常OK的官网.

大胖随即开始了 WordPress 的征途!

搞官网为什么选 WordPress ?

官方网站（office website），简称官网，是指政府机构、社会组织、团队、企业或者个人在互联网中所建立的具有公开性质独立网站。

官网的功能抽象的分为 4 种

• 信息公告,行业新闻,团队展示,产品展示 (zf,企业,NGO团体,科研团队相关公告)
• 博客记录 (用Vlog,Blog,Clog记录变化)
• 营销转化 (借助广告进行营销漏斗, 用在线支付/线下引流提高客户成交量)
• 保证获取信息的国际性,正确性,及时性 (国际化,联系方式,联系地址,文章引用追溯)

在软件开发领域中官网被划分为CMS领域, 即内容管理系统（英语：content management system，缩写为 CMS）是指在一个合作模式下，
用于管理工作流程的一套制度。该系统可应用于手工操作中，也可以应用到电脑或网络里。作为一种中央储存器（central repository），
内容管理系统可将相关内容集中储存并具有群组管理、版本控制等功能。版本控制是内容管理系统的一个主要优势。

接下来分析手机巨头某米的官网.

从首页看到页面被划分为了3块

• 导航栏
  • Logo
  • 各产品线外链
• 页面内容
  • 多张静态图片
  • 动态Banner图
• 页脚
  • 各项服务文字链接
  • 备案信息, 公示信息

分析二级页面中的某米MIUI官网.

从首页看到页面被划分为了3块

• 导航栏
  • 各产品线外链
  • 面包屑
• 页面内容
  • CSS,JS玩命渲染巨多图片
• 页脚
  • 产品展示切换
  • 声明和说明
  • 备案信息, 公示信息

某米系官网综合分析

• 某米官网
  • 从功能上看某米官网聚焦于各产品线产品引流以及国际化, 而营销转化多放在了二级页面. 设计类似与 hao123 的导航网站.
  • 从技术上看主要基于 Nuxt.js SSR 渲染页面 (可能基于某米封装的 MIFE 服务器), Js,CSS,图片等的静态资源基于Nginx代理.
    一些需要经常改变的内容比如 页脚的公示信息与网站的国际化则基于接口获取。
  • 猜测如果要对非接口内容进行修改需要程序员重新发包.

• MIUI官网
  • 从功能上看MIUI官网聚焦于流畅的展示产品特性, 设计类似与 iphone 手机官网.
  • 从技术上看主要基于 Next.js 服务器代理 webpack 打包后的 React 进行 CSR 渲染, 图片托管自tencent-COS, 除了数据上报没有用任何接口.
  • 猜测如果要对任何内容进行管理需要程序员重新发包.

microsoft 新闻网站综合分析

从首页看到页面被划分为了4块

• COVID-19 信息
• 导航栏
  • 各产品线外链
  • 公司信息
  • Logo
  • 搜索
  • 购物车
• 页面内容
  • 公司新闻
  • 科技新闻
  • 查看更多
• 页脚
  • 关注我们
  • 分享此页面
  • 各项服务文字链接
  • 网站公示信息

从上述网站中不难发现CMS领域的网站, 大多被分为3块 导航栏, 页面内容, 页脚, 在点击首页进入二级页面后, 只有页面内容发生改变, 其余的原封不动.
如果CMS网站的万变不离其宗, 那么低代码甚至无代码就在情理之中了.
而 WordPress 就满足了低代码低要求.

• WordPress优点
  • 免费,安全,友好
  • 支持编辑器自定义网站
  • 编辑器版本控制
  • 网站质量好 (Lighthouse 4项指标均优于一般网站)
  • 设计,运维步骤简单
  • 安全,简单的管理网站内容
  • 生态齐全,近万插件/模版可供选择
• WordPress缺点
  • 无法做出独一无二的炫酷网站
  • 运营人员要求高
  • 借助模版很难做出创新
  • 绝大多数生态都是外国人开发的,可能会遇到水土不服的情况
    

运维 WordPress

我们必须先部署了 WordPress 才能使用它, 部署的方式无处左右有 3 种办法

• 官方云托管
  • https://wordpress.org/hosting
  • 优点
    • 十分钟后, 您就可以得到一个 wordpress
    • 随着网站的流量增长, 轻松扩展服务
    • 运维要求低, 不需要太多计算机知识
    • 有官方技术支持
  • 缺点
    • 年收费 400 - 1000 RMB, 因为只能部署 WordPress 这个价格不算特别便宜
    • 不能利用已有的IT资源
• 基于已有的IT资源部署
  • https://make.wordpress.org/hosting/handbook/server-environment
  • 优点
    • 一天后, 您就可以得到一个 wordpress
    • 价格便宜
    • 自定义程度高
  • 缺点
    • 部署麻烦
    • 不安全, 如果是部署在内网容易引起攻击
• Docker 容器部署
  • https://hub.docker.com/_/wordpress
  • 优点
    • 一个小时后, 您就可以得到一个 wordpress
    • 部署方便
    • 升级维护方便
  • 缺点
    • mysql db 部署在容器中, 不太稳定
    • 需要部署环境能安装 docker, win server 2012 之类的服务器部署麻烦

官方云托管

这种部署方式就跳过了, 只需用钞能力点几下鼠标即可。

https://www.zhihu.com/question/46145688/answer/2525194091

https://zhuanlan.zhihu.com/p/375842458

基于已有的IT资源部署

构建 WordPress 需要 PHP + Nginx/IIS/Apache + MySQL 环境.

WordPress PHP 安装

php7.4 是WP的主流运行环境, 以下教程基于各平台的包管理器工具安装。

Web Platform Installer 安装

https://www.microsoft.com/web/downloads/platform.aspx

各平台包管理器命令行安装

# win winget (示意)
winget serach php
winget install xxxx

# centos yum
yum -y install gcc gcc-c++
yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm
yum -y install yum-utils
yum-config-manager