- 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 自述页面。
-
- 克隆项目，自定义配置，本地构建和预览，然后将它们推回你的个人仓库。
-
- 将你的仓库部署到 Vercel 并使用 Vercel 生成的 URL 打开你的网站。
- #4 到 #3 甚至可以简化为一键操作，对于大多数已经在 Vercel 上提供模板的站点生成器而言。例如，这个 AstroPaper 模板。你可以通过谷歌搜索
框架名称 + Vercel 模板找到其他模板。
- 一旦你完成设置，将来只需要写新内容并推送。
-
我想自定义外观
- 大多数站点生成器就像其他软件工具一样 - 它们可以通过修改配置文件进行自定义。
- 此外，对于调整网站，最好有一些 HTML 和 CSS 的基本理解。
- 例如，要修改 AstroPaper 项目首页上显示的文本，只需修改其源模板文件。
-
我想使用自定义的域名
- 这里你需要与其他第三方服务提供商互动：
- 域名注册商：销售域名并帮助你管理它的经销商。我推荐 GoDaddy 或 NameCheap。
- DNS 名称服务器：云服务，将互联网用户从他们输入的 URL（例如 bingnan.xyz）重定向到你的实际网络托管服务器（例如托管你网站文件的 Vercel 服务器）。我推荐 Cloudflare。
-
我想要市场推广我的网站。
-
- 使其快速：使用 Chrome-Lighthouse 分析其加载速度；使用 CDN。
-
- SEO（搜索引擎优化）以便人们可以轻松找到你的文章。参见 marketing/SEO
-
- 给在 twitter/Facebook 上的分享链接一个漂亮的预览卡片：
-
我想与读者互动（评论）
- 静态站点没有后端，这意味着没有办法存储用户评论、进行用户登录等。
- 好消息是有免费的第三方评论提供商（如 Disqus）。你可以轻松地将其评论小部件嵌入到你的网站中。
-
我想获取网站流量分析
- Google Analytics
- 通过在仓库中添加小的配置更改来使用 Vercel Analytics
- 如果你使用它作为 DNS 名称服务器，则使用 Cloudflare analytics