詩頌の博客 - 時不我待，只爭朝夕

💻实用教程
🔹Hexo📝Frontend👾GitHub

搭建Hexo-WebStack网址导航

Post's cover

前言：

看此篇教程前请确保你曾搭建过 hexo 博客，有一定的经验。若是首次建站建议搭配其他博主Hexo 搭建博客教程一起食用，遇到一些基础问题多百度百度。

本教程推荐使用的软件：

markdown 编辑器：Typora。代码编辑器：VSCode。代码管理工具：Git

碎碎念，搭建时的艰辛历程

我开始以为 webstack 可以通过像hexo new page xxx一样简单地直接加到博客导航栏里，但经过半天的实践发现没那么简单，再经过大量搜寻最后发现原来它是一个 Hexo 主题，就是一独立的网站，尽管自己已经看到它的文件名叫hexo-theme-webstack。在此之前我还寻思着，这怎么看也不像一个博客网站的 Theme，更像一个小网页，还消耗了我几天的时间去找搭建教程。首先我想吐槽，网上关于 WebStack 的教程本来就很少，而且 WebStack 它还有很多框架版本（本网址导航是 Hexo），就在海淘后零星的几个教程中，又全都是 WebStack config.yml参数配置讲解的教程，哎心累，但现在我终于搭建成功了，我觉得有必要去写我人生中第一个教程（这应该是全网第一篇吧？😂 至少我没找到，可能他们认为这太基础了，默认使用者都会）。最后其实呀，你只需要像创建你第一个博客那样去创建它，有搭建 Hexo 博客经验的小伙伴来说，应该简单不少，甚至不用看本篇。

话不多说，先上效果 网址导航 Demo

H2WebStack 简介

WebStack 是一个可以收藏网址和导航搜索的网站模板，内容均由Viggo收集并整理。本项目前端基于bootstrap前端框架开发，各后台及主题版本由广大网友提供。而我的网址导航，是基于Hexo版WebStack搭建的。

H3功能

网址导航主要实现两个功能：

  1. 可设为自己默认浏览器页面，方便快捷使用自己收藏的网址。
  2. 可以使用各种搜索引擎。

H2搭建教程

食用教程前，建议先扫视目录中的【雕虫小技】板块和《教程&笔记常量申明》。

若想直接用我的网址导航：

  1. 打开我的开源项目，点击右上角Fork，拉取到你的远程仓库，喜欢的话顺便给我点个 ⭐Star，谢谢~

  2. 将我的项目下载到本地任意位置

    其中下载项目方法如下：

    方法 1：直接下载 source 分支下的ZIP 压缩包。

    方法 2：在任意地方打开命令行，输入以下命令：

    bash# 推荐使用，下载速度更快 git clone https://github.com.cnpmjs.org/harrisblog/navigation.git # 若失效则用下方命令 git clone https://github.com/harrisblog/navigation.git

  3. 下载完毕后，先解压，再删除压缩包（教程接下来将该文件地址称之为<BlogRoot>）。

  4. 在<BlogRoot>下的命令行中输入npm install hexo-util --save下载 Hexo 相关组件。

若动手能力强，想白手起家：

  1. 在 GitHub 新建仓库，仓库名随意，选择Public公开按钮，点击Create repository。（若第一次使用 GitHub，名称建议:<UserName>.github.io）。
  2. 在电脑本地任意位置新建文件夹，名称随意，教程接下来将该文件地址称之为<BlogRoot>。
  3. 在<BlogRoot>下的命令行中输入hexo init初始化 Hexo 资源，稍等片刻你的文件夹下会多出以下文件。（<BlogRoot>\themes\.gitkeep文件可删除）
  1. 直接下载Hexo 版 Webstack 的官方项目到 <BlogRoot>\themes文件夹下

其中下载项目方法如下：

方法 1：直接下载 master 分支下的ZIP 压缩包。

方法 2：在该文件夹下打开命令行，输入以下命令：

bash# 推荐使用，下载速度更快 git clone https://github.com.cnpmjs.org/harrisblog/navigation.git # 若失效则用下方命令 git clone https://github.com/harrisblog/navigation.git

下载完毕后，先解压，再删除压缩包，最后将该文件夹命名为webstack。

接下来继续 👇

  1. 修改<BlogRoot>\_config.yml文件theme和deploy配置参数：

    diff# 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: <BranchName> # 2020年10月后<BranchName>默认为main

  2. 在<BlogRoot>下打开命令行中输入 Hexo 三连 ：

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

  3. 然后在浏览器地址栏中输入localhost:4000浏览网站的效果。

如果提示4000端口被占用（FATAL Port 4000 has been used）

  1. 命令行中输入 sudo lsof -i:4000，查看被占用进程的 pid

  2. 再输 sudo kill -9 [pid]

  3. 然后再继续hexo s，看到 INFO Hexo is running at http://localhost:4000 则成功。

  1. 最后输入hexo d即可部署到 GitHub 远端（如果你第一次部署，可能会要输入 GitHub 账密）。

  2. 开启 GitHub 页面：

    进入 GitHub 刚建的仓库 👉 点击Settings👉 点击左侧栏Pages👉 点击Source👉 选择默认代码分支master或main和默认的/(root) 👉 点击Save。

  3. 直接点击上方绿框里生成的网站链接，或在浏览器地址框中输入网址，即可看到部署之后的网站效果。

    • 第一次使用博客的选手直接输入：<UserName>.github.io

    • 老油条则输入<UserName>.github.io/<RepoName>/

