VuePress从零开始搭建专属博客

时间 2021-08-14

标签 vue node react webpack git github web shell npm json 栏目 React 繁體版

原文原文链接

简介

欢迎使用个人指南，了解如何使用VuePress! 这个项目的产生是出于使用 VuePress 做为个人博客引擎的愿望，而且没有明确的途径.vue

VuePress是什么？

VuePress是以Vue驱动的静态网站生成器，是一个由Vue、Vue Router和webpack驱动的单页应用。在VuePress中，你可使用Markdown编写文档，而后生成网页，每个由VuePress生成的页面都带有预渲染好的HTML，也所以具备很是好的加载性能和搜索引擎优化。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用，其余的页面则会只在用户浏览到的时候才按需加载。node

版本

该项目目前位于 version 0.11.0-beta.react

目的

该项目的目标很简单:webpack

记录我使用VuePress搭建博客的全过程,以便之后翻阅学习,同时但愿能够帮到你,为你提供多样的选择,您根据本身的喜爱自定义它。git

功能

为何要使用VuePress搭建博客呢,除了VuePress自带的出色功能以外,您还能够当即使用如下工具：github

自动生成主页上的最新帖子
简单的Google Analytics（分析）配置
自动RSS提要生成
简单的图标配置
主页上的简单分页
全部帖子的存档页面按日期排序

小菜一碟吧？那就不要时间浪费了，让咱们开始吧！web

入门

准备

NodeJS >= 8
yarn (可选)
nodeJS以及vue基础知识
gitBash here

安装

全局安装VuePress

yarn global add vuepress # 或者：npm install -g vuepress复制代码

建立项目目录

mkdir project
cd project复制代码

初始化项目

yarn init -y # 或者 npm init -y复制代码

新建docs文件夹

docs文件夹做为项目文档根目录，主要放置Markdown类型的文章和.vuepress文件夹。shell

# 新建一个 docs 文件夹mkdir docs# 进入docs文件夹 建立 README.md文件echo '# Hello VuePress!' > README.md复制代码

设置package.json

VuePress中有两个命令，vuepress dev docs命令运行本地服务，经过访问http://localhost:8080便可预览网站，vuepress build docs命令用来生成静态文件，默认状况下，放置在docs/.vuepress/dist目录中，固然你也能够在docs/.vuepress/config.js中的dest字段来修改默认存放目录。在这里将两个命令封装成脚本的方式，直接使用npm run docs:dev和npm run docs:build便可。npm

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}复制代码

此时运行命令

npm run  docs:dev复制代码

运行访问http://localhost:8080/,(此时页面空白并没有内容)json

结束运行,执行命令

npm run docs:build复制代码

查看文件变化多了个node_modules
docs 多了个 .vuepress文件

配置config.js

# 在.vuepress 建立config.js 文件 # 在config.js 添加配置信息module.exports = {
  title: 'Harold\'s blog',
  description: '描述',
  head: [ // 注入到当前页面的 <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.png' }],
    ['link', { rel: 'manifest', href: '/logo.png' }],
    ['link', { rel: 'apple-touch-icon', href: '/logo.png' }],
  ],
  serviceWorker: true, // 是否开启 PWA
  base: '/VuePress/', // 部署到github相关的配置
  markdown: {
    lineNumbers: true // 代码块是否显示行号
  },
  themeConfig: {
    // 导航栏配置
    nav:[
      {text: 'Home', link: '/' },
      {text: 'Learn', link: '/learn/' },
      {text: 'Profile', link: '/profile/' },
      {text: 'vue', link: '/vue/' },
      {text: 'react', link: '/react/' },
      {text: '风花雪月', link: '/风花雪月/' }
    ],
    version: '0.11.0-beta'
  }
}复制代码

base 站点的基础路径，它的值应当老是以斜杠开始，并以斜杠结束。这里设置为 /VuePress/，咱们再次在本地运行项目，访问路径就须要变动为http://localhost:8080/VuePress/
title 网站的标题
description 网站的描述

运行项目

npm run  docs:dev复制代码

(如图)

部署

完成上面的工做以后,固然还有最后一步,咱们须要讲代码部署到服务器上,我这里介绍的是部署GitHub Pages,具体请参照文档：Vupress-部署.固然对于本身有服务器的,也能够尝试部署到本身的服务器上.

建立github仓库

在github上建立一个仓库,并将你的代码提交到github上.
在 docs/.vuepress/config.js 文件中设置正确的 base。部署站点的基础路径，若是你想让你的网站部署到一个子路径下，你将须要设置它。如 GitHub pages，若是你想将你的网站部署到 https://foo.github.io/bar/，那么 base 应该被设置成 "/bar/"，

自动部署

在项目根目录中，建立一个以下的 deploy.sh 脚本文件（请自行判断去掉高亮行的注释）:

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs: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 git@github.com:<USERNAME>/<USERNAME>.github.io.git master

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

cd -复制代码

在依赖package.json文件中添加

{
  "scripts": {
    "deploy": "bash deploy.sh"
  }
}复制代码

双击deploy.sh运行脚本或者项目根文件夹右键 gitBash here , 而后输入bash deploy.sh,会自动部署在咱们的 GitHub 仓库中deploy.sh文件中配置的master:gh-pages分支

操做github

最后, 打开github, 在 GitHub 项目点击 Setting 按钮，找到 GitHub Pages - Source，选择 gh-pages 分支，点击 Save 按钮后，静静地等待它部署完成便可。

踩坑

踩坑当我彻底按照合理的配置进行了操做,可是依旧没有把项目布置到GitHub Pages上

挖坑:在deploy.sh文件中,最后push的时候有个坑git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages,若是你的项目是用ssh 克隆下来的就没问题，但很不幸,我是用简单并习惯的https 克隆下来的,
填坑: 配置ssh完之后从新用ssh克隆下项目，双击deploy.sh就能够自动部署了

配置ssh

一.设置git的user name和email

若是你是第一次使用，或者尚未配置过的话须要操做一下命令，自行替换相应字段。

git config --global user.name "harold1024"
git config --global user.email  "744924498@qq.com"复制代码

二.检查是否存在SSH Key

cd ~/.ssh
ls
//看是否存在 id_rsa 和 id_rsa.pub文件，若是存在，说明已经有SSH Key复制代码

ls是列出全部文件，看有没有id_rsa 和 id_rsa_pub
若是有跳过生成密钥这一步

三.生成密钥

ssh-keygen -t rsa -C "744924498@qq.com"复制代码

四.获取SSH Key

cat id_rsa.pub
//拷贝秘钥 ssh-rsa开头复制代码

五.GitHub添加SSH Key

GitHub点击用户头像，选择setting
在左侧选择 SSH and GPG keys
新建一个SSH Key
取个名字，把以前拷贝的秘钥复制进去，添加就好啦。

六.验证和修改

测试是否成功配置SSH Key

ssh -T git@github.com
//运行结果出现相似以下
Hi harold1024! You've successfully authenticated, but GitHub does not provide shell access.复制代码

在项目 Clone or download中便可切换Use HTTPS为Use SSH.