网站搭建(快速上手不讲原理版)
前期配置
域名购买:
- 如:阿里云
(输入想要的域名,未被占用购买即可)- 我的网站 蓝色冥渊
- 其他获取域名的网站:
- 此时购买完的网站没有内容,为404状态,内容需要在通过
服务器
呈现,所以需要部署服务器
服务器:
- 如:使用 GitHub
仓库
部署服务器
(注册GitHub,创建仓库)- 我的GitHub 仓库 Heijingmei
- 还可以使用gitlab等
- (一般没有人在github上直接修改文件,一些好用的模版和代码功能也在本地操作,所以网站内容一般需要在本地搭建,再上传到git。这时需要建立与本地的双向链接)
本地环境:
- 在一个不会移动的地方,创建一个文件夹,创建好这个文件夹就不要有任何修改操作(移动、重命名等)了。
BlaueHoelle #自己起名
最好起英文名称,避免不必要的麻烦
博客类网页模版:
* 此处例举一个本地的模版vuepress-theme-hope(安装及操作见下)
+ 该模版的优势是可以直接用`md`文件构筑成一个网页,习惯用`md`记笔记的小伙伴们有福了
+ 模版介绍:[https://theme-hope.vuejs.press/](https://theme-hope.vuejs.press/)
这个介绍网站本身也是该模版搭建的,大家可以看看自己喜不喜欢这种 + 这步先不要输入(下面一步一步会讲怎么做)
pnpm create vuepress-theme-hope “自己命名文件夹” #自己起名
* 我比较推荐的另一个模版 [https://zyyo.net/](https://zyyo.net/)
+ 该模版的优势是可以直接用`php`文件构造网页
- 以上模版都是开源项目(补充付费内容作者会说明)
- 头铁的伙计可以不用模版,新建`html`页面从零开始搭建
本地构筑网站内容
搭建本地
环境
使用当前文件夹作为 Git 仓库,打开当前文件夹路径的 terminal ![IMAGE 2024-11-17 23:49:42](./note1.assets/IMAGE 2024-11-17 23:49:42.jpg)
检查当前目录(可不做)
pwd
:::tips pwd 获取当前在路径
:::
以vuepress-theme-hope模版为例,搭建环境
``检查npm,如果没有,安装npm
npm
没有就不会显示内容
install npm
检查pnpm,安装pnpm
pnpm
npm install pnpm
npm install -g pnpm #如果前面不行就尝试该代码
![](./note1.assets/IMAGE 2024-11-17 23:50:23.jpg)
创建网站的本地
内容(文件与文件夹)
pnpm create vuepress-theme-hope “自己命名文件夹”
模版名称
vuepress-theme-hope
![注:description用于网站介绍,一般在搜索引擎的页面详情描述可以看到](./note1.assets/IMAGE 2024-11-17 23:50:55.jpg)
- 是否选项除多语言按需选择外,其他全选yes
- 选择网站类型:博客(
blog
)
在../src/public
下创建CNAME
搭建本地
和仓库
的双向链接
创建本地密钥
(这一步可以在文件夹的路径的termial继续进行;也可以直接打开termial,也就是在根目录的termial进行)
- 就算在当前路径进行,按部就班使用以下操作,生成的密钥文件也在根目录中 (~/ 代表根目录)
ssh-keygen -t rsa -C "这里换上你的邮箱"
邮箱要和github相同,不然无法匹配
或者(更推荐这种):
如果不想固定命名为rsa
,可以使用以下代码(使用rsa
只能产生一组密钥,而使用以下代码因为可以有不同的命名,所以可以产生多个密钥)
ssh-keygen -t rsa -f ~/.ssh/id_rsaxxx -C "这里换上你的邮箱"
命名方式为
id_rsaxx
可以用_
“下划线” 加其他内容的格式
换上的邮箱要和github登陆邮箱相同
实例
ssh-keygen -t rsa -f ~/.ssh/id_rsa_1 -C "bh.heijingmei@gmail.com"
以上代码二选一后,terminal提示输入计算机秘码(输入的过程中密码不会显示,正确输入密码后按enter
即可)
![](./note1.assets/IMAGE 2024-11-17 23:51:35.jpg)
:::tips 生成了两个文件id_rsa输入的内容
id_rsa输入内容
.pub
:::
cat “后面的文件”
可以查看密钥
由于网站需要部署在公开仓库,这里查看公共.pub
密钥的内容
cat /目录/.ssh/id_rsa_1.pub
![](./note1.assets/IMAGE 2024-11-17 23:51:47.jpg)
:::tips 最后的内容为个人的邮箱号
:::
- 复制全部密钥内容(直到个人的邮箱号结束!)
密钥返回github匹配
![](./note1.assets/IMAGE 2024-11-17 23:51:58.jpg)
将本地内容上传到github
依次输入以下内容
生成电脑密钥
打开当前文件夹的terminal(比如我的就是blauehoelle
)
![](./note1.assets/IMAGE 2024-11-17 23:52:10.jpg)
方法一
如果你刚刚的
创建本地部署
git init
该命令执行完后会在当前目录生成一个 .git 目录,作为Git仓库的本地部署。
匹配github的用户名和邮箱
git config --global user.name "这里换上你的用户名"
git config --global user.email "这里换上你的邮箱"
注:这里
--global
是全局模式,在一些情况下不适用
![](./note1.assets/IMAGE 2024-11-17 23:52:13.jpg)
- 这个指令可以检查填入的用户名和邮箱:
git config --global --list
(填入github的用户名和邮箱,上面那张图我在填入之前就输入了,所以什么都没有显示)
git add . #jbg(没有部署过git的可以不加)
git commit -m "first commit"
这一步为第一次上传命名,"first commit"将作为更新的分支的名字
git branch -M main #main 为仓库主分支的默认名称
git remote add origin git@github.com:你的用户名/你要部署的仓库.git #origin 为本地推到仓库的默认名称
git push -u origin main
![](./note1.assets/IMAGE 2024-11-17 23:52:19.jpg)
github新建**空白**仓库自带的说明
搭建服务器和域名的双向链接
搭建GitHub控制台和网址之间的对应关系
设置仓库
为控制台(domain)
,在控制台中输入域名网址
(www.xxx.xx
输入www后的内容即可)
![](./note1.assets/IMAGE 2024-11-17 23:52:22.jpg)
:::tips 成功匹配控制台和网址,会在GitHub
文件中生成CNAME文件
:::
对应GitHub
的和本地
的CNAME文件
在../src/public
下创建CNAME,与GitHub
文件形成对应(GitHub和本地内容不能同时修改,)
![](./note1.assets/IMAGE 2024-11-17 23:52:27.jpg)
![本地CNAME文件中输入同样的网址名](./note1.assets/IMAGE 2024-11-17 23:52:33.jpg)
在域名中设置解析来源(记录值) 匹配该控制台(双向匹配成功才可以上线网站)
:::tips 记录类型依然为CNAME
:::
上线成功