创建你的个人网站～

构建一个展示你的文章或是作为网站主页的页面，也就是一个静态网站，有免费且简单的方法。本文主要介绍的是介绍如何通过我已经搭建好的网站框架制作展示你自己想展示的内容。\n
你需要一个github账号，这是这种构建方式主要依赖的平台。推荐你使用它的[link:网页版](github.com)，因为应用版本部分功能不能实现。由于这是一个国外网站，没有因言获罪的风险。但是连接速度不能保证，有条件的推荐开代理。你可以通过各种邮箱注册，为了保险最好不要用国内邮箱。如果你开了代理，你可以先通过国内邮箱注册一个[link:proton邮箱](https://mail.proton.me/)，再用proton邮箱注册github。\n\n注意，你所填的填用户名与你最后得到的免费网址有关。所以如果你需要好记的免费网址，你的用户名也要尽量好记。当你注册好后，你就会来到Github主网站。你可以了解一下主页的布局，Github是一个适合协作共享的平台，你也可以在上面学习、交流。特别适合学写网页程序，因为你可以通过“GitHub pages”直接将你的成果转化为真实长久的网页。我们就是要使用的就是这个功能。\n\n如果你对代码一窍不通，你一样可以跟着我们的教程作出展示你的文章等信息的漂亮的网站。如果你会且可以使用AI，你也可以将你的想法告诉AI并让其编写一个网页程序即可。我们也提供了一些模版可供使用，你可以访问[link:这个网站](https://github.com/FDO-page/jiaocheng)查看。现在请确保你已经做好了以下的准备，正式开始搭建你的个人网站。\n\n前置条件准备：\n1.一个浏览器，同时打开本网页和GitHub网页，GitHub网页已登录你的帐号，没有其他打开的网页；\n2.一颗清醒的好学的大脑；\n\n首先，选择你想要的风格。如果你更喜欢本页面这样的背景为蓝绿色相间的，以透明毛玻璃效果作为文字的面板的显示效果，请你分别点击打开[link:这个链接](https://github.com/FDO-page/jiaocheng/blob/main/homepage.html)和[link:这个链接](https://github.com/FDO-page/jiaocheng/blob/main/articlepage.html)。如果你更喜欢简洁的黑白的风格，请你分别点击打开[link:这个链接](https://github.com/FDO-page/jiaocheng/blob/main/succinct_home_page.html)和[link:这个链接](https://github.com/FDO-page/jiaocheng/blob/main/succinct_article_page.html)。这两个链接的顺序为前一个是主页，后一个是文章页。\n\n接下来，回到你的GitHub主页，不要关闭刚才打开的两个网站。这时你一共有四个打开着的网站。接下来我们要新建一个仓库。在网站的主页找到绿色的“Create a new repository”。先不要点击，上面有几个选项需要填写。从上往下先有一个以“name your”开头的的文字框，点击后可以填写内容。在这里你填入的将是仓库的名称。你所填的填与你最后得到的免费网址有关。所以如果你需要好记的免费网址，你的仓库名也要尽量好记。（如下图）\n\n[image: https://s2.loli.net/2024/08/14/RjbO431wUBpEnAm.jpg]\n\n你可以吧选项改为public，也就是公有库。因为如果是私有库，免费版用户的GitHub actions 会有限额。接下来就可以点击新建了。你会跳转到你新建的仓库的内部。这时候还没有一个文件，所以里面的都是提示。别担心，向下滑到浅蓝色面板，找到“creating”开头的蓝色文字，也就是第一串蓝色文字，点击，意思是新建一个文件。\n\n[image: https://s2.loli.net/2024/08/14/x7hDiUydP4naXTB.jpg]\n[image: https://s2.loli.net/2024/08/14/hvLTG7UgmtnsX18.jpg]\n[image: https://s2.loli.net/2024/08/14/Yc4IrmU3RlqxkWV.jpg]\n\n接下来你会跳转到文件界面。先找到页面上方含有“name your file”的文本框，填入index.html文本。意思是这是一个html格式的文件，名字叫index。一定要是这个名字，因为这是一个标识，让接下来GitHub pages知道你的网站的代码。接下来跳转到之前你选择的主页和文章页面代码的任意一个。全选代码框里的内容（可能要手动选择）并拷贝它们。回到你新建的代码界面，点击代码框并黏贴。你的这个页面的代码部分就构建好了。\n\n[image: https://s2.loli.net/2024/08/14/BpLlSiJsCZtEhd2.jpg]\n[image: https://s2.loli.net/2024/08/14/XfMZCU2dwhQVLiP.jpg]\n[image: https://s2.loli.net/2024/08/14/SFDi3xWM5he8AJg.jpg]\n\n点击右上方绿色按钮，保存你的文件。在接下来弹出的面板上找到同样的绿色按钮，直接保存。这个菜单是填写你的这个仓库的更新日志，有兴趣可以填写。接下来就保存了。如果跳转到仓库主页就是正确的，哪怕他弹出提示也直接忽略。那个提示意思是你没有保存就要关闭这个页面，但实际上可能是误报。\n\n接下来就可以关闭你已经复制了代码的我的GitHub模版，重复以上步骤就可获得另一个。注意仓库名称不得重复，但不同仓库间的文件名称可以重复。所以一样给这个文件命名为index.html。接下来你就要通过GitHub pages部署这个代码。你需要打开一个仓库，点击右上角的省略号（电脑不用），再点击setting按钮。\n\n在页面中找到“pages”并点击。如果你是电脑界面，你直接就可以看到相关设置。如果你是手机界面，你需要向下滑动找到。找到名叫none的按钮并点击，选择main并点击，也就是将你的文件部署在main分支下，如果你有创建其他分支，你也可以点击他们。\n\n接下来点击右边的save保存设置，再刷新几次页面。一分钟以后你就会得到你的网址，点击右边的“visit”开头按钮，检查你的网站是否正常。如果你上述步骤都正确，那么你将看到正常显示的网站。接下来重复以上步骤，把另一个仓库的page功能也打开。\n\n探索编辑\n\n好了，现在你已经有有你的个人网页了，你可以在任何时候通过分配给你的链接访问它。接下来我将介绍这个网页的功能以及你如何更改这个网页。这个网页可以允许你引用外部链接、引用外部图片。首先，回到你刚才新建的任意的仓库的代码位置，通过直接点击它的名字。找到右上方的笔形状的按钮(手机版为省略号，点击后选择edit开头文本并点击)，点击。\n\n向下滑动寻找中文文本。首先你见到的第一个中文文本就是网页的名称。这个名称显示在电脑浏览时切换到这个已经打开的网站前浏览器上方导航栏显示的文字。接下来要向下滑动一会，你看到的第二串中文文本将会是文章的标题，也就是点开页面后的大字。\n\n[image: https://s2.loli.net/2024/08/14/F8y9hsexJuINprK.jpg]\n[image: https://s2.loli.net/2024/08/14/Uj6teqVX4RdYC1b.jpg]\n\n你看到的第三串文字就是正文内容了。在正文和标题中，都有一些特殊的代码可以实现特定功能。首先是引用链接，你需要使用[li好nk:应该显示的文字](点击后跳转的网页链接)。你可以复制后去掉“好”字（因为这个页面也支持这个代码）后填充相应内容并黏贴进标题或正文的代码。需要注意的是这串代码中的符号是英文的符号。\n\n还有是引用图片，你需要使用[ima好ge:图片的链接]进行引用。也是英文符号，去掉好字。那么如何创建一个图片的链接呢？也很简单。你现在需要的就是图床，这是指将你的图片储存并赋予一个链接，使得你可以通过这个链接访问这个图片。这里推荐[link:sm.ms](sm.ms)。因为这个网站可以在国内相对快速的访问，且不用审核。\n\n那么具体如何使用？你先得注册一个账号，免费版账户一天可以上传10张小于5MB的图片，对于文章页面还是够用了。让后点击上传，上传好了以后找到并点击页面中间image URL，那就是你的对应图片的链接，将它填进代码模版里就可以正常显示了（记住所有的这个网站的生成的直接可用的网址都是以你上传的照片格式结束的，如果没有，那是你的链接找错了，别问我怎么知道的）。\n\n在正文部分，你并不能通过换行来使最终效果换行。而是要通过“\”+“n”进行换行，记得是英文符号。如果你嫌手动换行麻烦，可以（特别推荐）使用[link:这个网站](https://fdo-page.github.io/words/)转换你的文章。\n\n如果你觉得你的网站访问并不稳定，刷新了几次都没法打开，那么你可以考虑使用[link:cloudflare](cloudflare.com)部署你的网页。对于你的静态网页部署是完全免费的。动态网页也有一定的额度，应该也是够用了（5000次）。在这里部署很方便，也可以在墙内快速访问。\n\n首先，用你注册（登陆）GitHub的邮箱注册你的账户并登录（其他的邮箱也可以，不过后面关联GitHub账号麻烦些）。再接下来的页面向下滑动找到“start building”按钮并点击。选择第一个，标题为“Build”开头的选项并点击。这时他就会检查你的邮箱，请打开你的邮箱找到其发送给你的邮件，在原先登录好账号的浏览器打开第一个很长的链接。\n\n接下来选择界面中间的“Pages”并点击，之后点击蓝色”connect to git”按钮。这时会跳转一个新的页面，点击下方按钮”Connect GitHub”。又会跳转一个界面，不要更改页面的选项，直接下滑点击绿色”Install”开头的按钮。接下来登录你的GitHub账号。\n\n接下来选择你要部署的库，点击即可，一次只能添加一个库。接下来的界面填写的名字是你的这个项目的名称，与免费的网址也有关。如果你想要简短好记的，请一定要选择他给出的网站与你输入的内容不同的（尽量短的名称）。比如你输入1，他分配给我的网页就是1-1eh.pages.dev.。这就是可以的。不信邪的可以尝试输入复杂的名称试试。\n\n接下来直接向下滑动，不更改其他的，点击Save开头蓝色按钮。接下来你的网站就在部署啦。最后点击右下角蓝色按钮退出，你就可以看到你刚才部署好的网页，点击右上方visit检查一下。如果可以就完成啦。如果你还有其他GitHub仓库要部署，点击左上角Workers开头文本重复以上步骤即可。\n\n如果你觉得分配到的网站还是不好记，你可以回到github再创建一个仓库，命名为简单的名字。创建index.html文件，里面填写直接跳转网页的代码（请自行搜索，无法在此展示）。再重复上述操作配置到GitHub pages上。你就可以通过这个新建的网址跳转到cloudflare的了。\n\n快去构建你的网站吧～\n