01-静态网站搭建笔记

0. 涉及的链接

• 主题官方文档：https://theme-hope.vuejs.press/zh/

1. 域名购买

1. 域名推荐简短一些，这样便于大众去记忆和访问；
2. 域名购买成功后需要实名认证；

2. 搭建过程中需要 care 的点

• Care：
  • 如何使用以及查看官方文档进行操作；
  • 各个工具的使用；
  • 整个网站项目的逻辑要建立起来；（各个软件、各个部分分别是做什么的…..）
  • 提问；
  • 看看我的笔记是如何规整的，提升自己的笔记整洁程度与逻辑程度；
• Not Care：
  • 不去深度探究原理、技术；

3. 上课加入会议注意点

• 使用 zoom 客户端加入会议；
• 微信自带的不能称为真正的浏览器，如有需要尽可能在谷歌浏览器中操作；

4. 涉及快捷键

• 截图快捷键：Option + 1 进行截图；

5. 命令解释

• pwd：查看命令行当前所在路径；
• cd：修改命令行当前所在路径；

6. 本地项目初始化

1. 本地项目初始化：

   pnpm create vuepress-theme-hope my-docs

2. 本地项目运行

   1. 使用终端进到网站路径下：鼠标右键——>服务——>new item to Tab Here；

      图片

      

   2. 使用如下启动本地服务器：

      pnpm run docs:dev
      图片

      

   3. 浏览器访问方式：

      1. 方法一：Command + 鼠标点击，直接激活默认浏览器访问；
      2. 方法二：鼠标选中链接并复制，粘贴到浏览器地址框中回车（Enter）即可访问；

   4. 本地服务关闭：Control + C 进行退出；

      1. 当网站遇到未知问题时，首选停止并重新启动进行尝试；
      2. 还有一种就是真的有问题，重启也没用。还是老老实实的排查吧哈哈哈哈哈哈哈哈

7. Github 仓库创建&部署

7.1 Github 创建服务器仓库

Step 1：访问 GithubStep 2：创建仓库Step 3：把网站推送到 Github 仓库Step 4：开始推送Step 5：设置部署Step 6：如何查看是否部署成功：

Step 1：访问 Github

访问 Github：https://github.com/

Step 2：创建仓库

Step 3：把网站推送到 Github 仓库

1. 切换到 SSH：我们配置过 SSH 密钥，为什么要使用密钥？——你的账户如果要操作，必须登录。使用用户、密码才能进行操作。而我们想要更便捷的方法，不想要每次都要使用账号密码，所以使用密钥——而密钥则是：SSH；

   如果这里你使用 https，以后每一次对 Github 仓库操作，都需要输入：账号、密码进行验证；

   

2. 按照给出的命令执行，但是有些要修改：

   命令是要在本地电脑终端执行，不是要在 Github 上面执行 or 修改！网页提供的命令，只是一个模版。

   git init  # 初始化本地仓库
   git add .  # 进行提交登记，"点" 代表添加路径下所有文件、文件夹
   git commit -m "本次提交的信息｜本次做出的修改信息"  # 上一步登记完成后，这一步进行提交审核
   git branch -M main  # 指定分支为 main
   git remote add origin git@github.com:yhy72819/yhy72819.github.io.git  # 设定数据要推送的目标仓库（地址）/设定 main 对应的地址
   git push -u origin main  # 到点发车啦～/main 地址

   

Step 4：开始推送

1. 启动终端，路径在网站路径下；

   终端截图

   

2. 开始执行命令：

   git init 
   git add . 
   git commit -m "本次提交的信息｜本次做出的修改信息" 
   git branch -M main  # 指定分支为 main
   git remote add origin git@github.com:yhy72819/yhy72819.github.io.git  # 设定数据要推送的目标仓库（地址）/设定 main 对应的地址
   git push -u origin main  # 到点发车啦～/main 地址

3. 刷新 Github 页面，会发现所有文件已经上传成功；

   

   

Step 5：设置部署

设置部署后，公网即可访问网站；

1. 点击设置 Settings：

   

