>>> from  env_helper import info; info()
页面更新时间: 2024-04-07 23:43:56
运行环境:
    Linux发行版本: Debian GNU/Linux 12 (bookworm)
    操作系统内核: Linux-6.1.0-18-amd64-x86_64-with-glibc2.36
    Python版本: 3.11.2

6.1. 网站内容发布

6.1.1. 制作网站的步骤

确定网站主题

网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内 容,做深、做透,办出自己的特色,这祥才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,主题要鲜明,在你的主题范围内内容做到大而全、精而深。

搜集材料

明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量捜集材料,捜集得材料越多,以后制作网站就越容易。材料既可以从图书、拫纸、 光盘、多媒体上得来,也可以从互联网上捜集,然后把捜集的材料去粗取精,去光盘、多媒体上得来,也可以从互联网上捜集,然后把捜集的材料去粗取精,去伪存真,作为自己制作网页的素材。

规划网站

一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色, 具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。

选择合适的制作工具

尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、 使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首 先就是网页制作工具了,目前大多数人选用的都是所见即所得的建站系统软件。你可以根据需要灵活运用。

制作网页

材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成 现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进 行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐 步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设 计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用网站管理系 统后台功能,这样可以大大提高制作效率。

上传测试

网页制作完毕,最后要发布到服务器上,才能够让全世界的朋友观看, 现在上传的工具有很多,推荐软件,你可以很方便地把网站发布到自 己制作的网站存放服务器上。网站上传以测试完毕就可以把你的网址告诉给朋友 或客户,让他们来浏览。

6.1.2. 静态网站与静态网站生成器

静态网站

静态网站是指全部由HTML(标准通用标记语言的子集)代码格式页面组成的网站,所有的内容包含在网页文件中。网页上也可以出现各种视觉动态效果,如GIF动画、FLASH动画、滚动字幕等,而网站主要是静态化的页面和代码组成,一般文件名均以htm、html、shtml等为后缀。

静态网页特点

  • 每个静态网页都有一个固定的网址,文件名均以htm、html、shtml等为后缀;

  • 静态网页一经发布到服务器上,无论是否被访问,都是一个独立存在的文件;

  • 静态网页的内容相对稳定,不含特殊代码,因此容易被搜索引擎检索;html更加适合SEO搜索引擎优化。

  • 静态网站没有数据库的支持,在网站制作和维护方面工作量较大;

  • 由于不需通过数据库工作,所以静态网页的访问速度比较快;

静态网站设计

大多数网站都是静态和动态内容的组合。 例如,动态生成的搜索请求可能与静态侧边栏,页眉和页脚并排出现。 不过,为了便于讨论,我们将重点放在“静态优先”的网站上,即:没有基于客户端请求按需生成内容的网站。 此类静态网站通常按照以下方式构建:

  • 内容作为静态HTML,CSS和图像文件提供。

  • 静态内容按原样存储在磁盘上,通常使用某种程度的内存中缓存,或放置在CDN(内容交付网络)中并进行地理缓存。

  • 只要更改页面,就会从后端重页建页面,并且页面可能会在托管面的不同基础结构上生成。 最关键的原则是,访问者的活动几乎绝不会按需生成内容。

并非每个网站都有利于静态内容的生成,但对于那些网站而言,其好处可能是巨大的。 由于可以在生成静态内容的不同基础结构上提供静态内容,因此很容易满足规模,安全性和关注点分离的需求。 静态内容易于大规模服务,因为它可以通过缓存或CDN轻松扩展。

静态网站生成器

静态网站生成及其工具(如内容管理系统)已经存在了数十年。 但是,最新一代的这些工具将静态内容的生成降到了最低限度,从而无需依赖庞大的内容管理系统即可构建和维护静态网站。 他们还通过提供插件体系结构和其他可扩展性来利用现代软件构建技术。

静态网站生成器执行以下三个基本操作来创建网站:

  • 从文件中读取内容,通常以某些简化的标记格式。 这些文件可以布置在与输出匹配的目录结构中,或者可以从描述文件创建该结构。

  • 根据模板将内容渲染为HTML。

  • 将结果保存到一个新目录中,该目录可以按照与源文件的布局匹配的方式进行布局,也可以根据某些预定义的模式进行布局。

