如何简单快速地搭建一个个人网站

网站是由一系列相互连接的网页组成，网页一般包括文字、图片、视频、超链接以及一些交互性工具等。网站一般分为两种，一种是静态网站，一种是交互性的网站。前者是网页作者只想单纯向外界表达和传播一些信息，网页读者不能够请求也不会得到网站自动的反馈信息。博客网站一般是静态网站，购物网站一般是动态网站。搭建动态网站的技术比较复杂一些。但是通过一些软件和工具，搭建一个静态个人网站变得非常简单，按下来我们使用rstudio和quarto写作系统快速搭建一个个人网站。我们将从思路和技术两个方面介绍。

建站思路

就思路而言，搭建个人网站分为四个阶段：构思－写作－设计－部署。

构思

构思是要回答为什么要做这个网站，通过网站我要传达哪些内容，内容分哪些版块。比如一个大学教师的个人网站可能包括以下内容：开设课程、科学研究、个人博客等。

写作

这一步的内容和网站搭建方面的技术关系不大，主要是准备网站所要呈现的内容，包括各种文档。不同于简单的文字写作，网页可能包括图片、超链接、表格、代码、音视频等要素，如何将这些要素快速整合到一个文档之中，quarto写作系统提供一个非常便捷与高效的写作工具，如何使用quarto写作，请参看quarto官网，也可参看我写的介绍文章。

设计

这包括栏目布局、导航、版式设计等，听起来比较复杂，但对于想搭建一个简单网站的人来说，没有必要从最基本的代码起，通常路径是从模板开始搭建，然后在此模板的基础上根据个人喜好调整一些美学上的要素，如颜色、字体、字号等。

部署

部署是把在本地搭建好一个网站放在一台服务器上，并获取一个网址，通过这个网址，让所有连接网络的人可以看到你的网站。听起来似乎涉及复杂的技术，事实也是这样。但现在比较好的是，一方面有很多免费的服务器，可以把我们的网站部署在这些免费的网站上，如果需要更专业的服务，也可以将网站部署在一些付费的服务器上。另外，部署网站本身已经变得非常简单，本文将介绍一个非常简单的步骤，快速将一个网站部署到免费的远程服务器上。

技术实现

下面将介绍如何使用quarto和Rstudio搭建一个个人网站。

  1. 首先安装quarto cli, 下载地址https://quarto.org/docs/download，推荐安装Pre-release版，可根据自己的电脑系统下载相应版本，下载完成，双击安装即可。
  2. 建立一个网页project，File > New Project > New Directory >Quarto Website, 在directory name处, 给网站所在文件夹起一个名字，比如pw_yy，点击Browse按钮选择将该文件夹放在的位置。在勾选设置中仅勾选Use visual markdown editor, 其它两项不勾选。最后点击Create Project。
  3. 上述命令执行之后，将生成一个名为pw_yy的project, 静态网站即是多个网页内容的组合，因此rstudio的project特别适合管理一个网站。文件夹中自动生成一个网站最基本的文档信息。其中，pw_yy.Rproj是rstudio project文件，很少对它进行调整。_quarto.yml是对网站进行配置的文件，涉及网站基本风格和导航系统等。about.qmd是一个网页，内容是对作者的简介。index.qmd是网站首页。style.css文档美化网页的文档。css是对网页要素美化的语言，如果需要更精细设计网站，可以去学习一下CSS语言，没有难度，容量也不大，如果没有这个需要，可不管该文件。至此，我们已经构建了一个最基本的网站。

  1. 双击可打开.qmd文档，比如index.qmd文档，是一个基本的quarto文档，点击文档上方的Render 按钮，在右下角的Viewer面板显示该网页。
  2. 接下来打开右上角的Build面板，这里有两个按钮：Render Website和Preview Website，前者是对构成网站的各网页同时渲染，后者是浏览已经渲染的网站。可直接按Render Website按钮。此时会生成一个_site文件夹，该文件夹包括构成一个网站所需要的所有文件。生成的网站在Viewer面板显示。点击方向朝右上方向的箭头按钮，即可将已经生成的网页在浏览器中显示。
  3. 接下来我们将新建立一个网页，并将其插入网站。新网页就是新建一个.qmd文档，比如我们要建立一个介绍我的研究方向的网页，那么就建立一个research.qmd的文档，并在里面输入一些想展示的内容，按Render按钮查看显示效果。
  4. 将刚生成的网页放在导航栏上。找开_quarto.yml, 在”about.qmd”的位置之上加上一个新的项目，research.qmd，如下图所示，保存。打开Build面板， 点击Preview Website浏览网站，可发现在导航栏新加了一个网页。

  1. 现在生成的网页还只是在本地，只能自己浏览。接下来我们将网站部署到服务器上，服务器有付费的和免费的，对于个人网站这种静态网站，免费服务器已经够用，quarto提供了几个免费的解决方案，比如Quarto Pub, GitHub Pages, Netlify等，GitHub Pages和Netlify需要git和github的知识，虽然也不是很复杂，但Quarto Pub简单的多，比较适合初学者。接下来如何在Quarto Pub上部署自己的网站。在Quarto Pub注册一个免费帐号，保持Quarto Pub处于登录状态。

  2. 在Rstudio左下角打开Terminal面板，在光标处输入以下代码：quarto publish quarto-pub 点击回车执行。按如下提示去官网确认信息。

    $ quarto publish quarto-pub
? Authorize (Y/n) › 
❯ In order to publish to Quarto Pub you need to
  authorize your account. Please be sure you are
  logged into the correct Quarto Pub account in 
  your default web browser, then press Enter or 
  'Y' to authorize.

  3. 运行成功之后，Rstudio将跳转到浏览器，显示内容如下，Published at后面即为该网站的网址https://xiaomaohao.quarto.pub/pw_yy/。此时在Rstudio的project文件夹里新生成一个文档_publish.yml，记录网站的url和你的quarto pub id信息，下次再次使用quarto publish quarto-pub 命令时就不需要帐号验证了。这样，一个可供别人浏览的网站就建成了。接下来的工作就是增添内容的事，关于quarto 建立网站的详细技术请参看官方说明。