博客的搭建与部署

# 快速搭建步骤 新

• fork源码： 从 Github 上fork我的博客源代码或者主题源代码，仓库(repository)名就叫<你的github账号名>.github.io
• 为Github Actions配置TOKEN： 在用户的Settings->Developer settings中新建一个Personal access tokens，名字叫ACCESS_TOKEN，权限选择repo就行。然后在fork后的仓库的Settings->secrets中新建一个名为ACCESS_TOKEN的secret，将之前获得的 TOKEN 复制上去
• 新建静态页面分支： 仓库首页新建分支(branch)gh-pages，然后点击仓库的Settings->Pages，选择gh-pages作为资源
• 修改源码： 进入fork后的仓库,将网址中的github.com修改为github.dev，就能进入代码的编辑界面，修改代码后点击左边的git提交就行，Github Actions会自动部署。之后进入网址https://<你的github账号名>.github.io就是你的博客了
• 更改giscus配置： 别忘了把评论功能giscus相关的配置修改成自己的，到giscus官网中按照流程配置一下，会获得一段<script>代码，然后复制到源代码的相应位置即可

# 完整搭建步骤 旧

每完成一步就去掉一个标签吧~

# 博客源代码

可以从 Github 上下载我的博客源代码。

# VSCode

VSCode 是一个我用的比较顺手的编辑器。

# Node.js

怎么少得了 Node.js 语言呢？

请在安装后检查有无npm命令，若没有则需要将nodejs/路径添加到环境变量中。

# Github 账号和仓库

部署要用到 Github pages 或 Vercel ，我们将代码文件放在 Github 上。因此需要创建一个账号，并新建一个项目仓库(repositories)用来存储项目文件，名字建议为<USERNAME>.github.io，<USERNAME>为你的 Github 用户名，这样能免去设置Base的麻烦。

# Git

要将文件上传到 Github ，需要用到 Git 版本控制工具。

# 配置用户名和邮箱

打开 Git 文件夹下的 Git Bash ，配置用户名和邮箱

git config --global user.name "your username"
git config --global user.email "your email"

检查终端有无git命令，若没有则需要将Git/bin/路径添加到环境变量中。

# 配置 SSH key

第一次使用 Git 需要配置SSH密钥，来获得读取远程仓库的权限，详细的方法可以参考官网提供的生成SSH密钥教程。

依然打开 Git Bash ，输入命令

ssh-keygen -t rsa -C "youremail@example.com"

一直回车，使用默认路径即可。

之后在C:\Users\主机名\.ssh路径下会有id_rsa和id_rsa.pub两个文件。

到 Github 账号的Settings->SSH and GPG keys里找到SSH keys，新建一个SSH key，将id_rsa.pub文件里的内容复制进去便可。

# Github Desktop

GitHub Desktop 是一个可以与 GitHub 交互的应用程序，可以在官网中下载。

具体的使用方法可以参考GitHub Desktop 文档。如果Github上有仓库，就克隆远程仓库到本地；如果没有的话也可以在 Github Desktop 中直接创建。文档中都有详细的介绍。

提交更新

要提交代码的更新到远程仓库，首先需要点击左下角的 commit 按钮

然后点击上面的 push ，即可提交更新。由于 Github 访问速度过慢，可能会超时报错，多试几次即可，或者用 VPN 加速。

# 试着编译源代码

所需要的环境配置完了，接下来试着编译源代码吧~

# Yarn

yarn和npm一样，都是包管理工具。用npm来全局安装yarn

npm install -g yarn

之后运行yarn install的时候，可能会出现在此系统上禁止运行此脚本的报错。所以用管理员身份打开PowerShell，使用命令更改计算机的执行策略

set-ExecutionPolicy RemoteSigned

然后输入Y表示是。设置完之后可以通过get-ExecutionPolicy命令查看执行策略是否为RemoteSigned。

接下来就是安装依赖了

yarn install

成功后会出现node_modules文件夹。

# 编译

