vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

栏目: 编程工具 · 发布时间: 6年前

内容简介：这个博客是基于Vuepress1.X来搭建的。记录一些技术方面的知识。下面是介绍怎么用Vuepress从头开始搭建一个技术博客。Vuepress是Vue生态中关于静态网站的一个生成器，对于技术类型博客支持很好，配置少，上手快，UI风格讨人喜欢。这个博客网站使用的是Vuepress1.x来进行搭建的。除了这个博客之外下面的网站也是使用的vuepress本篇教程一共会在github上面建立两个项目，一个用来写博客，另外一个用来展示博客。其实也可以合成一个项目，看个人喜好。

这个博客是基于Vuepress1.X来搭建的。记录一些技术方面的知识。下面是介绍怎么用Vuepress从头开始搭建一个技术博客。

Vuperss简介

Vuepress是Vue生态中关于静态网站的一个生成器，对于技术类型博客支持很好，配置少，上手快，UI风格讨人喜欢。这个博客网站使用的是Vuepress1.x来进行搭建的。除了这个博客之外下面的网站也是使用的vuepress

开始

  • 默认你的电脑上有Node环境
  • Node.js 的版本大于 8.6
  • 如果已经阅读过官方文档最好不过

本篇教程一共会在github上面建立两个项目，一个用来写博客，另外一个用来展示博客。其实也可以合成一个项目，看个人喜好。

安装vuepress

在这个博客使用的是vuepress1.X所以安装的时候需要这样安装：

yarn global add vuepress@next // OR npm install -g vuepress@next

复制代码

如果想要使用vuepress0.X,按照下面的安装方式，

yarn global add vuepress // OR npm install -g vuepress
复制代码

对于新手搭建博客这两个版本的区别不大，这个博客中建议使用vuepress1.X。

搭建博客项目

一共分为四个部分

  • 搭建一个初始项目并且能用vuepress来写博客
  • 配置导航和侧边栏
  • 构建并且发布
  • 自动化部署

开始之前我先放一个我的博客的目录结构：

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

第一部分：搭建项目

新建write-blog文件夹,并且初始化项目,在第一部分中

mkdir writ-blog
cd writ-blog
npm init -y
mkdir docs // 这个文件夹是放置所有博客的地方
cd docs
touch README.md //创建reademe文件，即首页

复制代码

初始化的目录结构如下所示：

.
├─ docs
│  └─ README.md
└─ package.json
复制代码

注意 docs文件夹是你所有博客所在的文件夹，docs文件夹根目录下的README.md 文件在经过vuepress的编译之后会成为你的博客网站的首页！！！

在docs跟目录中的README.md文件中写上以下内容：

---
home: true
heroImage: /logo.png
actionText: 介绍 →
actionLink: /blog/
features:
- title: 框架
  details: Vue、React、Abgular、Flutter的学习和实践。
- title: 工作笔记
  details: 好记性不如烂笔头，记录平时工作中遇到的一些问题和解决方法。
- title: 前端可视化
  details: 前端方面可视化的知识，包括webgl,canvas,glsl等。
- title: 后端
  details: 前端怎么能不了解一些后端知识呢？ 一些个人对后端的学习和实践。
- title: 开发环境配置
  details: 有时候开发环境的配置也是很头疼的，windows和mac下面又各不一样，工具的熟练程度直接决定开发速度，所以留文待查吧。
footer: MIT Licensed | Copyright © 2019-present chenfeng
---
复制代码

注意: 这个文件就是你博客的首页(index.html)，```'home: true'```,是必须的

初始化之后，在package.json中的script中添加两个命令：

"dev": "vuepress dev docs",
"build": "vuepress build docs",

复制代码

然后执行 npm run dev ，在浏览器中打开服务,会出现一个页面，大概长得是这个样子

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

,到这里第一步就已经完成了，你已经可以写博客了，但是远远不能满足咱们的需求，这个时候就需要配置导航和侧边栏了。

