摘要
本文面向无技术背景/想要速建网站的朋友,给出在一天时间内搭建个人主页的一种方案。该方案提供了一种免费且网页排版自由度相对较高的方法,以移植现有网页模板,在此基础上将其打造为个人网站。
说在前面
本次创建的网站以github.io
为域名的,在搭建过程中使用了GitHub上已有的网站模板,并基于这个模板进行后期配色、增减文字。若想以本方法快速搭建网站,你需要:
- 有能稳定连接GitHub的网络
- 拥有一个GitHub账号(若无,考虑创建一个,或使用其他途径搭建网站)
- 拥有一个能够联网查询的AI工具(可选)
- 拥有一个能够编辑代码的IDE(可选)
Step 1: 选择心仪的网页模板
告诉AI你的诉求,基本格式为前置条件
+网站
+要求
+任务指令
,其中的网站
部分需提及要求目标模板为GitHub上的开源模型,要求
为你对网站基本架构的构思,例如需要侧栏、需要顶部导航、方便图片插入与排版等。特别的,GitHub内置了与jekyll有关的初始化办法,这种方法能以更高的效率得到一个可用的网站,但在网站细节(如颜色、字体等)可能较难调控;相比之下,直接下载原模板,并在此基础上修改就可以有效避免这个问题。
例如:你是一个专业的网站开发者,我是一个没有任何编程与开发基础的初学者。现在,我想要创建一个以github.io
为域名的网站。我希望你能从GitHub上为我寻找开源模板,要求如下:1. 需要左侧侧栏或其他导航功能;2. 界面较为丰富;3. 源代码清晰易修改。请你为我搜索网站,找出符合要求的开源模板至少五个,并且向我介绍它们的名称、详细描述其特色并附上仓库链接以及示例链接(如有)。最后,请你向我推荐你认为最适合的,并阐述理由。
在AI给出答复后,你只需要点入各模板的示例链接,查看其网页排版等情况。若没有示例链接,可以将模板名称拿去搜索,有概率搜到该模板形成网页的界面。若符合你的要求,则进入下一步;若不符合要求,例如你认为画面中缺乏一些必要的特质(尤其是顶部导航、侧栏,这些属性可能难以在以成型的模板中添加),请向AI提出并让其重新生成答复。
Step 2: 将模板移植到你自己的仓库并下载
打开你选中的模板的仓库链接(一般格式为https://github.com/example_username/example_repo
),点击页面左上角的<> Code
,再点击页面右上角的Fork
,并将其命名为你的GitHub名称.github.io
,例如我的名称为lxm-lc
,那么这个仓库就需要命名为lxm-lc.github.io
,从而将目标仓库转移到你自己名下。
打开个人主页,进入刚转进的仓库,复制其链接(一般格式为https://github.com/your_username/example_repo
)。打开你想要储存并编辑这个网页源文本的文件夹,点击页面上方的路径栏(Windows中一般为此电脑 > Data(D:) > ...
),输入cmd
并点击回车,在弹出的页面中输入git clone 你的仓库的链接
,例如git clone https://github.com/lxm-lc/lxm-lc.github.io
,从而将其储存至本地。
Step 3: 修改并提交
进入你本地的仓库,并且看一眼有没有明确需要修改的地方(例如原作者已经标明的让你填写自己昵称、邮箱号之处),并迅速扫一眼代码结构,基本了解哪些文档是储存网页文本以及图片内容的。
与Step 2中提及的相同界面中依次输入git add .
,git commit -m "(commit msg)"
,git push
以将你在本地修改过的代码push到网站上。请注意,这里的add
和.
之间有一个空格;”(commit msg)”部分可以写你做了什么修改,方便记录与后期查看。
回到网页段,打开你的这一仓库,在上方导航栏中选择Settings
,在左侧导航栏中选择Pages
,点击中上方的Visit Site
,你就可以看到你目前的网站了。
Step 4: 文章内容的定位
我们下载的模板可能由很多部分组成。很多时候,我们即使知道了某个文件为网页内容写的文字,也很难把其具体分布弄清楚。这个时候,我们可以选中已有网站的一部分文字内容并复制,在本地文件中搜索,搜索到的文件的位置即为该板块所对应的源文件的位置。
Step 5: 对网页格式的修改(可选)
如果我们觉得目前的网页格式比较糟糕,想要略微调整颜色或布局,可以尝试修改源代码。具体修改哪个文件、如何修改,可以拿本地代码的结构结合使用背景询问AI. 这里给出一种迅速打印本地代码结构的方法:在与Step 2中提及的相同界面中输入tree
,即可获得。
附录
我的网站的模板的示例网站是https://kitian616.github.io/jekyll-TeXt-theme/,其在GitHub上的仓库是https://github.com/kitian616/jekyll-TeXt-theme.