最基本的静态站点生成器遵循此模式。 更高级的生成器可能会添加其他功能:

  • 如果内容托管在与呈现位置不同的基础结构上,则将结果HTML自动推送到网站或CDN。

  • 监视源文件是否有任何更改,并在更改文件后重新呈现它们。

  • 智能地重建整个源文件树,以便仅省掉一些必须重建的文件,这是一种省力的措施。

静态网站生成器与CMS

即使是最先进的静态网站生成器,也有意限制了功能集。 这是用例理念的一部分-它们旨在作为功能完善的内容管理系统的更简单替代方案。

大多数内容管理系统使用Web前端,需要数据库来存储内容和管理用户权限,并且需要大量的设置和维护才能有用。 静态网站生成器在大多数方面都采取相反的立场。 它们作为命令行应用程序运行,依靠操作系统来进行文件管理和用户权限,无需数据库即可工作(最多仅需要配置文件),并且不需要很多管理工作即可开始。

静态网站生成器努力使Web内容的创建和管理尽可能地减少开销。 例如,对于CMS,内容通常是通过系统自己的Web界面进行编辑和管理的。 使用静态站点工具,可以使用用户喜欢的任何文本编辑器直接在磁盘上编辑内容。

简而言之,完整CMS和静态网站生成器之间的最大区别在于该工具的理念。 内容管理系统通常在设计上功能丰富。 静态网站生成器会以HTML形式呈现内容,而通常会忽略其他所有内容。

顶级静态网站生成器

如果您要开始使用静态网站生成,则可以找到许多不错的工具供您选择。 在下面,我列出了八个最知名的工具。 一些静态网站生成器是独立的工具(例如此处的Hugo),但大多数都需要语言运行时。 您可能希望开始尝试使用已经熟悉或具有良好机构支持的语言编写的工具。

Gatsby (https://www.gatsbyjs.com/)

Gatsby使用JavaScript React框架来构建静态网站。 它不仅可以从现有的静态文件中构建,还可以连接到数据库,包括现有的内容管理系统(如WordPress)。 如果您要从现有的博客引擎迁移,这会使Gatsby成为一个有用的选项。 Gatsby还直接部署到包含CDN的托管平台。

Hugo (https://gohugo.io/)

Hugo用Go语言编写,可以作为本机二进制文件跨平台运行,因此对于不想处理配置语言运行时的网站开发人员来说是一个不错的选择。 Hugo开箱即用地提供了许多有用的组织功能,例如生成目录或网站菜单,重定向和干净的永久链接URL,以及对常见的第三方网站工具(如Disqus评论和Google Analytics(分析))的集成支持。

Jekyll (https://jekyllrb.com/)

用Ruby编写的Jekyll提供了基本的静态站点生成工作流。 用它的创造者的话来说,它“摆脱了您的束缚,让您专注于真正重要的事情:您的内容。” 不过,Jekyll确实在最小范围内提供了许多有用的功能,例如自动生成指向博客的下一页和上一页的链接的功能。 另请参见Octopress ,这是用于预先配置的Jekyll网站生成的框架。

Lektor (https://www.getlektor.com/)

用Python编写的Lektor与许多其他静态生成器一样,是基于文件的,但是它也提供了友好的管理界面,以及其他静态生成器通常不包含的一些工具(例如,图像管理)。

Nikola (https://getnikola.com/)

Nikola也是用Python编写的,提供了高级功能,例如智能的变更重建,来自许多常见博客引擎的导入器,以及用于根据需要广泛扩展功能的插件体系结构。

Pelican (https://blog.getpelican.com/)

用Python编写的Pelican ,是该语言中最著名,使用最广泛的静态网站系统之一。 Pelican允许使用不同类型的页面类型(例如,博客文章与独立网站页面),提供多语言支持,并缓存通用页面元素以进行快速重建。

React Static (https://github.com/react-static/react-static)

像上面的Gatsby一样, React Static使用React来呈现静态页面。 与Gatsby不同,React Static将数据查询和模板分开,以实现更明确的关注点分离,并且不依赖GraphQL作为内部数据查询格式。

VuePress (https://vuepress.vuejs.org/)

VuePress使用JavaScript的Vue框架。 VuePress强调最小的功能,可通过插件系统扩展,并带有专为技术文档设计的默认模板。 如果您使用JavaScript作为主要语言,并且比React更熟悉Vue,那么VuePress将是一个不错的起点。