第二部分：配置导航和侧边栏

第二部分的目录结构如下：

.
├─ .vuepress
│  └─ config.js
├─ docs
│  └─ README.md
└─ package.json
复制代码

你会注意到这一步多出了一个 .vuepres 的文件夹，有关vuepress的配置，都在这个文件夹之中，下面介绍一下有关导航栏和侧边栏的配置。 .vuepress/config 中的基本配置如下： 

module.exports = {
    title: 'chenfeng\'s blog',
    description: 'chenfeng的个人博客',
}
复制代码

当你完成上述步骤的话，你在本地起的dev环境所呈现的网页应该包含一个页头,和一个描述。

下面这个配置内容是我的网站的配置：

module.exports = {
    title: 'chenfeng\'s blog',
    description: 'chenfeng的个人博客',
    head: [ // 注入到当前页面的 HTML <head> 中的标签
        ['link', { rel: 'icon', href: '/logo.png' }], // 增加一个自定义的 favicon(网页标签的图标)
        ['link', { rel: 'manifest', href: '/logo.png' }],
        ['link', { rel: 'apple-touch-icon', href: '/logo.png' }],
        ['link', { rel: 'mask-icon', href: '/logo.png', color: '#3eaf7c' }],
        ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache' }],
        ['meta', { 'http-quiv': 'expires', cotent: '0' }],
        ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache, must-revalidate' }]
    ],
    serviceWorker: true, // 是否开启 PWA
    base: '/', // 这是部署到github相关的配置
    markdown: {
        lineNumbers: true // 代码块显示行号
    },
    themeConfig: {
        nav: [
            { text: '主页', link: '/' },
            {
                text: '基础', items: [
                    { text: 'JavaScript', link: '/basis/JavaScript/' },
                    { text: 'HTML', link: '/basis/HTML/' },
                    { text: 'CSS', link: '/basis/CSS/' },
                    { text: 'TypeScript', link: '/basis/CSS/' },
                ]
            },
            {
                text: '框架', items: [
                    { text: 'Vue', link: '/frame/Vue/' },
                    { text: 'React', link: '/frame/React/' },
                    { text: 'Angular', link: '/frame/Angular/' },
                    { text: 'Flutter', link: '/frame/Flutter/' }
                ]
            },
            { text: '工作笔记', link: '/work/' },
            { text: '前端可视化', link: '/visualization/' },
            { text: '环境配置', link: '/devconfig/' },
            { text: 'Github', link: 'https://github.com/soyomo' }
        ],
        sidebar: {
            '/blog/': getSidebar('blog'),
            '/frame/': getSidebar('frame'),
            '/basis/': getSidebar('basis')
        },
        sidebarDepth: 2, // 侧边栏显示2级
    }
};

function getSidebar(barName) {
    const sidebar = {
        frame: [
            '/frame/',
            '/frame/Vue/',
            '/frame/React/',
            '/frame/Angular/'
        ],
        blog: [
            '/blog/'
        ],
        basis: [

        ]
    }
    return sidebar[barName]
}
复制代码

如果你感觉文件太长的话，可以单独把nav和sidebar提到另外一个独立的文件之中。我的 .vuepress 的文件目录结构是这样的：

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

其中 nav.js 的内容如下所示： 

module.exports = [
    { text: '主页', link: '/' },
    {
        text: '基础', items: [
            { text: 'JavaScript', link: '/basis/JavaScript/' },
            { text: 'HTML', link: '/basis/HTML/' },
            { text: 'CSS', link: '/basis/CSS/' },
            { text: 'TypeScript', link: '/basis/CSS/' },
        ]
    },
    {
        text: '框架', items: [
            { text: 'Vue', link: '/frame/Vue/' },
            { text: 'React', link: '/frame/React/' },
            { text: 'Angular', link: '/frame/Angular/' },
            { text: 'Flutter', link: '/frame/Flutter/' }
        ]
    },
    { text: '工作笔记', link: '/work/' },
    { text: '前端可视化', link: '/visualization/' },
    { text: '环境配置', link: '/devconfig/' },
    { text: 'Github', link: 'https://github.com/soyomo' }
]
复制代码