2. 点击 Pages：

   

3. 开始部署：

   

4. 访问：https://yhy72819.github.io/

   

Step 6：如何查看是否部署成功：

7.2 VScode 打开项目

7.3 VSCode 提交项目

1. VSCode 第三个按钮；
2. 打一条 message；
3. 点击 commit；
4. 点击：Sync Changes；

7.3 设置专属域名

1. 购买域名；
2. 登录阿里云设置域名解析，解析到 GitHub 提供的默认域名；
3. 设置域名的目的：
   1. 直接记忆 Github 分配的域名是不便于记忆的，所以想要更方便的让公众、粉丝记住域名，可以使用自己购买的域名；
   2. 其次因为某些特殊原因，在中国大陆不能很方便的直接访问 Github，这就导致局限了自己的网站受众地域；
   3. 上一个问题，也有一个巧妙的解决方法。政策都是针对普通人的，或者说大企业是不会被政策限制🚫，所以：我们购买国内供应商（阿里云）的域名后，去解析就可以让国内用户访问自己部署在 Github 的网站，为什么呢？——因为，我们设置了域名的解析关系后，阿里云是可以帮你解析到 Github 的，换句话说：阿里云是可以随意访问 Github 的，故而国内域名可以正常访问 Github 部署的网站；
   4. 使用域名另一个好处是：所有服务器的公网 IP 是很长且没有规律的，不可能让你的受众记住你的 IP 地址吧，所以记域名还是比较方便的。比如我们可以很简单的输入域名访问百度，但入如果我让你使用 IP 访问百度，你会显着头大；
4. Github 的网站项目也需要进行绑定：
   1. 为什么需要绑定？你得让 Github 知道这个解析是被你允许的；
   2. 在网站项目中的 src/.vuepress/public/：新建文件：CNAME；
   3. 在 CNAME 中输入自己的域名；

8. 修改网站主页信息

8.1 修改主页名称以及 slogan

• Path：src/README.md

  title: 博客主页  # 修改成自己想要的名称
  heroText: 你博客的名称  # 按自己的需求修改
  图片

  

• 修改口号：

  tagline: 你可以在这里放置你的口号与标语

8.2 修改背景图片

• Path：src/README.md

• 下载喜欢的图片：https://haowallpaper.com/homeView

• 我们可以选择不做，但是我们的审美一定需要在线，要有途径去寻找！

• 图片下载后，放入此路径：src/.vuepress/public/自己新建图片文件夹；

  # 在 README 头部添加
  bgImage: /自己新建图片文件夹/图片名称.png

• 记得提交修改！

8.3 修改 logo

• 设计自己喜欢的 logo；

• 图片放入：src/.vuepress/public/自己新建图片文件夹；

  heroImage: https://theme-hope-assets.vuejs.press/logo.svg

• 建议：

  • 图片命名还是设置“见名知意”，不要太随意，不利于后期优化改进；（其它文件也是如此）
  • logo 按照当前网站情况来看：圆形会更加合适；
  • 也可以在 AI 生成后，自行采用工具裁切；

8.4 去掉主页项目框

• Path：src/README.md；

  projects:
    - icon: folder-open
      name: 项目名称
      desc: 项目详细描述
      link: https://你的项目链接
  
    - icon: link
      name: 链接名称
      desc: 链接详细描述
      link: https://链接地址
  
    - icon: book
      name: 书籍名称
      desc: 书籍详细描述
      link: https://你的书籍链接
  
    - icon: newspaper
      name: 文章名称
      desc: 文章详细描述
      link: https://你的文章链接
  
    - icon: user-group
      name: 伙伴名称
      desc: 伙伴详细介绍
      link: https://你的伙伴链接
  
    - icon: https://theme-hope-assets.vuejs.press/logo.svg
      name: 自定义项目
      desc: 自定义详细介绍
      link: https://你的自定义链接

  直接删除即可！

8.5 更换作者头像与昵称、说明

