你敢吗？一行代码都不用，一样能建专业网站
在上一期文章《V01 - 免费建站》里。
奶酪介绍了“如何用 9 块钱搭建一个属于自己的独立网站”，想必你应该试过了吧？但是不是不知道该如何下手，特别是各种代码，看着就头大？
本期内容，奶酪将奉上建站的“保姆级”教程。手把手教你搭建网站，并且一行代码都不用，只要有手就会的那种。
01
网站分类
网站可以分成了“静态网站”和“动态网站”，但就技术本身而言，网站又可以分成三种。
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文档程序：
VuePress、VitePress、Docusauru、Docsify 、Astro、GitBook、MkDocs、Gridsome、Pelican基本上，这些建站程序官网的样子，就是你最终的效果。
02
无代码建站
那要如何使用这些“静态网站生成器”呢？
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 部署的话，这一切都可以自动化部署。不需要输入任何代码，也不需要任何人工干预。
03
奶酪周刊
说了这么多，下面我们开启实战案例，首先以“奶酪周刊”为例。奶酪周刊的新版本，不但更好看了，而且也更加灵活，因为使用了文档程序“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、搭建完成
一般情况下，只要等上那么一会，网站就会生效。
04
奶酪导航
上面介绍的方法是“手动新建仓库”。还有一种更快的方法，就是用 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
05
奶酪清单
如果上面的方法，你还是搞不懂，那纯 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 文件里，这样只需要一分钟就会刷新了。
06
一键建站
如果你连 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-AIGithub.io 地址：
https://runningcheese.github.io/Awesome-AI自定义域名地址：
https://www.runningcheese.cn/Awesome-AI
结尾
说完成“免费建站”和“一键建站”。真正想拥有一个“完整功能”的网站，那就是下一期“专业建站”的内容了。
敬请期待！
回复关键字
V
查看本系列的所有文章，
回复关键字
V02
获取本文提到的所有资源
近期文章：
专栏介绍：
看完文章：
1、点在看，可以帮助更多的人看到这篇文章。
2、写留言，有问题写评论，我会尽可能回复。3、点关注，关注并星标，第一时间获取更新。