yarn run dev

OK，编译成功了，点进网址看看效果~

# 网站的部署

有了初步的网站，就可以部署了。

部署之后别人可以直接通过网址访问，或者在搜索引擎中搜索关键字访问。

虽然部署是一件麻烦事，但由于只是静态网页，因此选择部署在 Github pages 或 vercel 上，能省下不少步骤。

# Github pages 部署

在部署之前，我们需要创建一个 gh-pages 分支，之后将打包以后的静态文件放在 gh-pages 分支中。

然后在项目文件夹下新建文件deploy.sh作为打包命令的脚本，代码如下：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'c01day.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master:gh-pages

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
            
cd -

sh deploy.sh

gh-pages代码上传完之后，点击项目的Settings->Pages，选择gh-pages作为资源

然后就会出现网址

当然，上面的命令是将静态文件提交到gh-pages分支上，也别忘了将代码更新提交到主分支main上。

# Vercel 部署

由于在 Github pages 上部署的网页不能被百度蜘蛛爬取到，因此我们迁移到 Vercel 。当然，要是不怎么在乎百度是否收录，可以跳过此节。

# 更改 dest

之前打包的路径为docs/.vuepress/dist，由于 Vercel 上部署项目的Preview Branches会在分支中打包并寻找public文件，因此需要在config.js中设置 dest ，将打包文件路径改为public：

// .vuepress/config.js
module.exports = {
  dest: 'public',
}

并将之前deploy.sh中的cd docs/.vuepress/dist改为

# deploy.sh
# 原来是 cd docs/.vuepress/dist
cd public

然后将之前docs/.vuepress/dist路径下的文件删除，并尝试build一次。

# 导入项目

首先在vercel官网注册账号。之后创建一个项目，导入 Github 上的仓库，步骤默认即可。

不论有没有部署成功，先跳到下一步把Production Branch改了。

# 更改Production Branch

我们需要将Production Branch更改为gh-pages分支，让main分支作为Preview Branches。

其实就和之前 Github pages 的部署一样，将gh-pages分支的静态文件作为网页源代码。

步骤很简单，到项目的Settings->Git，找到Production Branch，把分支从main改为gh-pages就行。

之后任意提交一次更新到gh-pages分支上，Vercel 就会自动部署了，可以点击查看部署的网站。

# 自定义域名

要自定义域名，首先需要买一个域名，服务商随意，我用的是阿里云。之后实名认证等步骤不再赘述。

# Github pages 自定义域名

# 配置域名解析

转到域名服务商后台的域名解析，添加如下两条记录：

# 配置 CNAME

首先在<USERNAME>.github.io仓库首页新建一个文件CNAME（如果项目在其他仓库，也是在<USERNAME>.github.io仓库中配置域名），内容为你的域名，例如

c01day.com

并将deploy.sh文件中的以下内容去掉注释，同样换为自己的域名

# 如果是发布到自定义域名
# echo 'c01day.com' > CNAME

之后在仓库中的Settings->Pages下，可以看到Custom domain会变为自己的域名。

在上面会出现网址，为https://www.XXX.com/，例如https://www.c01day.com/。

# 如果是自定义仓库应该怎么做

以上所提到的仓库默认为<USERNAME>.github.io，如果项目在其他自定义仓库中，请看下面提示（以仓库名blog为例）

// .vuepress/config.js
module.exports = {
  base: "/<REPO>/",
  // 例如 base: "/blog/",
}

<img :src="$withBase('/XXX.png')"/>

之后，到自定义仓库的Settings->Pages中可以看到，部署的网址为https://www.XXX.com/<REPO>/，例如https://www.c01day.com/blog/。

# Vercel 自定义域名

在 Vercel 刚刚部署项目的Settings->Domains中，添加自己的域名

按照给的提示，添加两条解析

然后就配置完成了，并且签发了证书

# 如何让百度和Google搜索到？

# 生成站点地图 sitemap

