hexo-theme-webstack 网址导航搭建

👉 Hexo 文档

👉 webstack官方文档

👉本项目Demo

前言

安装Hexo前需要安装Node.js、Git、Hexo，请查看相应的文档

1
2
3
4
5
6
7
8
9
10
# 安装hexo（管理员模式）
npm install -g hexo-cli

# 创建项目文件夹navigation
mkdir navigation
# 进入文件夹
cd navigation

# 初始化hexo
hexo init

安装hexo-deployer-git插件

1
npm install hexo-deployer-git --save

下载theme-webstack

hexo >= 4.0

1
git clone https://github.com/HCLonely/hexo-theme-webstack themes/webstack

hexo >= 5.0

1
npm install hexo-theme-webstack -S

配置

hexo >= 4.0

将themes/webstack/目录内的_config.example.yml文件复制到根目录/source/_data/目录内，并重命名为webstack.yml

hexo >= 5.0

  • 如果是新安装本主题，安装完成后会在根目录生成一个_config.webstack.yml文件，直接编辑_config.webstack.yml文件进行配置即可。
  • 如果是主题升级，可以使用 hexo >= 4.0 的配置方法，也可以将原来的配置文件移动到根目录，并重命名为_config.webstack.yml.

注意：博客根目录/_config.webstack.yml和博客根目录/source/_data/webstack.yml请只保留一个！

project/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
+ url: https://username.github.io/project

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
+ theme: webstack

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
+  type: git
+  repo: <RepoGit>
+  branch: gh-pages
# 2020年10月后github<BranchName>默认为main

运行

1
2
3
hexo clean  #清空缓存
hexo g		#部署代码
hexo s		#预览效果

开启github页面

进入 GitHub 刚建的仓库

👉 点击Settings👉 点击左侧栏Pages

👉 点击Source 👉 选择默认代码分支master或main和默认的/(root)

👉 点击Save。

版本控制

将网址导航的源码上传至项目仓库下的Source分支。

备份项目代码目的是：

  • 魔改失败时可以拉取上一次提交的代码到本地。
  • 在外地没带自己电脑情况下，可以用其它电脑操作。
  • 具体操作：在下的Git Bash中输入
1
2
3
4
5
6
7
8
9
git init  #初始化
git add .  #上传所有文件
git commit -m "<Custom>"  #提交时的注释，例如："update"
git remote add origin <RepoGit>  #连接你仓库的Git地址，使Git Bash知道代码要上传至哪个仓库
git branch -M <BranchName>  #将默认master分支名改为你自己设置的
#若第一次提交要加上"-u"，如下，这里推荐分支名为"source"
git push -u origin <BranchName>
#若提交失败，显示：error: failed to push some refs to，则加上"-f"来强制提交
git push [-u] origin <BranchName> -f

部署

1
2
hexo clean
hexo g && hexo d

项目页面

如果你希望网站部署在 <你的 GitHub 用户名>.github.io 的子目录中：

  1. 开启你在 GitHub 的储存库，并前往 Settings 页面。更改你的 Repository name 使你的博客网址变成 **username.github.io/*repository**，repository* 可以是任何名称，例如 blog 或 _hexo_。
  2. 编辑你的 _config.yml，将 url: 更改为 **https://*username*.github.io/*repository***。
  3. Commit 并 push 到默认分支上。
  4. 当部署完成后，在 gh-pages 分支可以找到生成的网页。
  5. 在 GitHub 储存库中，前往 Settings > Pages > Branch，改为 gh-pagesbranch ， 并将文件夹选择/(root) 后储存。
  6. 前往 username.github.io/repository 查看。