Vue.js+Github打造个人网站GithubPages

github.io是每个Github账号可以免费拥有的一个域名，这个域名上部署的页面，称之为Github Pages，用户有高度自主权去DIY自己的“个人网站”。

通常，用户会将其用来作为自己的博客网站，存放一些博客、收藏、简历等，业界比较成熟的个人博客网站模板是Hexo，它基于Node.js，能快速生成一套可运行成博客页面的代码，用户将自己的文章加入并配置好相关信息，然后编译，推送到github.io仓库中，Github会自动将页面部署到服务器。不仅如此，Hexo上提供丰富多样的模板主题，可供选择。

如果使用这样的主题，可能和别人“撞衫”，毕竟很多人经常看到模板一样的页面。为了有独一无二的网站，博主曾经自己实现了一个博客网站——universezy.github.io，配合开源的UI库，也能达到不错的效果。之后也有同事对此感兴趣，想尝试，所以决定通过本文介绍如何自己打造一个独一无二的GithubPages。

在此之前，你需要具备以下知识：

在以上准备工作之外，你还需要一些知识，用以完成几个核心功能，这将在后续功能实现中提到。

整个开发周期可能需要一周到一个月以上，中间会遇到各种疑难问题，因此需要有足够的耐心和学习能力。

在Github中创建一个仓库，名字有固定格式：帐号名+“.github.io”：

Github会将其识别为你的个人网页，并将其部署到服务器：

通过访问你的域名：帐号名+“.github.io”，可以看到当前部署的页面，由于缺少index.html文件，所以显示的是README.md文件的内容：

接下来便正式开发前端页面。

首先，需要对整个工程所依赖的主要技术进行选型：

参考Hexo的模板、几个主流开源博客网站平台，主要包括了以下几个功能模块：

我们的博客资源、图片等，最终是存放在Github仓库上，那么网络请求这些资源时，就需要清楚资源的请求地址。

即便我们不清楚Github的服务器上的仓库架构，我们通过经验也能推测出来一个合理的架构：

(1) 资源请求

一个git仓库看做是一个文件夹：

(2) 工程位置

后台服务器加载的是仓库根目录下的index.html文件，那么我们初始化的工程需要以仓库根目录为根目录，否则需要自己处理重定向。

整个网页工程，包括三大顶层结构：

下面将详细介绍。

这一层以服务器加载页面所需的index.html为中心，js中可以处理重定向相关逻辑，页面事件监听等，而css可以做一些全局的背景效果。

按照Vue.js工程默认结构，index.html中的id为app的块，便是后面所有UI组件的顶层父布局。

因此这一层理解为顶层容器。

按照Vue.js模块化设计的思想，上面的核心功能分别对应一个模块，即vue文件，进行组装或替换，以实现我们需要的UI效果。

由于会涉及到一些本地数据，例如：博客配置（标题，摘要，分类，标签，日期等），横幅，通知告示等，这些可以以Json格式保存于文件中。

除此之外，一些本地图片资源也需要保存于资源目录下。

所以，这一层主要是负责页面内容。

一个可交互的网页，必不可少的基础能力包括：路由管理、状态管理、网络请求等，除此之外，通常还会支持三方分享和统计上报。

由此可见，该层属于基础能力。

依照上面的功能点和架构，下面对核心技术方案进行讲解。

(1) 页面路由

使用默认的Router库，每一个模块对应一个页面，例：

(2) 容错机制

考虑到默认url地址下没有路由，以及无法匹配的路由地址，需要加入默认情况和异常情况：

将其重定向到正确的路由。

(3) 携带参数

比如我们想在url中拼接博客的id，然后直接打开对应页面，则可以先在路由中处理参数：

这样一来，url中/blog/display/后面紧跟的字符串将被识别为参数，同时还需要在Vue文件中获取参数：

通过this.$route.params.xxx的方式获取路由参数。

使用官方推荐的Vuex，除了可以保存一些全局变量，还可以缓存网络请求的资源，避免重复请求带来的开销，例如，我定义了一个名为GlobalDtata的js，其中可以缓存网络请求的bio文件，也定义了网页标题常量：

那么在获取该bio文件的地方：

官方推荐的是基于promise的HTTP客户端axios，其使用非常简单，首先是封装通用请求方法：

然后调用并处理回调：

以常用的QQ、QQ空间、微信、微博分享为例介绍，除了微信只能以二维码形式打开，其余均可以支持web分享方式：

博主推荐开源库qrcodejs。

首先通过npm引入至工程依赖（npm版本信息）：

提供一块显示区域：

然后在js中动态生成：

博客页面毫无疑问选用Markdown格式，这里推荐开源库mavonEditor。

仍然是先通过npm引入（npm版本信息）:

在页面中使用组件：

在js中置相关属性：

为了让我们的网页能较好地展示在不同设备（PC，Phone等）上，需要在开发时考虑布局的实现方式，而响应式布局便是为了解决这个问题。

通常实现响应式布局有两个方向：

在App.vue中设置样式：

这段代码表示，对id为app的组件有以下效果：

不管是Hexo还是自定义博客，都免不了对博客数据的配置，即每篇博客的id、类别、标题、标签、摘要、时间戳等。

以博主的个人主页为例，创建一个blogs.js的文件，专用于配置所有博客信息：

在展示博客的页面，通过路由获取博客id，然后网络请求获取对应Markdown资源并展示。

而在总览页面，需要显示所有博客Item时，先定义每个Item的样式，以便列表复用，这里省略布局展示。

然后在父容器中获取博客js数据，并加载到列表中：

中间可能会经过一些过滤操作，最后通过props属性将item传给子组件：

当我们全部开发完后，对Vue.js工程进行编译，然后将整个github.io仓库push到远程仓库，稍后github服务器将自动替换新的资源。

至此，我们的基于Vue.js开发的个人网页Github Pages便大功告成。

独立完成一个博客网站的工作量确实较重，期间还会踩非常多的坑，因此需要足够的耐心和毅力，除此之外，涉及的技术栈也是蛮多的，对知识的成长也能起到较大的帮助，最后，希望感兴趣的读者也能开发出自己满意的网站，如果有问题，可通过邮件与我联系，很乐意与你交流！