站点地图sitemap.xml是为了让蜘蛛更好地爬取到我们的网页。我们需要安装生成站点地图的插件

npm install vuepress-plugin-sitemap

然后在plugins中导入

// .vuepress/config.js
module.exports = {
  plugins: {
    'sitemap': {
      hostname: 'https://www.c01day.com/' //为你的自定义域名
    }
  }
}

之后每次build后都会在静态资源文件夹中生成sitemap.xml文件，用来上传到百度站长和 Google Search Console 。

# 百度站长

登录百度站长，添加自己的网址，会有三种方式验证你对网站的所属权，下面都有具体的操作步骤

验证完后提交自己的sitemap.xml，例如

# Google Search Console

同样，到Google Search Console中添加网址

我一般选择右边的。

同样，有几种方式验证所属权

之后同样提交站点地图就行。

可以选择请求编入索引

网站收录后会变成这样

OK，现在所有的都已经讲完了，可能有很多细节没有涉及到，也可能有很多错误和不完善的地方，我也正在尝试着去解决。😇

顺带一提，百度收录得是真的慢诶🙃

# 后续

# Vssue登录会跳到网站首页

应该是.md文件名中有中文/特殊字符的原因，导致地址解析不正确，会重定向到Authorization callback URL，也就是在OAuth Apps里配置的首页。

# lastUpdated 不会实时更新

// blog/.vuepress/config.js
module.exports = {
  plugins:[
    [
      '@vuepress/last-updated', 
      {
        transformer: (timestamp, lang) => {
          const moment = require("moment");
          moment.locale(lang);
          return moment(timestamp).fromNow();
        }
      }
    ],
  ]
}

虽然会显示上次更新于几天前，但不论过多久还是显示同样的内容。

源代码的lastUpdated是放在computed里的，据 vue 官网上的解释，Date日期之类的不是响应式依赖，计算属性将不再更新。于是我试着将lastUpdated放在mounted里，发现还是不行。

没办法，还是用回moment(timestamp).format("YYYY-MM-DD HH:mm");吧🙃

# 配置首页的标签页标题

标签页标题就是浏览器最上面的文字，在主页的时候显示的是Posts，我想改为Home。询问了作者大佬后，找到了解决方法：

在packages/theme-gungnir/index.js中@vuepress/plugin-blog的如下部分添加title: "Home"便可🤗

# Github Actions 自动部署

心血来潮，先试试好不好用~

这段 action （由vuepress官方提供）的功能是在我 push 到 main 分支的时候自动 build ，然后将打包后的静态文件上传到 gh-pages 分支上。

首先在用户的Settings->Developer settings中新建一个Personal access tokens，名字叫ACCESS_TOKEN，权限选择repo就行。

然后在要自动部署的仓库的Settings->secrets中新建一个名为ACCESS_TOKEN的secret，将之前获得的 TOKEN 复制上去。

# .github\workflows\deploy.yml
name: build and deploy

on:
  # 每当 push 到 main 分支时触发部署
  push:
    branches: [main]
  # 手动触发部署
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          # “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
          fetch-depth: 0

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          # 选择要使用的 node 版本
          node-version: "14"

      # 缓存 node_modules
      - name: Cache dependencies
        uses: actions/cache@v2
        id: yarn-cache
        with:
          path: |
            **/node_modules
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      # 如果缓存没有命中，安装依赖
      - name: Install dependencies
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn --frozen-lockfile

      # 运行构建脚本
      - name: Build VuePress site
        run: yarn build

      # 查看 workflow 的文档来获取更多信息
      # @see https://github.com/JamesIves/github-pages-deploy-action
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          # 部署到 gh-pages 分支
          BRANCH: gh-pages
          # 部署目录为 VuePress 的输出目录
          FOLDER: public

# giscus评论

到giscus官网中按照流程配置一下，会获得一段<script>代码，然后复制到相应位置即可。

目前没解决的问题：

• 响应式（评论随着文章切换）
• 深色主题（主题切换后评论区还是白色）