• Path：src/.vuepress/theme.ts；

  blog: {
      name: "AI悦创",  // 昵称
      description: "一个前端开发者",  // 说明
      avatar: "/aiyc.jpg",  // 头像
      intro: "/intro.html",
      ...
  }

8.6 修改社交平台的链接

• Path：src/.vuepress/theme.ts；

  不需要的可以选择：注释、删除，需要的需要把链接修改成自己的。（注释快捷键：Command + /）

  medias: {
        Baidu: "https://example.com",
        BiliBili: "https://example.com",
        Bitbucket: "https://example.com",
        Dingding: "https://example.com",
        Discord: "https://example.com",
        Dribbble: "https://example.com",
        Email: "mailto:info@example.com",
        Evernote: "https://example.com",
        Facebook: "https://example.com",
        Flipboard: "https://example.com",
        Gitee: "https://example.com",
        GitHub: "https://example.com",
        Gitlab: "https://example.com",
        Gmail: "mailto:info@example.com",
        Instagram: "https://example.com",
        Lark: "https://example.com",
        Lines: "https://example.com",
        Linkedin: "https://example.com",
        Pinterest: "https://example.com",
        Pocket: "https://example.com",
        QQ: "https://example.com",
        Qzone: "https://example.com",
        Reddit: "https://example.com",
        Rss: "https://example.com",
        Steam: "https://example.com",
        Twitter: "https://example.com",
        Wechat: "https://example.com",
        Weibo: "https://example.com",
        Whatsapp: "https://example.com",
        Youtube: "https://example.com",
        Zhihu: "https://example.com",
        VuePressThemeHope: {
          icon: "https://theme-hope-assets.vuejs.press/logo.svg",
          link: "https://theme-hope.vuejs.press",
        },
      },

8.7 网站菜单栏语法

• Path：src/.vuepress/navbar.ts

  如果当前没有链接的话，就先使用：# 代替；

  import { navbar } from "vuepress-theme-hope";
  
  export default navbar([
    "/",
    "/note1.pdf",
    {
      text: "标题",
      icon: "home",
      link: "https://comput.com/note.pdf",
    },
    {
      text: "分组 1",
      icon: "home",
      children: [
        "/",
        { text: "标题", icon: "home", link: "https://comput.com/note.pdf", },
      ]
    }
  
  
  
  
    // {
    //   text: "文章",
    //   icon: "pen-to-square",
    //   prefix: "/posts/",
    //   children: [
    //     {
    //       text: "笔记",
    //       icon: "pen-to-square",
    //       prefix: "apple/",
    //       children: [
    //         { text: "静态网站笔记", icon: "pen-to-square", link: "1" },
    //       ],
    //     }, 
    //   ]
    // }
  ]);

8.8 一些注意事项

1. 头部信息需要在冒号: 之后携带空格，否则会引发错误；（其他配置文件，也要加空格）

2. 在网站的所有配置当中，/ 开始——就代表文件夹 public；

3. VSCode 提交忘记打 Message 时，如何拯救：

   图片

   

   1. 方法一：在弹出的文件界面中，输入 Message——>Command + S 保存后——>关掉（叉掉弹出的文件），再次点击按钮进行推送；
   2. 方法二：直接关掉弹出的文件界面，并重新操作提交流程！
   3. 以为自己理解了，但是永远没有比自己操作来的真实！只有操作后，才能真正自己自己是否掌握。
   4. 学会辨别：中英文符号之间的差异！

9. 增加网站评论

• 使用的开源项目：https://waline.js.org/guide/get-started/

开始操作：

comment: {
      provider: "Waline",
      serverURL: "https://comment.bornforthis.cn/",
      comment: true, // 评论数统计
      pageview: true, // 浏览量统计
      noCopyright: true,
      dark: "auto",
    },

10. 开启评论审查

• https://waline.js.org/guide/features/safety.html#%E8%AF%84%E8%AE%BA%E5%AE%A1%E6%9F%A5
• 你已经会了，省略～

11. 开启图标

12. 搜索功能

• 安装 @vuepress/plugin-search

  pnpm add -D @vuepress/plugin-search@next

