跳至主要內容

静态网站搭建笔记

yhy72819原创2025/8/12...大约 15 分钟网站教程note

主题官方文档：vuepress

主题官网主页：主页

1. 进入服务终端

1. 文件夹新建 command+shift+n
2. snipaste截图option+1，取消esc
3. 在文件上右键点服务再点N I2 tab here进入终端

2. 命令解释

2. pwd：查询该文件的路径  cd：全称 change direction 切换文件路径（由于前置项目可能不是你目标文件项目，直接输入指令会定位到前置项目上，这时就可用cd来切换到目标文件，注意要从父文件夹上一级一级选下来，否则会找不到） 注意：warn是警告，无需注意，需要注意的是error

3. 选项

Snipaste_2025-07-22_21-58-45.png
Snipaste_2025-07-22_21-58-45.png

4. Care

1. 如何使用以及查看官方文档进行操作
2. 各个工具的使用； （在终端直接输入以下代码下载）

brew install “软件名”
3. 整个网站项目的逻辑要建立起来；（各个软件、各个部分分别是做什么的…..） 
4. 提问

5. Not Care

5. 不去深度探究原理、技术

6. 本地项目初始化：

pnpm create vuepress-theme-hope my-docs

7. 本地项目运行

  1. 使用终端进到网站路径下：鼠标右键-->服务-->new item to Tab here
img
img
  1. 使用如下启动本地服务器
 pnpm run docs:dev
img
img
  1. 浏览器访问方式:

方法一：Command+鼠标点击，直接激活默认浏览器访问

方法二：鼠标选中链接并复制，粘贴到浏览器地址框中回车即可访问

  1. 本地服务关闭：Control+c进行退出

a. 当网站遇到未知问题时，首选停止并重新启动进行尝试

b. 还有一种是真的有问题，重启也没用，就开始排查

8. Github仓库创建与部署

8.1. Github创建服务器仓库

  1. 访问Github

img
img
img
img

8.2. 把网站推送到Github仓库：

  1. 切换至SSH：使用SSH可直接使用SSH密钥，如用Https，则每次对仓库操作，都需要输入账号和密码进行验证，因此为了便捷就用SSH
img
img
  1. 按照给出的命令执行，但是有些要修改（要修改并执行在本地，并非在网页上修改，网页只是提供模版给你看）
img
img
git init #初始化本地仓库（init即为inition的简写）
git add . #进行提交登记，“."代表添加路径下所有文件，文件夹（要将默认的readme.md改成.)
git commit -m "本次提交的信息｜本次做出的修改信息"#上一步登记完成后，这一步进行提交审核
git branch -M main #指定分支为“main”(main就是自动选主要文件，一般不用改main）
git remote add origin git@账户仓库网址如上（无网址前缀） #设定数据要推送的目标仓库（地址）
git push -u origin main #开始推送/地址为“main”分支
img
img

echo是指在无该文件夹的时候自动创建文件夹，但若已经有该文件夹，则删除该段代码

8.3 开始推送

  1. 启动终端，路径在网站路径下；
img
img
  1. 开始执行命令
