VSC4T Blog Deploy Guide | VSC4T博客部署指南

2023-06-15

VSC4T Deployment Guide | VSC4T 部署指南

This article provides a complete deployment process for Hexo blogs using the VSC4T theme, helping you successfully publish your blog to the internet.

本文提供使用VSC4T主题的Hexo博客完整部署流程，帮助你顺利将博客发布到互联网。

Prerequisites | 前置准备

Before starting deployment, please ensure:

在开始部署前，请确保：

  1. You have completed the basic configuration of your Hexo blog
    已完成Hexo博客基本配置
  2. You have correctly installed and configured the VSC4T theme
    已正确安装并配置VSC4T主题
  3. You have installed the necessary deployment plugin:
    已安装必要的部署插件：
1
npm install hexo-deployer-git --save

Essential Configuration | 必要的配置

To ensure the theme deploys correctly, set the following in your Hexo site’s _config.yml:

为了确保主题正确部署，在Hexo站点的_config.yml中设置：

1
relative_link: true

Without enabling relative links, the theme may not work properly.

如不启用相对链接，主题可能无法正常工作。

Create Required Pages | 确保创建必要页面

The VSC4T theme requires the following pages. Please make sure they are created:

VSC4T主题需要以下页面，请确保已创建：

  1. Categories page | 分类页面：
1
hexo new page categories

Then edit source/categories/index.md and add:
然后编辑source/categories/index.md并添加：

1
2
3
4
---
title: categories
layout: categories
---
  1. Tags page | 标签页面：
1
hexo new page tags

Then edit source/tags/index.md and add:
然后编辑source/tags/index.md并添加：

1
2
3
4
---
title: tags
layout: tags
---
  1. About page | 关于页面：
1
hexo new page about

And add your personal information to source/about/index.md
并在source/about/index.md中添加个人信息

  1. Search page | 搜索页面：
1
hexo new page search

Then edit source/search/index.md and add:
然后编辑source/search/index.md并添加：

1
2
3
4
---
title: search
layout: search
---

Deployment Configuration | 部署配置

Configure deployment information in your site’s _config.yml:

在站点的_config.yml中配置部署信息：

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/yourusername/your-repo-name.git
  branch: gh-pages  # or master, main
  token: Gh_token

For GitHub Pages personal sites (username.github.io), use:

对于GitHub Pages个人站点（username.github.io），使用：

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/yourusername/yourusername.github.io.git
  branch: master  # or main
  token: Gh_token

URL and Root Directory Configuration | URL和根目录配置

Ensure the URL and root directory are correctly set in your site’s _config.yml:

确保在站点的_config.yml中正确设置URL和根目录：

1
2
3
4
5
6
7
# For project sites | 对于项目站点
url: https://yourusername.github.io/your-repo-name
root: /your-repo-name/

# For personal sites | 对于个人站点
url: https://yourusername.github.io
root: /

Deployment Steps | 部署步骤

  1. Clean cache files | 清理缓存文件：
1
hexo clean
  1. Generate static files | 生成静态文件：
1
hexo generate

Or use the shorthand | 或简写为：

1
hexo g
  1. Deploy to remote repository | 部署到远程仓库：
1
hexo deploy

Or use the shorthand | 或简写为：

1
hexo d

The most commonly used combined command is | 最常用的组合命令是：

1
hexo clean && hexo g && hexo d

Troubleshooting Common Issues | 常见问题解决

ERROR Deployer not found: git | 错误：Deployer not found: git

If you encounter the error ERROR Deployer not found: git, please install the git deployment plugin:

如果遇到ERROR Deployer not found: git错误，请安装git部署插件：

1
npm install hexo-deployer-git --save

Resource Path Issues | 资源路径问题

If resources (images, CSS, JS, etc.) cannot load properly:

如果资源（图片、CSS、JS等）无法正常加载：

  1. Check the relative_link setting in _config.yml
    检查_config.yml中的relative_link设置
  2. Use forward slashes / instead of backslashes \ as path separators
    使用正斜杠/而非反斜杠\作为路径分隔符
  3. Check if the root directory root configuration in _config.yml is correct
    检查_config.yml中的根目录root配置是否正确

Blank Page After Deployment | 部署后页面空白

  1. Check if there are 404 errors in the browser console
    检查浏览器控制台是否有404错误
  2. Check the URL and root directory configuration in _config.yml
    检查_config.yml中的URL和根目录配置
  3. Try cleaning the cache and regenerating and redeploying
    尝试清理缓存后重新生成和部署

Security Notes | 安全注意事项

Important: Never include sensitive keys or tokens in public configuration files. Use environment variables or GitHub Actions secrets for managing sensitive information.

重要： 切勿在公开的配置文件中包含敏感密钥或令牌。使用环境变量或GitHub Actions密钥进行敏感信息的管理。

For situations requiring tokens for deployment, it is recommended to:

对于需要使用令牌进行部署的情况，建议：

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/yourusername/your-repo-name.git
  branch: gh-pages
  token: GH_TOKEN

Where GH_TOKEN is a GitHub personal access token

其中GH_TOKEN是GitHub个人访问令牌。

Conclusion | 结语

Properly configuring and deploying your Hexo blog with the VSC4T theme will give you an elegant, responsive blog experience. For more questions, please refer to the GitHub repository or submit an issue.

正确配置和部署VSC4T主题的Hexo博客，可以获得优雅、响应式的博客体验。如有更多疑问，请参考GitHub仓库或提交issue。