• 在主题选项中配置 plugins.search。

11. 文章编写

1. 打开文章本地文件夹；

2. 点击 src 里面的 README.md 文件；

3. src 下面可以新建任何文件夹，随意命名（推荐使用英文且不带空格，如想要间隔使用：-）；

   1. 因为所有的文件夹都将会生成：链接；
   2. 使用中问会导致链接问题；

4. 尝试：文件夹里面创建文件夹，放入文章；

5. 文章：.md ，全英文命名且数字不要用空格或者特殊字符，空格使用 - 代替！

6. 所有文章要以下面的模版开头：

   ---
   title:
   icon: blog
   date: 2025-08-06 21:58:44
   author:
   category:
       - 你的分类1
       - 你的分类2
   tag:
       - 你的标签1
       - 你的标签2
   isOriginal: true
   sticky: false
   star: false
   article: true
   timeline: true
   image: false
   navbar: true
   sidebarIcon: true
   comment: true
   lastUpdated: true
   editLink: true
   backToTop: true
   toc: true
   ---

homework

作业 1：2025 年 7 月 23 日

• 给笔记添加标题；

作业 2：2025 年 7 月 24 日

• 创建一个新 Github 仓库；
• 把链接：https://bornforthis.cn/1v1/100-Leo/01.html 导出 PDF，提交到仓库；

作业 3：2025 年 7 月 27 日

• 还是推荐好好想想自己的 slogan；
• 背景图选择自己喜欢的，可以随便，但不能忽视自己真正喜欢的是什么！这是要话足够的时间去寻找的。

作业 4：2025 年 7 月 28 日

• 自己研究如何压缩图片，现有网站访问慢的原因之一：背景图片大，研究如何压缩。
• https://www.remove.bg/zh
• https://tinify.cn/
• https://www.iloveimg.com/zh-cn/compress-image/compress-jpg

作业 5：2025 年 7 月 29 日

• 设计你的菜单栏；

  

• 可以参考：https://bornforthis.cn/

• 把笔记的 PDF 上传到自己的网站，并把链接发给我。

• 要学会从，新学的知识中提炼出属于自己的结论，不要知识被动学习。（老师教什么，你就学什么。而是老师交了一个例子，你能快速观察出一个结论。）

作业 6：2025 年 7 月 31 日

• 对自己的评论进行自定义域名，教程参考：https://waline.js.org/guide/get-started/#%E7%BB%91%E5%AE%9A%E5%9F%9F%E5%90%8D-%E5%8F%AF%E9%80%89

  • 不能直接设置为：主域名，Why？——主域名：computergreenhand.com 第一次出现在哪里？

  • 第一次出现在：Github 部署成功之后，因：Github 提供的域名不便于记忆，故而采用：阿里云解析！

  • 上面还有，一个原因没有写明，是什么原因需要我们使用阿里云解析域名？回答的非常好！——我希望这个回答，不是记忆！而是理解！

  • 我们设置阿里云解析时，使用的域名方式是什么？

    computergreenhand.com
    www.computergreenhand.com

  • 而你现在设置评论的域名是什么？

    

  • 这个域名的结构已经被使用了，故而不能配置在评论系统当中！

  • 所以，解决方法不就已经自动浮出水面了么？——解析个不一样的域名！

  • 使用二级域名，参考我：comment.bornforthis.cn 的设定，再设定属于自己的！；

  • 设置如下这一步，只是第一步，想想 Github 部署之后，解析域名的流程！

    

  • 和 Github 部署、解析域名流程一致「举一反三」；

  • 配置域名解析，不要单相思哦～（你现在只是配置了 Vercel）

  • 你不一定要成为我，但是你一定要记下我的足迹。

• 设置好自定义域名后，发送链接给我；

• 自定义域名之后，注册一个管理员账号；

作业 6：2025 年 8 月 2 日

• 使你自己的网站文章，可以显示评论区功能；
• 参考主题官方文档；
• 遗留 bug：记得安装评论插件 pnpm add -D @waline/client；
• [ ]

公众号：AI悦创【二维码】