你信吗？一行代码都不用，一样能建网站！
奔跑中的奶酪导读
在上一期文章《V01 - 免费建站》里。
奶酪介绍了“如何用 9 块钱搭建一个属于自己的独立网站”，想必你应该试过了吧？
但是不是不知道该如何下手，特别是各种代码，看着就头大？本期内容，奶酪将奉上建站的“保姆级”教程。
手把手教你搭建网站，并且一行代码都不用，只要有手就会。
一、网站分类
网站可以分成了“静态网站”和“动态网站”，但就技术本身而言，网站又可以分成三种。
1.1、浏览器渲染
在互联网早期，人们是直接编写 HMTL 网页文件的，网站上的页面与服务器里的 HTML 文件一一对应。
这种纯静态的 HTML 网页。
其实就是服务器发送“网页源代码”给浏览器，然后靠浏览器本身的渲染能力来展示网页。
这种方式叫做，浏览器渲染 BSR (Broswer Side Render) 。
1.2、服务器渲染
但是，HTML 这种“刀耕火种”的开发方式，应付不了互联网的蓬勃发展。
比如你想让昨天的文章链接自动链接到今天的文章上，你需要打开昨天的文章，重新编辑文章。
就更别说“不同用户展示不同的内容”了。
于是，人们发明了前端和后端分离的动态网站，这种方式叫做，服务器渲染 SSR（Server Side Rendering）。
前端以 JavaScript 为标准，后端则有 PHP、Java、Python 等多种语言，然后通过“数据库”来动态展示网页。
但这也需要庞大的服务器消耗。
1.3、静态页面生成
而对于一些较为静态场景，比如官网、博客、文档等内容。
它们的内容相对比较确定，变化不频繁，每次通过服务端渲染出来的内容都是一样的，这无疑造成了浪费。
于是，静态网站生成器 SSG (Static Site Generation) 诞生了。
它可以预先渲染页面，并生成静态的 HTML 网页。
只需要要把生成的 HTML 静态资源，部署到服务器后，服务器就不再需要实时的渲染和响应了。
一些网站提供免费的托管服务，主要还是因为 HTML 网页消耗的资源极少。
这样的建站程序很多，现在也有越来越多的网站采用这样的建站方式，比如：
博客程序：Hexo、Hugo、Jekyll、NotionNext
文档程序：VuePress、VitePress、Docusauru、Docsify 、Astro、GitBook、MkDocs、Gridsome、Pelican
基本上，这些建站程序官网的样子，就是你最终的效果。
二、无代码建站
那要如何使用这些“静态网站生成器”呢？
2.1、常规方案
相比于纯 HTML 网页，“静态网站生成器”网页，最大的区别在于“部署网站”这一步。
对于有编程经验的人来说，这算不了什么，但对于普通人来说，则是一个巨大的考验，很多人就是”死活搞不定“。
一看到需要在终端输入代码。
一看到需要安装 Node.js，还有 NPM、Yarn、PNPM 各种包管理工具，
一看到需要安装 Git，
一看到需要安装 VSCode。
对于一个外行来说，这实在太难了。
2.2、无代码方案
因此，奶酪特意开辟了一个“不用代码，并且符合直觉”的建站方案。
首先是不需要“命令行”。
其次 Node.js 也不需要。
Node.js 就是运行在服务器端的 JavaScript。
它的作用是渲染网页，可以你可以在本地预览网站，而且它还有包管理功能：Npm、Yarn、Pnpm。
但其实这些并不是必需的。
像博客，文档这类网站，本身就比较简单，网站会变成什么样，是能够预期的。
而且，我们也没不必从零开始，没必要用 Nodejs 下载各种包，，我们完成可以直接套用现成的模板。
还有 Git。
它其实是一个 Github 仓库上传下载的命令行工具，对于普通用户来说，使用“图形化工具”会更加符合直觉。
GitHub 官方工具 GitHub Destop 就是个很好的选择。
还有 VS Code。
它其实是一个大型语言编辑器，支持多种语言，然而，正是因为它的强大，对于普通人来说实在难以入手。
我们完全可以用现有的软件来代替。
比如 Markdown 文档可以用 Typora 等编辑器，JS、CSS 等文档则可以用系统自带的“记事本”就可以。
当然，奶酪还是更推荐 Sublime Text。
最后是“部署网站”。
虽然 GitHub 本身也有部署功能，但需要使用代码运行，而使用 Vercel 部署的话，这一切都可以自动化部署。
不需要输入任何代码，也不需要任何人工干预。
三、奶酪周刊
说了这么多，下面我们开启实战案例，首先以“奶酪周刊”为例。
奶酪周刊的新版本，不但更好看了，而且也更加灵活，因为使用了文档程序“Astro”，同时参考了“tw93”的模板。
3.1、新建仓库
在 GitHub 上新建一个仓库，名字什么的，没有硬性要求，地址：https://github.com/new
3.2、Github Desktop
安装 GitHub 官方推出的 Git 图形化应用 Github Desktop，地址：https://desktop.github.com
3.3、克隆仓库到本地
将刚刚新建的仓库 Clone 到本地，可以自由选择仓库的保存位置。
3.4、上传仓库文件
我们完全没必要从头开始，可以直接复制别人的模板，也就是将别人的仓库下载下来。
然后，再将下载的文件，放在步骤 3 的仓库文件夹里，接着用 GitHub Desktop 同步上传到你的仓库里。
3.5、用 Vercel 部署
尽管 GitHub 本身也有部署功能，但需要使用代码，使用 Vercel 部署，则可以实现无代码一键自动部署。
3.6、设置域名解析
部署成功后，再设置一下“域名解析”。
复制要解析的内容，然后到你的“域名购买商”里再设置一下“域名解析”。
3.7、搭建完成
一般情况下，只要等上那么一会，网站就会生效了。
四、奶酪导航
上面介绍的方法是“手动新建仓库”。
还有一种更快的方法，就是用 Fork 的方法，它可以一键复制别人的配置，不需要上传下载，在云端就可以完成。
我们以现在非常流行的“网站导航”为例。
4.1、Webstack
Webstack.cc 是一个知名的网址导航网站。
但它是一个纯 HTML 网站，使用稍显麻烦，而它的衍生版本更加方便，WebStack-Hugo 正是这方面的佼佼者。
地址：https://github.com/shenweiyan/WebStack-Hugo
4.2、一键 Fork
而搭建方法，除了可以一键 Fork，
如果项目还提供了“Deploy”按钮，那我们还可以“一键部署” ，它会自动 Fork，并可以直接进入到部署阶段。
地址：https://github.com/runningcheese/WebStack-Hugo
部署到 Vercel 时，注意在 Framework Preset 选择 Hugo 即可。
4.3、设置域名
通常等上一会，Vercel 就会部署成功。
然后，在“Setting”里修改一下“域名解析”，还有到你的“域名服务商”设置同样的域名解析，然后网站即会上线。
4.4、配置网站
部署网站后，网站的默认内容是别人的，你只需要把关键内容修改为自己的即可。
具体内容包括：
网站设置：config.toml
头部链接：data/header.yml
网站链接：data/webstack.yml
友情链接：data/friendlinks.yml
五、奶酪清单
如果上面的方法，你还是搞不懂，那纯 HTML 网页会吧？
只要你懂一些 HTML、CSS、JS 知识，你大可自己手写一个 HTML 网页。下面的网页，就奶酪的“奶酪清单”。
清单地址：https://www.runningcheese.cn
项目地址：https://github.com/runningcheese/runningcheese.github.io
为了让网页更像一个网站，你还需要增加 404.html、favicon.ico、.htaccess 等内容。
需要注意的是。
GitHub 上的 .txt、.css、.js 文本文件，还有 .png、.jpg 等图片文件的缓存时间长，至少要 6 小时才会刷新。
你可以在先本地调试，然后再一次性上传。
又或者把 .css 等内容写入到 index.html 文件里，这样只需要一分钟就会刷新了。
六、一键建站
如果你连 HTML 网页也不会，那么奶酪还有一个“一键建站”的方法。
就是直接用 GitHub 来当做网站。
首先，要注册 GitHub 账号，这个不用多说。接着，要新建一个名为“用户名.github.io”的仓库。
比如我的用户名是 runningcheese，仓库名则是 runningcheese.github.io。
创建成功后，直接打开 https://runningcheese.github.io，网页就会自动生效。
在“Settings”里添加“自定义域名”，可以你的域名来代替 GitHub 域名，勾选 HTTPS 还可能自动获得 SSL 证书。
最后，打开 https://runningcheese.cn。
网页上的内容，就会与 runningcheese.github.io 仓库上的内容一模一样。
而且，只要你按上面的步骤。
创建了“用户名.github.io”的仓库，那么你 GitHub 上的所有仓库，就都可以直接输出为 HTML 网页。
前提是，你在仓库的 Settings 里勾选了Pages 功能。
比如奶酪的“Awesome AI”项目，就是这样做的。
项目地址：
https://github.com/runningcheese/Awesome-AI
Github.io 地址：
https://runningcheese.github.io/Awesome-AI
自定义域名地址：
https://www.runningcheese.cn/Awesome-AI
结尾
说完成“免费建站”和“一键建站”。
真正想拥有一个“完整功能”的网站，那就是下一期“专业建站”的内容了，敬请期待！
最后
- 欢迎关注奶酪 公众号 获取奶酪所有的原创资源，回复文章编号，比如 V02 就可获取对应的资源。
- 欢迎订阅我的 “奶酪书签专业版”，15年沉淀，超过 5000 个分类井条有序的好用实用 html 网站书签。
- 本文由「奔跑中的奶酪」原创创作，欢迎订阅、留言和 打赏，也欢迎引用和转载，但要注明出处。
