build-personal-site

  • English (original) version of this article: build-personal-site-en

  • 概览

  • 本文介绍了构建和托管静态网站的初步知识和实践：静态与动态网站、现成的框架、最佳实践、工作流程、高级优化。

  • 拥有网站的理由

  • 网站就像你的个人笔记，而且是供人阅读的。这促使你更好地写作（从而更好地思考）。
  • 它作为一个永久且稳定的地方，方便他人联系你或查找你想分享的任何信息。
  • 作为一个主权个体，完全控制：
    • 不受平台控制
    • 完全自定义其外观，如 URL、主题、布局等。
    • 文件的完全版本（git）控制
  • 这是超级简单和便宜的事情：从模板一键部署不到13分钟，此外，除非访问者众多或用于商业目的，否则根本没有订阅费用。
  • __陷阱__：添加付费墙（如 Substack）将是非平凡的。

  • 启动网站需要知道的一切

  • 我想专注于写作并卸载其余部分

  • 最终产品看起来像：你有一个 github 仓库设置，你只需要推送你的写作。然后云服务将自动在后台运行，生成一个为你的写作服务的网站。
  • 整个过程第一次设置只需要几个小时。以下是关键步骤：
    • 有（很多！）不同的WebFrontend/frameworks。其中，静态网站生成器对我们特别有用。这样的静态网站生成器框架采用你的写作（以 Markdown 格式），使用预定义的模板将它们转换为网站，因此用户可以只专注于写作，而不必担心编码。
    • 这里有一个按照受欢迎程度排名的静态站点生成器列表，你可以从中选择。我推荐 Hugo 和 AstroPaper。
      • 注意：项目中使用的语言对用户来说并不重要，因为你主要是与配置打交道，而不是通过编码实际扩展框架。
    • 然后，两个最重要的步骤：__构建__ 和 __部署__ 你的站点。
      • 构建 是指站点生成器消费你的配置（如主题、字体、布局和标题）和你的内容源（你的写作）以生成一组准备好的文件，供网页浏览器加载的过程。
      • 部署 指的是将这些网站文件在线上某处托管，通过某些服务提供商，使其可以在互联网上被访问。
    • 现在，构建和部署通常被捆绑在一起，由一站式网络托管平台如 Vercel 完成。它们是最佳的起点解决方案，因为：
      • 易于使用：它们与 github 仓库链接、CI/CD、分析、日志和电子邮件通知很好地集成。它们还帮助处理像 https 安全这样的事情。
      • 加载速度快：它们与全球 CDN 集成，因此你的网站被缓存，并且可以从世界各地等速打开。
    • 总之，你需要经历的步骤：
      • 4) 选择一个静态站点生成器，找到其教程或 Github 自述页面。
      • 5) 克隆项目，自定义配置，本地构建和预览，然后将它们推回你的个人仓库。
      • 6) 将你的仓库部署到 Vercel 并使用 Vercel 生成的 URL 打开你的网站。
      • #4 到 #3 甚至可以简化为一键操作，对于大多数已经在 Vercel 上提供模板的站点生成器而言。例如，这个 AstroPaper 模板。你可以通过谷歌搜索 框架名称 + Vercel 模板找到其他模板。
    • 一旦你完成设置，将来只需要写新内容并推送。

  • 我想自定义外观

  • 大多数站点生成器就像其他软件工具一样 - 它们可以通过修改配置文件进行自定义。
  • 此外，对于调整网站，最好有一些 HTML 和 CSS 的基本理解。
    • 例如，要修改 AstroPaper 项目首页上显示的文本，只需修改其源模板文件。

  • 我想使用自定义的域名

  • 这里你需要与其他第三方服务提供商互动：
    • __域名注册商__：销售域名并帮助你管理它的经销商。我推荐 GoDaddy 或 NameCheap。
    • __DNS 名称服务器__：云服务，将互联网用户从他们输入的 URL（例如 bingnan.xyz）重定向到你的实际网络托管服务器（例如托管你网站文件的 Vercel 服务器）。我推荐 Cloudflare。

  • 我想要市场推广我的网站。

    • 4) 使其快速：使用 Chrome-Lighthouse 分析其加载速度；使用 CDN。
    • 5) SEO（搜索引擎优化）以便人们可以轻松找到你的文章。参见 marketing/SEO
    • 6) 给在 twitter/Facebook 上的分享链接一个漂亮的预览卡片：
      • 搜索关于“社交媒体分享 + 开放图形元数据”

  • 我想与读者互动（评论）

    • 静态站点没有后端，这意味着没有办法存储用户评论、进行用户登录等。
    • 好消息是有免费的第三方评论提供商（如 Disqus）。你可以轻松地将其评论小部件嵌入到你的网站中。

  • 我想获取网站流量分析

    • Google Analytics
    • 通过在仓库中添加小的配置更改来使用 Vercel Analytics
    • 如果你使用它作为 DNS 名称服务器，则使用 Cloudflare analytics

3 pages link here

Bingnan's Blog Home

建一个自己拥有的网站: build-personal-site

BlogHome2025LegacyVersion

建一个自己拥有的网站: build-personal-site

build-personal-site-en

中文版 Chinese Version: build-personal-site

A digital garden, perpetually growing.