H3搭建后续

🎉 到此网站初始搭建部署已经完成 🎉，接下来你可以做的事情：

  1. 根据官方文档来进行基本参数配置，或者直接查看本地<BlogRoot>\README.md文件。

  2. 更换域名。

  3. 自定义美化。

    这里提供我的网址导航美化代码：自定义 CSS，自定义 JS

    使用方法：

    在<BlogRoot>\themes\webstack\source\js下新建文件<Custom>.js，js 代码直接用我的或自定义写。

    在<BlogRoot>\themes\webstack\source\css下新建文件<Custom>.css，css 代码直接用我的或自定义写。

    打开<BlogRoot>\themes\webstack\_config.yml填入以下代码即可导入自定义文件：（当然你也可以直接用我的外链，不用在本地新建文件，href=""、src=""处填对应外链即可）

    diffcustom: head: # 以下内容插入到<head></head>标签内，可设置多行，注意每行开头至少四个空格 + <link rel="stylesheet" type="text/css" href="/css/<Custom>.css"> body: # 以下内容插入到</body>标签之前，可设置多行，注意每行开头至少四个空格 + <script src="/js/<Custom>.js"></script>

  4. 搭建博客镜像网站，例如在 Gitee、Vercel、Coding 等代码托管平台搭建。（因为在国内用 GitHub 搭建的网站访问速度非常慢）。

  5. 版本控制：

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

    备份项目代码目的是：

    1. 魔改失败时可以拉取上一次提交的代码到本地。
    2. 在外地没带自己电脑情况下，可以用其它电脑操作。

    具体操作：在<BlogRoot>下的Git Bash中输入

    bashgit 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

H2雕虫小技

  1. 如何获取一个网站的 Logo 图标？

    • 在目标网站的首页网址后加上/favicon.ico并敲下Enter，可以得到近 90%网站的 Logo 图标。

    • 也可以按下Ctrl + U打开网页源码，按下Ctrl+ F搜索ico、logo、.png等关键词，可找到 Logo 链接。

      这俩方法下来，几乎绝大多数网站的 Logo 不在话下

  2. 打开命令行cmd快捷方法：

    直接在文件地址栏输入cmd并敲下Enter即可打开命令行

  3. 加快git clone下载速度：

    只需在HTTPS 型仓库 Git 地址里的github.com后加.cnpmjs.org，不出意外下载速度会很快。

👈 返回【搭建教程】

H2可能有的八阿哥

  • 网址图片可能会加载不出来

    打开<BlogRoot>\themes\webstack\_config.yml填入以下代码：

    diffcustom: head: # 以下内容插入到<head></head>标签内，可设置多行，注意每行开头至少四个空格 body: # 以下内容插入到</body>标签之前，可设置多行，注意每行开头至少四个空格 + <script src="<FilePath_lozad.min.js>"></script>
碎碎念，处理Bug时的心路历程

其实我自己在没有教程的情况下能搭建成功网址导航，至少对于刚上道的我来说很骄傲自豪的，但谁 tm 又能想得到，在摸爬滚打的过程中，突然遇到网址图片显示不出来的问题，于是我疯狂百度，也问了很多使用过的博主，都说其他网站可能存在防盗链机制，大致意思是有这个机制的网站，它的图片链接只在自己网站可显示，放其他网站是无法使用的。但当我将所有图片换成我自己仓库的图片时，仍显示不出图片，所以问题不一定出现在图片链接上，也可以说我收藏的那些网站根本没有开防盗链机制。

于是我花了一周时间找原因，源码对比测试。这一周中，有很多离谱的情况发生，我用小康的源码，图片可以正常显示，但我的就不行，于是我一点一点将他的代码的改成我的，目的是为了找到问题出现在哪一块，但就是找不到问题出现的原因。更离谱的是，经过几天的测试后，我放弃了各种推断，再次全部使用小康的源码准备重新找原因的时候，结果连小康图片都不显示了，那为什么我最开始用他的源码就可以？就在昨天，我又双叒叕用他的源码再次部署到 GitHub 上，再将我的index.html代码和小康的对比，终于发现了原因！我发现我的index.html最后几行缺少lozad.min.js文件的引入，lozad 应该是起图片懒加载的作用，你这就以为我找到了罪魁祸首？真相大白了？我 tm 寻思<BlogRoot>\themes\webstack\_config.yml文件里明明有将这个 js 文件导入，为什么最后生成的 html 文件却没有导入，我此时摸着我凉秃秃的头顶百思不得其姐，现在等于说我已找到了问题和解决方案，只是不知道问题出现的原因，知道原因的小伙伴赶紧留言评论，好让我 s 心。最后十分感谢并墙裂推荐Diffchecker这个贼好用的代码对比网站，不然可能会浪费我更多的时间，毕竟我已经和这个问题杠上了一周，真是心痛我宝贵的寒假时光 😭，不过结果是好滴。

H2参考教程

H3额外推荐

结束语：

有什么问题、好的建议、或链接失效请留言哦~

第一次写教程请多多指教阿里嘎多

最后如果本篇对你有帮助，请一键三。。。哦不对，留留言，给个 🍭 也是可以的

Prev

Next

Post's coverHDU OJ C语言刷题笔记Post's cover雅思考试题型&答题技巧

Related Posts

Post's cover博客食用须知！Post's coverHexo和Git相关问题记录合集Post's coverButterfly博客二创集锦Post's coverButterfly主题侧边小组件——土味情话