分类:IESS网站部署和更新
- hugo & Wowchemy官方文档:
- hugo文档:https://gohugo.io/getting-started/quick-start/
- Wowchemy文档: https://wowchemy.com/docs/
- 建站模板:目前采用的模板是starter-academic([github](https://github.com/wowchemy/starter-academic)。
为了使用这个系统来部署和更新网站,需要一些基本概念和基本理念,然后是操作步骤。这些概念、理念和步骤都会整理在这里。
基本理念:格式和内容分离
这个网站建设、部署和更新的基本理念是格式和内容分离。网站的呈现形式(以及背后实现这个呈现形式的代码)在初期稳定之后不会再经常修改。同时,网站的内容修改者完全不用担心呈现形式只需要关注内容。当然,如果发现有目前呈现形式不满足其表现需求的情况,则反馈给呈现形式修改团队来做修改。
在WOWCHEMY系统里面,网站的内容全部都在'content'目录下面。'content'目录下面可以有不同语言的版本,而且只需要提供不同语言的版本,网站会自动显示对应的多语言。除了这个目录之外的其他的目录下的文件,都是管呈现形式的。也就是说,在内容更新的时候,在不需要做呈现形式改变的时候,网站管理者只需要改动'content'下的文件。
那么,WOWCHEMY系统是如何来实现这个内容到形式的对应的呢?它要求每一个内容文件都是一个带有“变量名”和“变量内容(变量值)”的markdown文件。例如,/home/jinshanw/IESS/iess-web/content/zh/authors/Jinshan-Wu/_index.md就是存储“Jinshan Wu”(“吴金闪”)这个用户的个人信息页面的文件,包含了这样一块内容:
education: courses: - course: 博士,凝聚态物理理论 institution: 不列颠哥伦比亚大学(UBC),物理与天文学系 year: 2011
你可以看到“:”之前的就是变量名,“:”之后的就是变量内容。WOWCHEMY系统接收到这些信息之后,会有专门的呈现形式处理系统来管这些变量内容如何呈现在各张网页上。WOWCHEMY系统主管呈现形式的程序分成几个不同的层次:WOWCHEMY自带的config等文件,以及WOWCHEMY可以额外增加的模块wowchemy-hugo-modules。如果你只是内容管理者,你只需要知道这些名字和大概的文件结构就可以了。这里的整理主要为了内容管理者服务。对于开发者,有了“形式和内容分离”的理念之后,只需要注意每一种页面都大概有一个相应的widget来控制其呈现形式就可以了。如果有必要,则去WOWCHEMY系统中去找到和修改相应的widget。
有了这个格式和内容分离的理念,我们甚至可以通过一个拥有图形界面的数据库(也就是存储了一大群“变量名——变量内容”关系)来管理内容。这样内容管理者更新这个网站的工作就会特别简单。实际上,WOWCHEMY就支持Netlify内容管理器。不过这个内容管理器被墙了。只能手动修改内容了。
WOWCHEMY基本概念
WOWCHEMY把内容目录下的子目录分成了两种类型,landing目录和实际内容目录。例如,landing-researches和research。其中,landing页面可以变成网站主页上的导航条目,实际内容页面则用来存储显示点进导航条目以后的内容。两者如何联系起来呢?在landing目录下面有两个文件,其中一个文件存着导航条目的名字,另一个文件存着一些格式控制参数以及实际内容需要到哪一个目录里面寻找的信息。例如,landing-researches目录下面的researches.md文件里面的这一行
content: # Page type to display. E.g. project. page_type: research
就指向了实际内容目录。在research目录下面,按照需求,分成了好多个研究项目,每个研究项目有自己的子目录。在子目录下面,也会有一个index.md的文件来存储要呈现的具体内容。
当然,如果你的实际内容很少,只有一页,你也可以直接把实际内容就写在researches.md文件里面。
IESS网站维护说明
有了上面的基本理念和基本概念,我们进入实操阶段。网站所有文件都保存在github服务器上。每次本地编辑和测试以后,同步到github上,然后服务器从github同步网站文件,最后在服务器上按照同步回来的文件生成网站发布所需要的文件,并发布网站。
搭建环境
- 安装Go语言 (sudo apt install golang)
- 从https://github.com/gohugoio/hugo/releases安装hugo_extended,例如hugo_extended_0.80.0_Linux-64bit.deb。
- git clone https://github.com/Bigger-Physics/iess-web.git。
> 只有Bigger-Physics团队成员有权限。 4. 运行调试:项目根目录下,运行`view.sh`脚本。
使用浏览器访问: http://localhost:1313 查看网页效果。hugo会自动感知内容变化并实时渲染(具体见上面信息中出现的`Watching for changes...`和`Watching for config changes...`)
- 网站管理
- 全局配置
所的配置文件都位于`config/_default`目录,通过修改这些配置文件可以对网站的大部分功能特性进行定制,包括界面、语言、菜单(导航)栏,等等。配置文件本身包含详细的注释,可以直接阅读或搜索。 - config.toml:详见源文件 - languages.toml: 配置网站的语言,已经把英文版关闭了,只保留了中文版 - menus.toml: 网站英文版的菜单配置(无需关注) - menus.zh.toml: 网站中文版的菜单配置(重要) - params.toml:详见源文件
- 内容管理
所有内容都在`content`目录下。目前网站只有中文版,根据约定,所有内容都放在`content/zh`子目录中。
- authors: 可以在这里编辑团队成员的profile,结合Wowchemy提供的[People](https://wowchemy.com/docs/getting-started/page-builder/#people)组件,可以构建漂亮的团队成员页面(我们现在没有这样做)。 course: 所有在“课程建设”分类下的文章都会被放到这里 home:首页 landing-courses:“课程建设”专题页 landing-members:“中心成员”专题页 landing-posts:“博客文章”专题页 landing-publications:“研究成果”专题页 landing-researches:“研究方向”专题页 landing-services:“社会服务”专题页 post:所有“博客文章”分类下的文章都会被放在这里 project:模板里遗留的,没有真正使用。其实course和research是模仿project新增的 publication:所有“研究成果”分类下的文章都会被放在这里 research:所有“研究方向”分类下的文章都会被放在这里 service:所有“社会服务”分类下的文章都会被放在这里
- 首页定制
在`content/zh/home`目录下: - contact.md: 联系我们, 参考[Contact](https://wowchemy.com/docs/getting-started/page-builder/#contact)组件 - index.md:首页模板 - introduction.md:中心介绍 - projects.md:模板里遗留的,没有真正使用 - sliders.md:slider,参考[Slider](https://wowchemy.com/docs/getting-started/page-builder/#slider)组件 vision-mission-value.md:愿景与使命,参考[Featurette](https://wowchemy.com/docs/getting-started/page-builder/#featurette)组件
Wowchemy提供了多种现成的组件(Widgets),可以根据需求将这些组件拼装在一起,构成页面 关于首页定制详细定制,参考这里:[Build your homepage with Wowchemy Page Builder](https://wowchemy.com/docs/getting-started/page-builder/)。
- 专题页定制
和首页定制类似。文档在这里:[Create a landing page](https://wowchemy.com/docs/content/landing-pages/)。
- 菜单(导航)栏定制
在`config/_default/menus.zh.tomls`里配置。
- 创建一个“研究方向”分类下的文章
在项目根目录下执行如下命令: ``` hugo new --kind research research/new-research/index.md ``` 将自动创建`research/new-research/index.md`文件,然后在index.md文档中添加内容即可。注意到每个markdown文档的头部都有一个front-matter部分,允许针对这个页面(这篇文章)做某些配置。详见这里:[Front Matter](https://wowchemy.com/docs/content/front-matter/)。
- 创建一个“研究成果”分类下的文章
在项目根目录下执行如下命令: ``` hugo new --kind publication publication/new-publication/index.md ``` 详见:[Create a publication](https://wowchemy.com/docs/content/publications/)
- 创建一个“课程建设”分类下的文章
在项目根目录下执行如下命令: ``` hugo new --kind course course/new-course/index.md ``` 详情同上。
- 创建一个“社会服务”分类下的文章
在项目根目录下执行如下命令: ``` hugo new --kind service service/new-service/index.md ``` 详情同上。
- 创建一个“博客文章”分类下的文章
在项目根目录下执行如下命令: ``` hugo new --kind post post/new-post/index.md ``` 详见:[Create a blog post](https://wowchemy.com/docs/content/blog-posts/)
- 构建静态网页
最终要将修改的内容构建为静态网页,然后发布到服务器上。构建也非常简单,首先删除旧的静态网页文件,然后运行构建命令: ``` rm -rf public rm -rf resources hugo ``` 一个完整的工作流大概如下: 1. git pull 同步最新的源代码到本地。 2. 本地修改、测试,git commit & git push 3. 登录到服务器,git pull同步最新源码到服务器 4. 执行上面的三条命令行,或者执行根目录下的`rebuild.sh`脚本
本分类目前不含有任何页面或媒体文件。