部署网站到GitHub或者码云

# 所需工具

VS Code、Git、Chrome

# 创建项目

# 1.创建文件夹（工作路径）

在自己的系统下创建一个文件夹，进入到文件夹，在地址栏使用cmd打开：

如果安装了vscode的话，应该会有一个code的指令，在cmd界面输入code .即可进入，如果不使用命令行也可以直接打开vscode,文件选项里面有个打开文件夹，选择你刚才创建的文件夹即可：

# 2.VS Code编写代码

进入VS Code,可以在左侧看到几个图标，第一个是文件资源路径，你可以点击如图所示创建文件：

在左侧第三个是VS Code自带的版本控制git工具，后面我们会使用到：

编写代码：

1.首先新建一个index.html，并在里面填写你要写的代码(不要照抄)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel=icon href=./favicon.ico>
    <link rel="stylesheet" href="./style.css" />
    <script>
      console.log("%c作者：陈昀昊，最后修改时间：2020/6/8", "color:#2B81D6;");
    </script>
  </head>
  <body>
    <div id="app">
      <h2>Next Chapter</h2>
      <ul>
        <li><a href="./a.html">Goto A Page</a></li>
        <li><a href="./b.html">Goto B Page</a></li>
        <li><a href="https://cloudhao.top" target="_blank">陈昀昊的博客</a></li>
        <li><a href="https://gitee.com/cyh199910" target="_blank">码云地址</a></li>
      </ul>
      <p class="line">git add file</p>
      <p class="line">git commit -m "message"</p>
      <p class="line">git push origin master</p>
      <p class="next" style="font-weight: bold; font-size: 25px;">
        明日教学内容：html标签
      </p>
      <p class="line next">
        预习路径：
        <a
          class="next"
          target="_blank"
          href="https://www.runoob.com/tags/tag-html.html"
          >菜鸟教程</a
        >
        /
        <a
          class="next"
          target="_blank"
          href="https://www.w3school.com.cn/tags/tag_html.asp"
          >W3Cschool</a
        >
      </p>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

同理：a.html,b.html也是如此：

a.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A页面</title>
    <link rel=icon href=./favicon.ico>
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
    <div id="app">
        <h2>页面 A</h2>
        <ul>
            <li><a href="./b.html">Goto B Page</a></li>
            <li><a href="./index.html">Goto Index</a></li>
            <li><a href="https://cloudhao.top" target="_blank">陈昀昊的博客</a></li>
            <li><a href="https://gitee.com/cyh199910" target="_blank">码云地址</a></li>
        </ul>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

b.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B页面</title>
    <link rel=icon href=./favicon.ico>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="app">
      <h2>页面 B</h2>
      <ul>
        <li><a href="./a.html">Goto A Page</a></li>
        <li><a href="./index.html">Goto Index</a></li>
        <li><a href="https://cloudhao.top" target="_blank">陈昀昊的博客</a></li>
        <li><a href="https://gitee.com/cyh199910" target="_blank">码云地址</a></li>
      </ul>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

style.css:

html,
body {
  margin: 0;
  padding: auto;
}
#app {
  padding-left: 8px;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.line {
  font-weight: bold;
}

.next {
  color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这样我们的代码就写完了，这里如果你想要预览你写的代码，可以使用老师推荐的Live Server,我自己使用的是View in browser插件：

插件在VS Code左侧的第五个按钮：

如果使用的是View in browser,你在右键index.html将会看见这个：

点击后就可以看到你的网页了：

# 3.Github创建仓库

首先打开GitHub，登录之后，头像左侧会有一个＋号，点击后会出现New repository,点击它：

Repository name为仓库名称，Description为描述信息，其他的暂时默认就行，

信息填写好后，点击Create repository绿色按钮

创建完成后是这个界面，它包含了一些常见的git命令，知道你怎么去把本地仓库上传：

# 4.Git账户配置

git仓库的设置需要提前将GitHub的用户名和邮箱在本地生成，刚刚安装好git的同学可以先运行以下命令：

ssh-keygen #用于生成本地ssh公钥，运行完后一路回车即可
git config --global user.name "输入你的用户名" #Github的用户名自己查看
git config --global user.email "输入你的邮箱" #注册GitHub时候的邮箱

1
2
3

这样的操作是为了后续上传仓库时少一些验证项

# 5.本地仓库上传

首先在vscode中打开终端，终端可以在顶部栏找到，打开新建一个终端：

打开后下方会弹出一个终端窗口：

我们输入命令：

git init    #这个命令的意思是初始化仓库

然后我们会发现左侧的第三个git选项会出现数字，那就是我们本地未提交的文件：

下一步，本地仓库创建好了，我们需要与之前在Github建立的远程仓库建立关系，其实在刚才Github新建仓库后就有一串代码：

这一个就是我们与远程仓库创建联系的关键，在终端输入：

git remote add origin https://github.com/cloudhao1999/train2.git

之后就是输入提交信息和推送，命令行版本如下：

git add .    #添加现有文件
git commit -m "你想说的话"  #创建提交注释信息
git push -u origin master #提交仓库到远程master分支

1
2
3

但是VS Code也有图形化的选项，如果命令不太熟的同学也可以先试试图形化推送：

我们点击那个git的图标，就是带数字的那个：

点击后，输入框内就是我们要写的提交注释信息，相当于命令行的git commit -m "你想说的话",下方是还在更改状态的文件，还未进入仓库

我们输入完自己的提交信息后，点击✔的图标，在弹出的框选是：

发现之前待更改的文件都消失了，如果你还要修改一些里面的文件，后面修改后的文件还会在这里出现，现在还只是在本地仓库提交，我们还需要推送到远程，点击三个点...的按钮，里面有一个推送的选项：

我们点击推送，第一次会弹出选项框，点击确定：

中间有可能需要你填写账号密码，跳出网页让你授权，你都点同意就行，这个自己解决了。

等待几秒，再去刷新刚才的GitHub页面：

你会发现我们的代码提交上去了！

# 部署GitHub Pages

在页面里找到Settings选项点击它：

往下滑，有一个Github Pages选项：

我们需要把None改为下图所示：

他会自动刷新，刷新过后，再去看：

你会发现已经出现了一个链接，点击链接：

刚才在本地看到的网页就出现在了GitHub上。

# 常见问题

# 点击链接出现404

可能是浏览器缓存，清清缓存或者换个浏览器

# git提交不上去

可能是git没有设置好，检查一下你的git用户名和邮箱有没有填错，实在不行百度git设置用户名密码。

# 码云版本

码云的流程都差不多，它还是中文的更方便，创建完也有类似的指导，都差不多，它的名字叫Gitee Pages具体的可以百度码云部署静态网站。

编辑

#Linux

上次更新: 2022/08/26, 15:52:02

← Ubuntu18.04部署django3.x 部署node服务到阿里云→