然后把这个文件引入到 config.js 中就可以了.这个时候的导航还是不能工作的，因为你会找不到路径。所以需要把导航对应的文件夹都建立好，这些文件夹都是建立在 docs 的跟目录中的，博客每个页面对应的文件都是在docs的跟目录下的！！！这些文件夹建立好之后，都要创建一个README.md的文件，因为当你的路径只写文件夹的时候，这个文件在vuepress中是路径默认匹配的。我的docs的文件目录如下：

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

这个时候运行项目,每一个导航栏对应的页面应该时空白页面。

关于 docs/.vuepress/public 这个文件夹:

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

是存放公共的资源的，我把我博客的logo放到了这个文件夹中，每篇博客的静态资源建议放到该篇博客的目录下而不是都放到public之中。例如：本片教程中的图片我都放到了这篇文章对应的目录下面:

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

blog文件夹的路径： write-blog/docs/blog ;

关于 pwa 的 manifest 配置也是需要放到这个文件夹中的。 manifest.json的内容： 

{
    "name": "chenfeng",
    "short_name": "feng",
    "start_url": "index.html",
    "display": "standalone",
    "background_color": "#2196f3",
    "description": "个人网站",
    "theme_color": "blue",
    "icons": [
      {
        "src": "./logo.jpg",
        "sizes": "144x144",
        "type": "image/png"
      }
    ],
    "related_applications": [
      {
        "platform": "web"
      },
      {
        "platform": "play",
        "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
      }
    ]
  }

复制代码

到此为止，第二部分就完毕了。

第三部分:构建并且发布

在这个部分中你需要在github上新建一个项目，我的项目是 项目 ，其实这个项目就是所谓的GitHub Pages，新建好项目之后需要在该项目的setings中，

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。
,把你的项目的名称改为 {你的用户名}.github.io ,然后你就拥有了一个gitpage,就可以直接通过该链接访问了。 https://{username}.github.io/

; 做完这些之后，需要在你的write-blog项目中的package.json中添加以下命令：

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh",
  },
复制代码

并且在 write-blog 文件的跟目录下新建一个 deploy.sh 文件,内容如下： 

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e
npm install -g vuepress@next
# 生成静态文件
npm run build

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

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

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

# 如果发布到 https://<USERNAME>.github.io
# git push -f https://${token}@${address} master:master
git push -f git@github.com:{你的用户名}/{你的用户名}.github.io.git master

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

cd -
复制代码

然后，执行 npm run deploy ，之后就会发布到 {username}.github.io 这个项目中去了，并且通过连接是可以访问的。这样就基本可以实现书写博客了，但是每次写完都得去 npm run deploy 一下，并不是很友好，那么自动化部署就会帮到你了。

第四部分：travis自动化部署

对于travis,如果你还没有听说过，那么这里有一篇入门的教程供你参考。在这个环节里，分为三部分：

  • 用你的github账号登陆travis网站
  • 在github上面申请Personal access tokens
  • 在travis中设置环境变量

申请Personal access tokens

去 github setting 申请一个Personal access tokens

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

点击Generate new token

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

随便起一个Note,然后把所有的都给勾选上，然后点击Generate token这个按钮，结果大概是这样的

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

,然后点击后面的复制按钮图标，留作第二步使用;

设置Environment Variables :100:

去travis上你的项目中的More OPtions(下图中右上角):

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

中找到Settings,再在Environment Variables中添加环境变量,我添加的类似于下图，

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

图中的token后面的内容就是第一步中复制的内容，address的内容是我的github项目的地址。添加完毕之后，在项目中的deploy.sh文件中修改git push 的内容，如下:

!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e
npm install -g vuepress@next
# 生成静态文件
npm run build

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

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

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

# 如果发布到 https://<USERNAME>.github.io
git push -f https://${token}@${address} master:master

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

cd -
复制代码

这样，在提交代码的时候就不用每次都去 npm run deploy 了

报错

当初部署的时候，并没有去github申请token导致在travis上报错,如果遇到这个报错：

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。

说明没有权限往git仓库上提交代码，那么这个时候就需要重复第四个步骤：travis自动化部署。

后续

上面的步骤都做好之后，一个简单的博客网站就已经在你的手中诞生了，这个时候应该去买杯咖啡或者吃顿大餐来犒赏一下自己:tada: :tada: :tada:,但是这个博客并没有可以评论的地方怎么办呢？

添加评论系统

在添加评论之前你需要准备clientID和clientSecret，这两个东西的生成是在这里 Register a new OAuth application ,

vuepress+GitHub博客，从此不再沉默。自动化构建+评论，就是这么简单。
除了Authorization callback URL之外，剩余的三项是可以随便填写的，Authorization callback URL中的回调url一般指向的是你的博客地址，我的填写的是‘ soyomo.github.io

’，点击Register application 之后会跳转一个新页面你就会看到clientID和clientSecret了。然后接下来就是添加系统评论的部分了。

我的博客里面用的是 gittalk 来实现评论的，gittalk的原理就是利用github的issue来实现评论博客的。具体的实现是在 .vuepress/enhanceApp.js 文件中。关于enhanceApp.js的内容可以参考vuepress的官方文档,在这个博客项目中就只需要在该文件中输入以下代码就可以了： 

function integrateGitalk(router) {
    const linkGitalk = document.createElement('link');
    linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
    linkGitalk.rel = 'stylesheet';
    document.body.appendChild(linkGitalk);
    const scriptGitalk = document.createElement('script');
    scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
    document.body.appendChild(scriptGitalk);
  
    router.afterEach((to) => {
      if (scriptGitalk.onload) {
        loadGitalk(to);
      } else {
        scriptGitalk.onload = () => {
          loadGitalk(to);
        }
      }
    });
  
    function loadGitalk(to) {
      let commentsContainer = document.getElementById('gitalk-container');
      if (!commentsContainer) {
        commentsContainer = document.createElement('div');
        commentsContainer.id = 'gitalk-container';
        commentsContainer.classList.add('content');
      }
      const $page = document.querySelector('.page');
      if ($page) {
        $page.appendChild(commentsContainer);
        if (typeof Gitalk !== 'undefined' && Gitalk instanceof Function) {
          renderGitalk(to.fullPath);
        }
      }
    }
    function renderGitalk(fullPath) {
      const gitalk = new Gitalk({
        clientID: '****', // 在github上生成的
        clientSecret: '****', // 在github上生成的 come from github development
        repo: '****', // 你的博客的仓库名称
        owner: '****', // 你在githug上的用户名称
        admin: ['****'], // 管理成员
        id: 'comment',
        distractionFreeMode: false,
        language: 'zh-CN',
      });
      gitalk.render('gitalk-container');
    }
  }
  
  export default ({Vue, options, router}) => {
    try {
      document && integrateGitalk(router)
    } catch (e) {
      console.error(e.message)
    }
  }

复制代码

需要注意的是因为在开发环境中我们的项目使用的是‘write-blog’，而配置中的repo填写的是博客的项目名称，就会导致在开发环境中登陆不成功，但是如果开发环境中已经有关于评论的部分的话，就说明已经配置成功了


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Big Java Late Objects

Big Java Late Objects

Horstmann, Cay S. / 2012-2 / 896.00元

The introductory programming course is difficult. Many students fail to succeed or have trouble in the course because they don't understand the material and do not practice programming sufficiently. ......一起来看看 《Big Java Late Objects》 这本书的介绍吧!

码农工具
CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2026 码农网 粤ICP备17054400号-3