001-建立你的第一个网站：Blog

一、前期准备

需要准备的事项不多，如下所示

1. 访问网络的环境
2. Github账号
   • 点击Github注册

Github用户名一旦注册无法更改，后面常常用到，尽量起个简短好听的名称

关注 2 点信息：

• Github用户名：比如，thzhangbio
• 仓库名字：初次接触建站时，统一命名为 用户名.github.io ，即 thzhangbio.github.io，

二、复制仓库

我们使用现成的模板Chirpy，复制它们的代码到我们自己的仓库

Steps：

1. 点击Starter进入模板仓库网站，
   • 依次选择 Use the template 和 Create a new repository
2. 新建仓库，
   • 填写 用户名.github.io
   • 选择 Pubilc
   • 点击 Create repository 创建仓库

图文演示：

Step 1

• 点击Starter，
  • 依次选择 Use the template 和 Create a new repository

Step 2

• 新建仓库，
  • 填写 用户名.github.io
  • 选择 Pubilc
  • 点击 Create repository 创建仓库

三、建立写代码的云环境

简单来讲，就是 Github 把它的电脑给你用，这个电脑提前配置好了代码运行的环境，你只需要敲代码就好了。

1. 点击 Codespaces 进入相关界面
2. 点击 New Codespaces ，
3. 选择我们 2.2 节创建的仓库，它的格式为 用户名/用户名.github.io
4. 其余选项保持不变，或者将 2-core 更改为 4-core ，都可以，不影响
5. 点击 Create Codespaces ，创建云代码编辑环境
6. 等待加载完成，右下角是进度条，这个过程 30 秒 ~ 3 分钟不等，视网络环境而定
7. 当出现这个方框，即终端的欢迎语时，代表加载完成，云环境创建好了

图文演示：

Step 1

• 点击Codespaces进入相关界面

Step 2

• 点击 New Codespaces

Step 3

• 选择我们 2.2 节创建的仓库，它的格式为 用户名/用户名.github.io

Step 4

• 其余选项保持不变，或者将 2-core 更改为 4-core ，都可以，不影响

Step 5

• 点击 Create Codespaces ，创建云代码编辑环境

Step 6

• 等待加载完成，右下角是进度条，这个过程 30 秒 ~ 3 分钟不等，视网络环境而定

Step 7

• 当出现这个方框，即 终端 界面的欢迎语时，代表加载完成，云环境创建好了

四、写2行代码打包网站

敲代码的环境已经准备好了，所以接下来，只要敲 2 行代码就可以把网站打包好了

打包是指，让网站从散装代码变得具有功能性，后续可以本地部署查看，也可以部署到其他地方查看。

Steps：

1. 复制代码gem install jekyll，粘贴在光标闪烁的位置，之后按键盘上的回车键Enter
   • 成功有提示
2. 复制代码bundle，粘贴在光标闪烁的位置，之后按键盘上的回车键Enter
   • 成功有提示

图文演示：

Step 1

• 复制代码gem install jekyll，粘贴在光标闪烁的位置，之后按键盘上的回车键Enter

  $ gem install jekyll
  

  

• 成功有提示：

Step 2

• 复制代码bundle，粘贴在光标闪烁的位置，之后按键盘上的回车键Enter

  $ gem install jekyll
  

  

• 成功有提示

接下来，就是最激动的时刻啦，本地部署可以快速查看效果，外网部署可以有个网址，让所有人访问

五、本地部署

敲一行代码就可以本地查看了

• 复制代码bundle exec jekyll s，粘贴在光标闪烁的位置，之后按键盘上的回车键Enter

  $ bundle exec jekyll s
  

  

• 成功有弹窗提示

• 会加载一小会儿

• 网站成功出现！

六、网站部署

我们用的是云代码环境，其实本质上还是等同在用我们自己本地的电脑做调试，如果要让别人也看到，得把我们的代码，推送到Github上才行。

那么这个章节，就是介绍如何推送，让所有人都看到你的网站。

刚刚我们的一系列操作，早就被记录下来了，它就在编辑器的分支这里，我们只要将这些变化提交就好了。

Steps：

1. 点击屏幕的小三角符号
2. 点击√提交
3. 把#以及非代码的部分去掉
4. 清除无关部分后，点 √
5. 继续点 同步更改
6. 到这里就初期搭建全部完成，等待 1 分钟左右，在浏览器地址栏输入 https://用户名.github.io

图文演示：

Step 1

• 点击屏幕的小三角符号

Step 2

• 点击√提交

• 确认

Step 3

• 把#以及非代码的部分去掉

红色框框内以及类似格式的是代码， 其余部分删掉

首次推送时，这里估计有特别多的文件， 可以采用键盘上的Ctrl + H 一起按的方式， 将 “替换” 这个功能给唤醒，然后上方点#，下方留空白， 点 蓝色数字 2 旁边 的这个框起来的一键全部替换按钮，就达成了一键删除

Step 4

• 清除无关部分后，点 √

Step 5

• 继续点 同步更改

• 确认

Step 6

• 到这里就初期搭建全部完成，等待 1 分钟左右，
• 在浏览器地址栏输入https://用户名.github.io

即可访问你的博客网站啦~

举例： https://thzhangbio.github.io

七、后续完善与优化

https://thzhangbio.github.io

只是初级形态，它是一个骨架

后续还有许多需要补充的部分，比如，

https://webstar.wiki

做了哪些不一样的优化，可以对比对比，后续陆陆续续补充。