img
img
img
img
  1. 刷新Github界面，会发现所有文件已经上传成功(注意，上传的时候一个仓库对应一个文件夹，建新仓库的时候一定要建新文件夹）
img
img

8.4 设置部署（设置部署后，公网即可访问网站）

  1. 点击设置settings：
image.png
image.png
  1. 点击Pages：
img
img
  1. 开始部署
img
img
  1. 检查部署是否成功（框内的是对勾就成功）
img
img

9. VScode项目

注：每一次修改都要提交，提交完后进入github看修改部署是否成功，如成功就再用公网域名进入自己网站检验（不能用本地，因为本地无需部署即可修改）

9.1：VScode打开项目：

方法1:

    1. 打开VScode软件
    2. File-->Open Folder-->选择网站文件夹

9.2：VScode提交项目

    1. VScode第三个按钮
    2. 打一条message（仅做说明，可随意写）
    3. 点击commit![](https://cdn.nlark.com/yuque/0/2025/png/58919770/1753620274300-fde320e3-50a0-4562-bc7a-58275289e1d3.png)
    4. 点击：Sync Changes

方法2:

    1. 打开终端，到目标路径（用control+c停止之前的行为）
    2. 输入："code ."(进入VScode）
    3. 后面同方法1

10.设置专属域名

  1. 购买域名：
  2. 登录阿里云设置域名解析，解析到Github提供的默认域名img
img
img
img
img
img
img

此时www即为网站前缀但要注意，一定要在此之后再添加记录改为@以此允许不输前缀只输域名即可访问的情况

img
img
     3.设置域名的目的：

    1. 通过本地链接进入最多只能使共用同一wifi的人进入
    2. 用github配发网站登陆在国内难以进入，因为github基本在国内禁止（虽然有些时候可以不通过任何手段直接进入）
    3. 购买国内阿里云的域名后，域名解析直接来到国内，可借此无障碍访问自己在github上的网站
    4. 公网ip过于繁琐，无法记忆

     4.github的网站项目也需要进行绑定：

    1. 原因：需要让github知道这个解析是被允许的
    2. 方法：打开VScode，在左侧目录的src文件下选择vuepress，在此文件下选择public，在public文件夹下新建CNAME文件并在此文件下输入网站域名（公网网站），即可成功![](https://cdn.nlark.com/yuque/0/2025/png/58919770/1753619651218-501d8066-7eab-4426-9b38-46cb11d936dd.png)

11. 修改网站主页信息

11.1：修改主页名称以及slogan

  1. 路径：src/README.md

title:博客主页 #修改成自己想要的名称

heroImage:

heroText：博客名称 #自己的博客名

  1. 修改口号:tagline:你可以在这里放置你的口号和标语
  2. 修改背景图片（参考网站）代码如下
#图片添加（在readme头部添加）
bgImage: /存放图片文件夹/文件名加后缀

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

  1. 注意事项

    1. 头部信息需在冒号后加空格，否则会引发错误；
    2. 在网站的所有配置当中，“/”开始就代表文件夹“public”(但如果是通过链接形式进入的话，/则表示链接，与public无关，要从src以下开始输入路径，src不用，但巧合的是，这两个方式的搜索途径是一样的，容易混淆）
    3. VScode忘打message如何拯救
      1. 方法一：在弹出的界面中，输入message（不要在井号后输入，井号后文字是注释，无实际意义）-->Command+S保存后-->关掉，再次点击按钮进行推送
      2. 方法二：直接关掉弹出的文件界面，并重新操作提交流程
    image.png
    image.png
    1. 修改logo
      1. 设计自己喜欢的logo
      2. 图片放入：src/.vuepress/public/自己新建图片文件夹
heroImage: /photos/photo2.png
    3. 建议：图片配置要见名知意，有利于后期优化改进
    4. logo按照当前网站情况来看：圆形会更合适；
    5. 也可以在AI生成后，自行采用工具裁切

11.2 去掉主页项目框

image.png
image.png

11.3 更换作者头像与昵称，说明

path：src/.vuepress/theme.ts

 blog: {
    name: "你的名字",//昵称
    description: "一个前端开发者", //说明
    avatar: "/头像名.jpg", //头像(注意头像名前要加路径，/表示public
    intro: "/intro.html",
    ...
}

11.4 修改社交平台的链接

Path：src/.vuepress/theme.ts

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

medias: {
      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",

注意：以图片中二维码为链接的直接用图片部署形式填写入双引号内,同时，任何图片部署入public都可按指定路径在原域名后输入作为链接访问image.png

image.png
image.png

11.5 菜单栏修改

image.png
image.png
image.png
image.png
                                                  注意：

1. 此处的括号关系一定要清楚，
2. 逗号是机械语言中的间隔，任何代码串末尾一定要加逗号（最后一串除外，可加可不加）
3. 初始可能会有含有“demo”的这一行代码，这是系统自带的菜单栏，删除此行代码即可删除自带菜单栏
4. 以下为菜单栏所在的文件
5. link和children是必有其一的，但也可以都有
image.png
image.png

另：有关文章变pdf的方法，可右键点击打印

image.png
image.png
image.png
image.png

11.6 sidebar的妙法

对于sidebar，我们无需如navbar一样一个一个输，可用如下图格式直接令其自动生成（structure即为自动生成的指令）

image.png
image.png

12.增加网页评论

12.1:LeanCloud设置（数据库）

  1. 工具链接：

快速上手

  1. 注册LC
  2. 登陆或注册LeanCloud国际版并进入控制台
  3. 点击左上角创建应用并起名，使用免费的开发版（详情请见a链接中的教程）
image.png
image.png
  1. 注册后点击应用，选择设置中的应用凭证
image.png
image.png

12.2：Vercel部署（服务端)

  1. 利用上述工具进入Vercel
  2. 进入后用github快速绑定Vercel
image.png
image.png
  1. 绑定成功后
image.png
image.png

  1. 点击continue to dashboard即可开始

  2. 点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。img

  3. 完成后右下角会弹出验证框，全部点进行验证即可开始验证

  4. 检查是否成功点击上方deployment观看，ready即为成功

    image.png
    image.png

  5. 注意：当我们进入自己的Vercel账号时，为本体账号，应进入自己的项目中进行配置

    image.png
    image.png

    进入后再进入settings才能正常部署，而直接在个人页面进入Settings则无法正常部署

    1. 如果想要更活泼的评论，在输入comment: true的附近添加一行reaction：true
    reaction: true

    即可出现如下效果

    image.png
    image.png

    12.3 自定义域名

    注意，不能直接在vercel的Settings中的Domins设置自己的主域名，原因：主域名第一次出现在Github部署成功后，是为了在国内更方便解析，而主域名已经被使用于承载网站本身，故而不能配置在评论系统之中，因为一个域名只能用一次

    解决方法：使用二级域名,如comment.example.com就是example.com的二级域名，其中comment也就是域名前缀，其地位等同于www，同时，任何两个域名的联系是要双向绑定的，因为双向绑定才会使双方获得互相权限，因此，我们不仅应在vercel上部署主域名，还应在阿里云（你购买主域名的网站）部署vercel域名

    在此之后，用VScode将评论区上传至网站，具体如下

    image.png
    image.png
    image.png
    image.png

    12.4使文章下方出现评论区

    先输入如下代码到本地终端

    pnpm add -D @waline/client

    以安装插件waline，安装好之后，VScode会自动出现部署提示，部署完成后进行以下操作

    在src路径下的文章文件中任意行加入以下代码即可开启

    comment：true

    也可以直接在theme.ts行中加上如上代码直接为所有文章开启评论区

    13. 更多快捷键

    command+Z撤回

    command+S保存

    command+F检索

    command+/备注与取消备注

    control+C停止运行

    14. 图标修改

    vuepress系统支持如下三种图标：

    iconify

    fontawesome

    iconfont（icon即是图标的意思）

    我们拿fontawesome举例，以下为链接

    img
    img
    img
    img

    Font Awesome

    The internet’s icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

    Font Awesome

    进入后，点击搜索栏，根据自己需求用英文搜索图标

    image.png
    image.png

    Pro是付费款，选择不付费的，并点击

    image.png
    image.png

    于Vscode的icon一行（分别在navbar和readme中）粘贴，并删掉非如上图绿色部分内容，如：

    image.png
    image.png

    保存后部署即可

    注意：部分图标可能不适配，表现为图标在本地和公网都不显示，此时需换一个上传

    同时，ico文件只存在于图标处，不能与已上传图片一样可用路径直接搜索到图片的网址观看图片，因此，ico文件是无链接形式的，通过链接无法搜索到该图标

    15. 搜索功能

    进入vuepress后点击指南中的功能，再点击其中的搜索

    image.png
    image.png
    1. 用上图第一步的代码粘贴入自己网站的终端中，即可开始下载，但我们推荐使用最后的plugin-search，即上图显示，其他的要么繁琐要么功能不足

    注意：下载时如果过慢，可以考虑用如下代码行换源

    pnpm config set registry https://registry.npmmirror.com/

    该代码行即为将外网文件换源为内网镜像文件

    1. 在Vscode中部署：找到theme.ts中的plugins，在此后插入此段代码
    image.png
    image.png

    其中maxSuggestions为最大搜索提示量，如下图所示

    image.png
    image.png

    hotkeys为打开搜索的快捷键，这里就不设了

    locales指的是匹配的链接（语言）：

    “/”表示的是默认语言，如果写/en/那就是英文

    placeholder指的是搜索栏中未有文字输入时默认显示的字

    16. 右上角链接及网站本身链接显示修改

    由于我们使用vuepress的模型，最初这些链接全是vuepress自身的链接，我们需完成修改

    方法：Vscode选择theme.ts,对：

    image.png
    image.png

    方框中的内容进行修改即可，注意repo中一定要填入自己网站仓库的链接，不要写成别的了

    至此，框架已全部建成

    17. 文章编写

    注：我们现在需要使用Typora（非常方便）

    1. 打开网站文件夹

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

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

      1. 推荐英文原因：所有文件夹都将会生成链接，如用中文，使用中会导致链接问题
      image.png
      image.png

    4. 文章：后缀：.md ,全英文命名且数字不要用空格或者特殊字符，空格用“-”代替

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

    --- #用于开启文章编写
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
---

    注：用command+/显示或关闭源代码

    也可以用这个链接实时复制

    1. 标题编写：##+空格+1.+空格(#数决定了标题几，不用标题一，见Typora）

    2. 功能性改良

    markdown: {
    figure: true,
    imgLazyload: true,
    imgMark: true,
    imgSize: true,
    mark: true,
    codeTabs: true,
    tabs: true,
    math: true,
    hint: true,
    alert: true,
    chartjs: false,
    echarts: false,
    mermaid: true,
    vuePlayground: false,
    sub: true,
    spoiler: true,
    sup: true,
    tasklist: true,
    include: true,
    attrs: false,
    footnote: true,
    align: true,
    flowchart: false,
    gfm: true,
    preview: true,
    stylize: [
      {
        matcher: "Recommended",
        replacer: ({ tag }) => {
          if (tag === "em")
            return {
              tag: "Badge",
              attrs: { type: "tip" },
              content: "Recommended",
            };
        },
      },
    ],
    vPre: true,
  },

    以上代码在Vscode的theme.ts中修改

    作用：使得以下格式生效：

    ::: preview 演示
内容
:::

    还必须在终端输入

    pnpm add -D katex

    构建数学库完成

    和

    pnpm add -D mermaid
默认页脚
Copyright © 2025 yhy72819